Ghost: 1Password can't autofill Ghost.io logins
Issue Summary
Users cannot use a saved email or password on Ghost.io sites with 1Password. I’ve reproduced this on Firefox and Chrome with the 1Password browser plugin, and also iOS. It probably doesn’t work with any password manager, given the reason for the bug, but I’ve only tested 1Password.
The problem is that the login form is shown to the user in an anonymous (domain-less) iframe. You can read more about how I worked out what the problem was with Ghost in this thread, and more about the technical specifics of the about:srcdoc issue in this other thread.
Suffice it to say, password managers are not able to determine the domain of the page hosting the form when that page is generated dynamically and set inside an anonymous iframe. Because one of the important goals of password managers is to prevent phishing, they are very particular about ensuring that they only suggest an item for completion when the domain of the page matches the saved domain. Since the login forms in Ghost are all hosted inside these anonymous frames, there is no domain, just about:srcdoc. In the case of desktop browsers, 1Password does use the domain in the URL bar to look for possible matches. But it still won’t allow you to auto-fill into an anonymous iframe for the phishing reason described above.
It seems like the solution to this will have to involve either loading actual pages with a URL into the iframe, or else dispensing with the iframe entirely and just overlaying the form with JS/CSS.
The code which generates this page is probably here, although there are a couple of places which seem to generate anonymous iframes, so I’m not exactly sure which one is used by the login form(s).
Steps to Reproduce
- Create a Ghost.io login in your password manager. Set the email and password. Ensure that it’s tied to the domain used by your Ghost.io site.
- Visit the Ghost.io site and attempt to auto-fill the username (email) and password.
- Notice that you can’t autofill them. On iOS, it doesn’t even find the correct item.
Ghost Version
5.50.2? whatever version is live on ghost.io
Node.js Version
0
How did you install Ghost?
Hosted by ghost.io
Database type
Other
Browser & OS version
Mac: Chrome, Firefox; iOS: Safari
Relevant log / error output
No response
Code of Conduct
- I agree to be friendly and polite to people in this repository
About this issue
- Original URL
- State: open
- Created a year ago
- Comments: 19 (7 by maintainers)
Commits related to this issue
- :bug: fixed fields autocomplete not working in popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div — committed to susannakosic/Ghost by 9larsons a year ago
- :bug: fixed fields autocomplete not working in popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div — committed to susannakosic/Ghost by susannakosic a year ago
- :bug: fixed fields autocomplete not working in popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div — committed to susannakosic/Ghost by susannakosic a year ago
- Used Blob url src instead of srcDoc in iframes refs #16960 Attempted to work around the issue of password managers not autofilling in the login form. This would have been a very simple fix, preservin... — committed to vadimavdeev/Ghost by vadimavdeev a year ago
- Rendered member login form in Shadow DOM instead of an iframe refs #16960 Attempted to fix the issue of password managers not autofilling in the login form. Shadow DOM would allow to preserve the sty... — committed to vadimavdeev/Ghost by vadimavdeev a year ago
- :bug: fixed fields autocomplete not working in signin popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div for signin page — committed to susannakosic/Ghost by susannakosic a year ago
- :bug: fixed fields autocomplete not working in signin popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div for signin page — committed to susannakosic/Ghost by susannakosic a year ago
- :bug: fixed fields autocomplete not working in signin popup closes https://github.com/TryGhost/Ghost/issues/16960 - replaced iframe by div for signin page — committed to susannakosic/Ghost by susannakosic a year ago
Thanks a lot for putting this much effort into the issue!
I’ve open the PR for review. Tests are passing. I’ve only replaced the iframe by a div for the sign-in page. We ll wait for reviewers feedback.
Hi, I’m very new to this community and just starting exploring Ghost. I saw this “good first start issue” and investigated a bit what would happen just by replacing the iframe by a simple div. Seems like SignIn popup is working fine (loom here, although I can see a bunch of SigninFlow tests failing and I don’t know yet why. draft PR
Hi @nk9 and @naz! Thanks for the helpful descriptions & links so far.
I reproduced this behavior with Bitwarden in Firefox, so I believe the analysis above is correct and the use of iframe in Ghost’s sign-in forms has the unintended side effect of preventing autofill from any phishing-aware password manager.
It looks to me like iframe was introduced to the Ghost Portal package 3 years ago by @rishabhgrg in this commit and was likely based on react-frame-component. However, I’m not sure if the component author’s arguments for rendering to an iframe (”the main benefit is style encapsulation”) are relevant to Ghost’s sign-in forms, or that the benefits of iframe outweigh the drawback of preventing autofill.
Ideally someone with more React experience than myself (and perhaps @rishabhgrg if he reads this) could test or advise on whether (and exactly how) the iframe could be safely eliminated from the Portal’s rendering of the sign-in form.
Hey @nk9 👋 From the issue description it seems like you are talking about member login forms. What’s confusing here is that there’s no concept of a “password” for members - they login through magic links. Are you talking about only saving an email part in the password manager or is there’s something else missing?