Inline Styles cause Content Security Policy Violation #905
Description
Version
5.0.0-beta.4
Browser and OS info
Chrome 72 / macOS 10.14
Steps to reproduce
When the vue-devtools inspector is used on a website that has Content Security Policy deployed and the policy does not whiltelist inline styles using the insecure 'unsafe-inline' policy, the following error is logged in the console over and over:
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-BLZdMv2gh2vNZKxp7hehCQqh6sIu14k4XWIywP6 mJA='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
Note that the hint to whitelist a sha256 is misleading, since it won't work. Only inline <style> tags can use hashes, inline style attributes are not supported.
See https://bugs.chromium.org/p/chromium/issues/detail?id=546106 for details on the misleading error message.
What is expected?
Vue-devtools should work fine with CSP enabled.
What is actually happening?
Vue-devtools inspector styles are not applied due to the unnecessary usage of inline styles.
This problem can easily be fixed by converting the affected code to use the JavaScript DOM API to create DOM elements and set the styles using the style property of the element.
The current problem only exists because the extension uses html snippets with inline styles that are inserted as innerHTML.
I will work on a PR to fix this problem.