Chase website field detection no longer works

Kee browser extension
1

I’ve been sort of avoiding this for a while, Chase has been moving to a new page format that completely breaks Kee. It seems to make use of Shadow DOM and Kee just can’t see those elements, I’m guessing. The workaround used to be to go to the Business login, but they’ve moved that to the new style as well. I’ve tried all the usual tricks of including the form ID and field IDs, but Kee doesn’t see it at all. Not sure what to do – is there a functional workaround for this?

FireFox (128) + Kee (latest from extension site) + KeePass
Website: chase.com (secure.chase.com is the login page)

image

1 Like
2

I have been experiencing the same problem. I have also used the “Create new entry” from the Kee dropdown, but the generated entry is the same as the entry that I created manually and suffers the same problem.

1 Like
3

Same. Even KeePassHttp doesn’t work.

Interestingly, it works on the post-login page.

chase post-login
chase post-login939×676 40.8 KB

field
field887×630 166 KB

4

No shadow DOM on that post-login OTP screen. Guessing that’s why it works.

I know the Kee author is hard at work getting the Chrome extension finished to comply with the new Manifest V3 nonsense. But I hope this can be fixed eventually.

1 Like
5

Any chance of supporting the Shadow DOM? I’m increasingly seeing this in other sites for their authentication pages, for some reason.

1 Like
6

There have historically been limitations on what an extension can do with shadow DOM parts of the page, but I know at least some of those issues were considered browser bugs so hopefully it is now possible to get great support for these sorts of login forms across all browsers. I can’t remember now but I think open shadow DOMs might already be working but not closed ones? It’s quite possible that even the open ones aren’t always detectable though.

In any case, this topic is on my radar but I’m not sure when I’ll get a chance to look into it I’m afraid.

Maybe unrelated but I have seen a few sites which create forms in some way which doesn’t get detected by the DOM monitoring code in Kee. For those, switching away and back to the tab triggers a fresh scan for the form and it gets found correctly. Perhaps this workaround is worth a try if you haven’t already.

2 Likes
7

Kee relies on document.forms and their elements property. Chase’s Login page has only one form, and document.forms[0].elements does not contain the input element highlighted in the screenshot, since that element has not been attached to the form (via formAssociated), and does not get submitted with the form. Only a few hidden elements are part of the form (one is visible in the screenshot three lines from the bottom), which get populated as soon as you modify the visible fields. If you set the value of the hidden fields manually, the form doesn’t submit the correct data. You cannot prefill the form without dealing with the shadow root (which kee doesn’t do).

Kee would need to add a backup form and field detection method. That would work for Chase since the shadow roots are open. Something along these lines:

form = document.getElementsByTagName('form')[0]; // wrap into a loop for all forms
input_fields = [...form.getElementsByTagName('*')]
               .filter(el => el.shadowRoot)
               .reduce( (acc, el) => acc.concat( [...el.shadowRoot.querySelectorAll('input')] ), 
               [...form.getElementsByTagName('input')])

I suspect this is how 1Password built their bugfix. Once you have the input element, it’s a matter of setting the value and calling the input event. For Chase specifically, the following code can be used to set the password correctly:

el = document.getElementById('password').shadowRoot.getElementById('password-input');
el.value = '...';
el.dispatchEvent(new Event('input'));
3 Likes