Attribute validation can break the app if plugins have mutated the DOM

[joshduck]

Inside _passAttributesAsProps() there is a check to ensure that the DOM node that is being updated does not have style, class or key attributes. This code will throw if any of these attributes are found.

This assumes that the application is the only code that is writing to the DOM. In practice, many browser extensions will also mutate the DOM. This will cause angular-react to throw and break the application.

This check should be, at most, a warning in production code.

Test case

Run this code in console.

Array.from(document.querySelectorAll('body *')).forEach(n => n.setAttribute('style', n.getAttribute('style') || 'zoom: 1'))

The next time that the Angular component is re-rendered, it will throw and break the application.

[joshduck]

The extension "#1 Web & PDF Highlighter - LINER" for Chrome consistently crashes our application because it inserts style attributes into the DOM.