Bug: Throws an error on particular sites: TypeError: Cannot use 'in' operator to search for 'animation' in undefined

[lmk123]

React version: 18.2.0

I have developed a browser extension where I inject React into the website to build the interface. Recently, I have received feedback from users that my application is reporting an error on this website (https://user-images.githubusercontent.com/16556693/236126882-007c76ae-f976-49d9-940e-12252707f740.svg):

TypeError: Cannot use 'in' operator to search for 'animation' in undefined
    in getVendorPrefixedEventName(eventName)

I then discovered that this error was caused by React.

This site uses a strict CSP to restrict external code, resulting in the value of the following code in React becoming undefined:

https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/events/getVendorPrefixedEventName.js#L51

style = document.createElement('div').style

After this, the code here uses the in operator for style, causing this error:

https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/events/getVendorPrefixedEventName.js#L85

if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {

Steps To Reproduce

1. open https://user-images.githubusercontent.com/16556693/236126882-007c76ae-f976-49d9-940e-12252707f740.svg
2. run document.createElement('div').style in console

Link to code example:

The current behavior

The value of style = document.createElement('div').style is undefined, causing React to report this error later in the styleProp in style code.

The expected behavior

Do not report errors

[gaearon]

Can you do this check yourself before injecting React? I'm not sure I understand why it's reasonable to expect React to run in an environment where it has no access to inline styles (since it would also try to set them later when rendering actual elements). I might be misunderstanding CSP though — I don't have any knowledge in that area. Can you explain more?

[lmk123]

This scenario is a bit complicated because of the browser extensions involved, but I'll do my best to explain it.

Imagine that if I want to develop a browser extension that allows users to take screenshots of web pages, I need to inject JavaScript code (called Content scripts for browser extensions) into the target web page, and the content script will contain React, which I use to build the user interface (pickboxes, buttons, etc.)

As I explained earlier, the React DOM gets the CSSStyleDeclaration object via document.createElement('div').style, which works in most sites, but I found that in some sites the style obtained this way is undefined.

You can run document.createElement('div').style in the console of this site and you'll see that the value is undefined.

I guess this is because the site uses a very strict CSP:

Content Security Policy: default-src 'none'; script-src 'none'; img-src 'self'; media-src 'self'; sandbox.

Although the CSP rules on this site prohibit the execution of code, the content script is very specific and it still works fine in this case, as well as setting inline styles properly. However, this site's CSP causes the value of document.createElement('div').style to become undefined, which causes React to report an error.

In other words, React should work fine in this scenario, but now it throws an error.

I also found that although document.createElement('div').style is undefined on this site, document.documentElement.style is able to get the CSSStyleDeclaration object normally, so the React DOM should just replace style = document.createElement('div').style with style = document.documentElement.style and it will work fine in this scenario.

[lmk123]

To summarise:

The React DOM's existing way of getting a CSSStyleDeclaration object will get undefined in some sites (presumably because they use CSP), which will cause React DOM to throw errors, but by replacing the way of getting a CSSStyleDeclaration object with document.documentElement.style will solve this problem.

[sophiebits]

This isn't because of CSP. It's because the document is SVG rather than HTML. You can see that document.documentElement.namespaceURI is 'http://www.w3.org/2000/svg'. I don't believe we support rendering into a non-HTML document so I am inclined to close this as wontfix.

[naamhaiabdullah]

I have been getting the same error for almost a year on my Chrome extension.
I solved this by replacing: document.createElement("div").style with document.createElement("div").style || {} in the react-dom library and wrapping React Render inside

if (document.documentElement.namespaceURI === 'http://www.w3.org/1999/xhtml') {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}