Use shadow DOM instead of an iframe to encapsulate CSS #416
Conversation
Fix netlify#161 The problem: the widget uses an iframe to encapsulate its CSS and prevent leaking it to the projects using the widget (and vice versa). But since the iframe has a `src` attribute with the value `about:blank`, password managers do not work properly (they refuse to set a password without a corresponding url). The solution: as suggested by this comment netlify#161 (comment), this commit replaces the iframe by a shadow DOM element, which still encapsulates the modal CSS, but lets password managers do their thing (confirmed on Firefox 84.0.2).
| @@ -253,7 +256,6 @@ | |||
| .btnClose::before { | |||
| content: "×"; | |||
| font-size: 25px; | |||
| line-height: 9px; | |||
There was a problem hiding this comment.
I'm not sure why, but I had to remove this so that the X was centered.
|
✔️ Deploy Success! 🔨 Explore the source changes: 24be5db 🔍 Inspect the deploy logs: https://app.netlify.com/sites/identity/deploys/600420a924de790008388612 😎 Browse the preview: https://deploy-preview-416--identity.netlify.app |
|
Using the Preview Deploy link, I tried to fill out the credentials using Bitwarden, but it still does not work. |
|
What's holding this up? The iframe method is not ideal as I had issues with a netlify site that itself was in an iframe and the password widget, so I am guess the iframe identity method would also not work in an embedded page though I have not tested. I just tested the preview deploy and was able to put in my saved credentials in Chrome on mobile. |
|
Afternoon, is there any move on this? Seems pretty odd that we still can't have browsers autofill credentials. |
Fix #161
The problem: the widget uses an iframe to encapsulate its CSS and prevent leaking it to the projects using the widget (and vice versa). But since the iframe has a
srcattribute with the valueabout:blank, password managers do not work properly (they refuse to set a password without a corresponding url).The solution: as suggested by this comment #161 (comment), this commit replaces the iframe by a shadow DOM element, which still encapsulates the modal CSS, but lets password managers do their thing (confirmed on Firefox 84.0.2).