Firefox Extension - Uncaught Error: Permission denied to access property

[ozzie-eu]

Steps To Reproduce

1. Go to 'Booking.com login page'
2. Click on 'Email Adress' and try to choose the saved login from Bitwarden.

Expected Result

The Email address field should be automatically filled in with the saved username.

Actual Result

The field remains blank. Using the browser's developer tools, there is the following error on the console:

Uncaught Error: Permission denied to access property "__reactInternalInstance$1g307bn3p6i"
    Pn https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    extractEvents https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    dt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    L https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    H https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Yt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Xt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    unstable_runWithPriority https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Kt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
45_de7f4b7ce86eab041180.js:2:215791
    Pn https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    extractEvents https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    dt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    L https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    H https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Yt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Xt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    unstable_runWithPriority https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Kt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2

Uncaught Error: Permission denied to access property "correspondingUseElement"
    at https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Yt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Xt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    unstable_runWithPriority https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
    Kt https://cf.bstatic.com/psb/accountsportal/assets/45_de7f4b7ce86eab041180.js:2
2 45_de7f4b7ce86eab041180.js:2:204656

Screenshots or Videos

booking.com-bitwarden-issue.mp4

Additional Context

The site works fine with the same version of the Bitwarden extension running on Google Chrome.

Operating System

Windows

Operating System Version

11

Web Browser

Firefox

Browser Version

122.0.1

Build Version

2024.1.1

Issue Tracking Info

• I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[cagonzalezcs]

Took a look into this a bit, and was able to replicate the issue.

So this problem exists for a couple of reasons, it's due to a combination between our usage of custom web components in the inline menu, incompatibilities that Firefox has with custom web components within extension content scripts, and the implementation details of account.booking.com.

The inline menu uses custom web components to impede programmatic access to the content within the inline menu. We use a polyfill that facilitates this behavior within a content script context, as browser support in this regard is still catching up to the official spec. In Chromium browsers and Safari, we don't seem to have any issues with accessing properties of these custom web components. Firefox on the other hand throws a 'Permission Denied' error anytime a property is accessed on a web component created within a content script.

So with that said, account.booking.com seems to be using a cookie consent plugin called One Trust. This plugin sets up a mutation observer that is attempting to access the nodeType property of our inline menu as it gets injected into the page. Since Firefox throws an error when accessing this property, it seems that some side effect related to the One Trust plugin completely locks up the input element on the page.

At the moment I'm not sure what we can do to resolve this issue directly. We'll add this to our backlog to see if we can find some kind of solution, but finding a resolution to this from our side might be challenging. Beyond that, either Booking.com has to resolve how they handle this kind of error on their website or Mozilla has to resolve the bugs that Firefox experiences with web components.

For now, I'd recommend you use other means for autofilling the credentials on this website. It seems that either using the keyboard shortcut, context menu, or the popup to autofill works as expected. This is due to the fact that we do not inject any custom web components into the page, which avoids introducing the side effect behavior from the One Trust plugin.

[ozzie-eu]

I was not aware of the context menu option. It works as expected. So this bug might be something to be addressed by Mozilla.

[cdonovan]

Hey @cagonzalezcs, could this possibly be re-opened? The issue occurs for seemingly all React apps (at least as of v18). React's mouse/pointer event listeners throw this error when interacting with the inline autofill due to Firefox's noted web component issues. Ideally, Firefox's bugs should be fixed, but I would think that the React ecosystem is large enough to warrant a fix/workaround on Bitwarden's side in lieu of Firefox fixing it upstream.

See https://codepen.io/breakthestatic/pen/oNOLRqd for a simple React demo exhibiting the issue.

[cagonzalezcs]

@cdonovan This issue is open, but not within this ticket - #8063

With that said, the only way that I see our team addressing this is by making the decision to remove custom elements within the inline menu. We use custom elements and a closed ShadowDOM to impede programmatic access to the UI elements that render the inline menu.

I can bring up that consideration with Bitwarden's leadership, but I'm fairly certain that there will be resistance towards moving the implementation towards a less secure approach.

Please feel free to comment on the other thread with ideas for how this might be worked around though. I left that thread open to facilitate discussion, as I was aware that we would likely run into concerns for this again.

[hechtechic]

I have the exact same problem using Bitwarden on Chrome. I did not have the problem when I was using 1password on Chrome