Bitwarden can't handle ShadowDOM

[quthla]

It won't find the login fields. 1Password supports this already in beta and Bitwarden should adapt to it too.

You can use this site for testing: https://vaadin.com/

[kspearrin]

Seems to work fine with autofilling for me

[quthla]

In Chrome? Or FF?

[kspearrin]

I tried Firefox.

[quthla]

Oh probably version 61. You must manually enable custom elements and shadow dom there in about:config or else it will be polyfilled and work as usual. It will be activated in 63 by default

[kspearrin]

Not sure I understand the issue.

[quthla]

Navigate to about:config in Firefox.

Enable dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled

In Chrome this is enabled by default already so maybe you can test there

[kspearrin]

I can see the issue in Chrome. Thanks.

I don't really know much about shadow dom or why this would be occurring. Any ideas?

[quthla]

I'm not sure what the best practice is but you could maybe check 1Password code to see how they do it.

https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot

This will get you all the child nodes of that element which might contain other shadow dom nodes so maybe you need to traverse through every single node.

[fouram]

Hi, is this issue getting any attention? This is still a problem for I'd assume many applications. HomeAssistant and Firefox Sync logins are two examples I can think of right off the top of my head, but any application that uses Shadow DOM with login fields could be affected. Now that all major browsers have implemented it, it's becoming more and more popular.

[lightmaster]

Is this an issue with Bitwarden or the websites in particular? The example website https://vaadin.com/ in the OP does let me autofill, but Home Assistant login page does not let me autofill.

[hukoeth]

Home Assistant login doesn't work for me either. If you inspect the Home Assitant login page you can see that it uses ShadowDOM as well.

[sorryusernameisalreadytaken]

I ca confirm HomeAssistant Login-Page. Any plans for this?

[hukoeth]

I looked a bit closer at Home Assistant and I think for this particular login page it needs to be solved by the home assistant team.
There are several topics open for this:
https://community.home-assistant.io/search?q=password%20manager%20category%3A13

[lordgoata]

And the Home Assistant team says its needs to be fixed by the password managers...

home-assistant/frontend#1622 (comment)

shrug

[lukenorman]

We are seeing issues with bitwarden and our product. Login is a component, bitwarden isn't handling forms in the shadowDOM properly.

[ilium007]

Its not just BitWarden. Still can't fill auth page 3 years later.

[rgarrigue]

Go the issue with my bank's login page https://mon.cmso.com/auth/login, login & password input are under #shadow-root.

[BenjaminMaxdoro]

We enabled ShadowDOM for out web app and now the auto fill isn't working anymore. Still an issue.

[bitwarden-bot]

Hi @quthla,
We're cleaning up our repositories in preparation for a major reorganization. Issues from last year will be marked as stale and closed after two weeks. If you still need help, comment to let us know and we'll look into it.
Thanks!

[ilium007]

I’d say this is still a major problem

[lukenorman]

This is still an issue for Bitwarden users who access our products, we have workarounds in place specifically for Bitwarden

[rgarrigue]

Still have the issue.

I wish like there's Ctrl Shift L for autofill there was a shortcut to copy password (and one for user maybe). Since my bank like most website remember my username, I could shortcut + Ctrl V, would be good enough.

[murilosr]

I'm having the same issue in Chrome too:

Google Chrome - Version 105.0.5195.125 (Official Build) (64-bit) at PopOS 22 (Linux)
Bitwarden v2022.9.1

The url is public and can be tested:
https://login.clear.com.br/

It doesn't fill the username and password and also doesn't accept custom field. When I try to copy the field name, this string is copied:

Unable to identify a valid form element. Try inspecting the HTML instead.

[larena1]

#2283

There's a PR aimed towards fixing this issue. Can that be merged in case it works? Was created in January but stale since then despite it being a relatively simple fix.

@eliykat @Hinton @coltonhurst @shane-melton

[eliykat]

@larena1 I'll be reviewing that PR in the current sprint (next couple of weeks).

[larena1]

@eliykat is there a problem with the PR? It's nearly been two months when you told us a few weeks

[chadm-sq]

@eliykat #2283 is my PR, and I think I found it doesn't work, or doesn't always work. I think the idea of recursive search is right, but perhaps this try is wrong.

[chadm-sq]

@murilosr

Unable to identify a valid form element. Try inspecting the HTML instead.

This is a distinct, different bug. Please file that as a separate ticket.

[larena1]

1Password implemented it years ago. Maybe worth looking how they did it?

[chadm-sq]

@larena1 , careful, you and others. Looking at a different copyrighted implementation would/may poison you for direct contributions on the matter, outside of very general descriptions.

[larena1]

In the end, there are most likely not too many ways to implement this anyway and reverse engineering is a common practice also when it comes to proprietary drivers (Nouveau, Panfrost) and stuff and is not forbidden either.

And by looking obviously I didn't mean just copying what they did but rather get some ideas how it can be done and maybe it'll even shed some light on why your implementation isn't always working.

I didn't test your code but recursively getting all nodes seems like a good approach. Any idea in which cases exactly it would fail and why?

[larena1]

https://gist.github.com/heyMP/8ef3912847dcc93304652a412981caca

Maybe this could also be of help?

[eliykat]

Sorry for the lack of communication on this one, I've been busy with other initiatives and admit I lost track of time. I'll bump it up my list.

The approach in #2283 makes sense in principle, but unfortunately we don't have any automated testing in this area to verify. I need to take a closer look at it myself and do some manual testing.

@chadm-sq:

@eliykat #2283 is my PR, and I think I found it doesn't work, or doesn't always work. I think the idea of recursive search is right, but perhaps this try is wrong.

Does it work consistently for a particular website, but not all websites (that use ShadowDOM)? Or does it work inconsistently when repeatedly testing it on one website?

What site(s) are you testing it on?

Any idea why it's failing?

[chadm-sq]

I don't know any of that, @eliykat. If I were testing or debugging now, I would have just fixed it. It's been months since then.

I gave it an hour. I found there was more to it. I left it to those who don't loathe javascript.

[larena1]

@chadm-sq I can absolutely understand you. It's a pity that your PR hasn't been reviewed long ago. This issue was also opened more than 4 years ago and many people have commented since then but nothing ever happened. Unfortunately this goes for all the Bitwarden sub projects. You hardly get any response at all. Seems they rather focus on enterprise features and support and not proper core functionality.

Nice job anyway, Chad!

[chadm-sq]

@larena1, thanks for giving this your attention. It sounds like the test suite needs test data. You can do something useful by preparing a few test files that exercise this problem, so they can be added to the test suite. I think the three kinds are

• an open shadow root with a form within, inside a normal html doc,
• a closed shadow root with a form within, inside a normal html doc, and
• a form within an open shadow root within a open shadow root within a normal document.

[larena1]

@chadm-sq you seem to know more about this than I do so it'd be great if you could compile the tests and maybe report to @eliykat what works and what still needs to be looked at.

[RafaelKr]

I worked on autofill to also traverse into open and closed ShadowRoots. See #4119

CC @chadm-sq @larena1 @eliykat

I built a little PoC (proof-of-concept) which finds elements in the ShadowDOM. Didn't get it to a working implementation, but should be usable as a base.
See #2283 (comment) and #2283 (comment) and RafaelKr@8528a74

[eliykat]

I've reviewed both #2283 and #4119, thanks again to the contributors. Let's continue the conversation on those PRs.

[eliykat]

#4119 has been merged and this issue will be fixed in the March release.