Angular HTML Autocomplete="nope" or "off" not working hosted from CDN in chrome - angularjs

I have an input box for surname and I have set Autocomplete = "nope" or even tried "off". For some reason, it's not picking it and always allowing me to select from autocomplete list.
Our Ui app is hosted through CDN. So when I access my app through link [https:// Xyz. net] via CDN then Autocomplete off does not work.
but when I access its source link [https// xyz.azurewebsites. net] the autocomplete off works for same chrome browsers.
not sure why a change in behavior for the same app in the different source location.
Note: I tried to purge the content in CDN and it didn't work.
My expected behavior is textbox should not show autocomplete options.
Any guidance is much appreciated.

Since most modern browsers have password management built into them, they do not support this attribute for login fields anymore.
in-browser password management is generally seen as a net gain for
security. Since users do not have to remember passwords that the
browser stores for them, they are able to choose stronger passwords
than they would otherwise.
You can read more about the reasoning for this behavior and browser support for the attribute here
On the other hand, there seem to be quite a few ways to work around this with various hacks and JavaScript, but I'm unsure if they would work across browsers or cause more complications.
Also to answer you question as to why you see autocomplete only in one domain: I suspect that you may not be seeing the autocomplete suggestions in a specific domain because you may not have clicked "remember password" which would have saved your credentials in the browser.

Related

How to fix "Does not provide fallback content when JavaScript is not available" in audit in PWA?

I have made a angular application and I want to test it in audit but in PWA under audit, i got error in PWA optimized section like
Does not provide fallback content when JavaScript is not available
I have even written <noscript>Please enable javascript</noscript> in index.html file. I have not got this error when i ran audit in localhost by starting http-server but the same thing i am checking on server then it gives red mark in PWA optimized section? How to solve this ?
This is the error:
Usually, Adding the <noscript> block on your page would take care of this... I had gone around this myself on my website
Referring to Google's site (which i visited today after your question, we see the description:
Given these considerations, this Lighthouse audit performs a simple
check to ensure that your page isn't blank when JavaScript is
disabled. How strictly your app adheres to progressive enhancement is
a topic of debate, but there's widespread agreement that all pages
should display at least some information when JavaScript is disabled,
even if the content is just an alert to the user that JavaScript is
required to use the page.
For pages that absolutely must rely on JavaScript, one approach is to
use a element to alert the user that JavaScript is required
for the page. This is better than a blank page, because the blank page
leaves users uncertain about whether there's a problem with the page,
their browsers, or their computers.
I suspect that when you disable javascript via chrome, you might end up with just the text "Please enable javascript"; Try also placing
an image, a backup navigation (which runs in case of no JS only)
a backup footer (which runs in case of no JS only)

Error on clicking the LinkedIn Share Button on IE/Edge

I am using the below Share Plugin of LinkedIn in my ReactJS app:
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
From LinkedIn Docs: https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin
It is working completely fine on Chrome/Firefox/Safari. But, on clicking the LinkedIn Share button (generated by the above scripts), the LinkedIn Share Popup appears and I get an error in my app console which says:
[object Error]: {description: "[Messenger] Required property 'target'
was not provided", message: "[Messenger] Required property 'target'
was not provided", nr#seenError: true, stack: "Error: [Messenger]
Required property 'target' was not provided at Anonymous function
(https://platform.linkedin.com/xdoor/scripts/in.js:7:55143) at
Array.prototype.forEach (native code) at t
(https://platform.linkedin.com/xdoor/scripts/in.js:7:54936) at e
(https://platform.linkedin.com/xdoor/scripts/in.js:7:56462) at e
(https://platform.linkedin.com/xdoor/scripts/in.js:7:34661) at value
(https://platform.linkedin.com/xdoor/scripts/in.js:18:23834) at s
(https://platform.linkedin.com/xdoor/scripts/in.js:18:38221) at
nrWrapper
([MY_SITE_LINK_ADDRESS]:9:16587)"}
Note: I hid the [MY_SITE_LINK_ADDRESS].
The problem here seems to be that you're relying on the plugin's JS, CSS, and HTML to handle every browser. Take a look: Here's someone else posting in 2018 having the same exact problem, Issue on IE with LinkedIn Share plugin. And, officially from LinkedIn, if you want this plugin to work, you need to ask your users to do this:
Open Internet Explorer.
Click Tools and select Compatibility View Settings.
Uncheck the box next to "Display all websites in compatibility view".
Click Close.
Is it reasonable to ask your users to reconfigure their browser just to be able to click one, single button on your website? Answer: No.
You don't need to rely on the LinkedIn Share Plugin. All you really ought to need is...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then making sure it works cross-browser is in your hands.
Source: Microsoft LinkedIn Share URL Documentation.
Sure, everyone says: Don't Reinvent the Wheel! I totally agree! But when you find a car that has square, cubic wheels, then maybe you want to reconsider!
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs

What can developers do to make the browser ui easy to automate for testing?

I'm curious what things a developer can do to make the creation of automated tests easier for testers using selenium web driver. The only thing I'm thinking of is using unique IDs for fields, buttons, etc. Can anyone think of any thing else that can be done?
From my experience, this really helps to automate whole process:
Provide unique IDs to at least important buttons (submit form, search buttons...)
Do not use HTTP Basic Authentification. Use normal login instead
Get rid of CAPTCHA fields. At least on test environment.
Provide friendly URLs, so that certain areas of app can be reached immediately
When page is loading, show some load image. Best option is to provide some small element which loads only when whole page is loaded.
Get rid of hover-only menus on page (you have to hover certain element to see other)

Checkboxes disappearing when uploading to Google App Engine

I have written a controller to take input from the form containing a list of options. The options have to be selected using checkboxes. I have successfully tested the code on my local machine. But when uploaded to the app engine, the webpage is not displaying the checkbox fields. It is not displaying the options either. I tested with 3 browsers - IE, Mozilla and Chrome and this happens everywhere. But, everything is working on fine on the browsers when running on local machine. I am quite confused as to what is going wrong.
Please help me fix this issue.
Thanks in advance...
You likely need to setup static file/directory mappings in app.yaml.
You need to provide us with more details to help you debug issues. For example, if the browser doesn't display what you expect tell us what it does display. What happens if you view source? Is your HTML there?

Issues with whole-site caching on CDNs? (e.g. alternate content for mobile browsers)

We are considering hosting the core of our site (everything that doesn't need to be dynamically generated) on a CDN, so that our root domain (e.g. "http://example.com/") would point to the CDN, then everything dynamic would either point to an alternate second-level domain (e.g. "http://search.example.com/ for searches) or be layered on top of the static content by AJAX calls to an alternate domain (e.g. http://ajax.example.com/).
This seems like something that would be very desirable for lots of sites but I don't see much information even on the CDN home pages about doing whole-site caching. There is at least one obvious problem that occurs to me, which is that we currently detect whether the user is coming from a mobile browser or not and serve mobile content if they are coming from a mobile browser. The problem is that as far as I know, with most CDNs you can only store on version of a page, so if you cache the regular page, mobile browsers will see that instead of the mobile version (and obviously vice versa).
We could get around this to some degree by moving the mobile stuff to a separate domain like m.example.com but we would need the CDN to detect mobile browsers and redirect them to that domain (which we would also like to have hosted on the CDN, but pointing at the mobile content instead of the regular content, obviously).
It seems like this should be widely supported but I can't find much information on it. Has anyone done something similar? If so, what CDN did you use and how did you address this issue? Were there other significant hurdles that needed to be overcome?
Edited to add a couple of things I forgot:
We also considered redirecting to the mobile site using javascript but then obviously older phones without javascript would be left out in the cold and they are the ones that probably need the mobile version the most.
One constraint that may factor into any answers to this question is that we need the URLs of our primary site to be very specific for SEO purposes but we don't care at all about SEO for the mobile version.
We have rules at our CDN (EdgeCast) that will cache multiple versions (Desktop, Iphone, Blackberry, etc.) of the same incoming Url. The CDN rules append a querystring to the request to the origin server. Custom code at our origin server renders the proper version depending on the incoming querystring. For example:
Desktop: CDN requests /?nomobile origin server returns Desktop rendering
Iphone: CDN requests /?iphone origin server returns Iphone rendering
Blackberry: CDN requests /?mobile origin server returns Mobile rendering
As far as the CDN is concerned, there are 3 different Urls, so 3 different pages are cached. The querystring is completely transparent to the end user. Even if you use a responsive design with media queries, this approach is incredibly valuable in giving you the flexibility to alter the HTML at the server level.
If the rendering of your page is different for various devices (e.g. mobile phones) it is not a static content and should not be on your CDN.
Put only real static files on your CDN and consider a different caching strategy for your pages.
Anyhow instead of detecting the client's browser via JavaScript you could also do this on the server-side and actually I would recommend you that, instead of JavaScript. Then you could realize the redirect approach.
Hope that helps.

Resources