You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
simsim0709
pushed a commit
to simsim0709/vue-devtools
that referenced
this issue
May 7, 2019
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
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:
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.
The text was updated successfully, but these errors were encountered: