I am trying to make a browser plug in to help people raise their first 100 dollars…
First step is learning CSP/XSS rules.
In popup.html of my extension, I have the following code (shown as a codepen). It works fine on codepen. Please ignore the content and non-existent CSS. I’m just trying to understand CSP/XSS and serve JSON right now.
When I load it as a chrome extension, it throws the following 2 errors.
Error 1
*Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-t9x16ybitvfMpz2zRZeveKOH8T7lMdnEBeatE8k59sE='), or a nonce ('nonce-...') is required to enable inline execution.*
Error 2
*Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.*
I need to whitelist all external content, either in my manifest.json file, or at the top of my html.
I added this at the top of my html.
<meta http-equiv="Content-Security-Policy" content="default-src *;">
Another, more inclusive but hacky option is here:
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
Onload, chrome returns this:
The Content Security Policy ‘default-src *;’ was delivered via a element outside the document’s , which is disallowed. The policy has been ignored.
~O~
I checked this question.
~O~
What’s the best way to whitelist all external content in a plugin? I want to load JSON, and maybe an iframe.
Can I do it by inserting the right meta tags at the top of my html?
Is it possible to do it in the HTML only, without altering the manifest file? I want to make it as easy as possible for non-tech users to understand and clone.