In my extension I want to use my own WebAssembly module.
After loading my module (to background.html, or popup.html), I catch the compile error:
CompileError: WebAssembly.compile(): Wasm code generation disallowed by embedder.
Are wasm modules not supported in Chrome Extensions?
It seems from this issue that Chrome requires script-src: 'unsafe-eval' CSP directive be active for WebAssembly compilation. See this discussion as to why this is the case, at least for now.
Chrome Extensions come with default restrictions on CSP; that includes not allowing unsafe-eval. Some of the restrictions cannot be lifted; in this case, you can allow unsafe-eval by adding a manifest key:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
This should be enough to test if Wasm works in extensions. But heed this warning from documentation:
However, we strongly recommend against doing this. These functions are notorious XSS attack vectors.
Instead of allowing unsafe-eval for your whole extension, you can sandbox code that requires it, using the following approach from the docs:
Using eval in Chrome Extensions. Safely.
The gist of it is to create a separate page in your extension, where unsafe-eval is allowed but Chrome API access is disallowed; you then embed this page in your extension and communicate with it using postMessage().
Chrome implemented special policy 'wasm-eval' exclusively for apps and extensions to resolve this problem. It is chrome-specific, but slowly moving into CSP and WebAssembly standards. Just replace 'unsafe-eval' with 'wasm-eval' in #Xan's solution.
Note though, this is still an attack vector and it's your responsibility to verify the source of executed assembly. See for example uBlock's author thoughts on this policy.
I tried the 'unsafe-eval' and 'wasm-eval' provided by the other answers here but it didn't fix it. Turned out it's specific to the website. If I try it on Github, it doesn't work. But on reddit.com it works. Below is the error I'm seeing in Chrome developer mode. This is for Chrome extension made using Blazor NET6 with AOT. Hopefully someone finds this useful.
CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder
window.Module.s.printErr # blazor.webassembly.js:1
(anonymous) # blazor.webassembly.js:1
async function (async)
(anonymous) # blazor.webassembly.js:1
window.Module.s.instantiateWasm # blazor.webassembly.js:1
createWasm # dotnet.6.0.0.cnc7cl383g.js:1
(anonymous) # dotnet.6.0.0.cnc7cl383g.js:1
blazor.webassembly.js:1 Uncaught (in promise) CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder
at blazor.webassembly.js:1
at async blazor.webassembly.js:1
I tried it in typo-script on a TYPO3-system and 'unsafe-eval' or 'wasm-eval' won't work. :-(
I defined it in the .htaccess and it works. :-)
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin {linkToDomain}
Header set Access-Control-Allow-Credentials true
Header set Content-Security-Policy "default-src 'self' blob: 'unsafe-eval' 'wasm-eval' {other code ...} ; {other code ...} script-src 'self' 'unsafe-eval' 'wasm-eval' {other code ...}; object-src 'self' 'wasm-eval';{other code ...}"
</IfModule>
P.S. Safari makes problems. After adding a site.manifest, extending the Content-Security-policy for default-src in TypoScript od TYPO3 and .htaccess it seems to work. (see above)
It seems to me, that every browser works different.
Related
I'm developing a Chrome extension in MV3. I need to integrate Stripe with this extension. This extension overrides the new tab. And I'm using ReactJs and Webpack.
NPM Package using: React Stripe.js
Right now I'm getting
stripe.esm.js:30 Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I've tried adding
"content_security_policy": {
"extension_pages": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
}
in manifest.json but I get this.
What am I doing wrong? Is it not possible to use it like this in MV3?
Your help is appreciated.
Basically the simple and straight forward answer is that you cannot do your implementation this way. First “Remotely hosted code is no longer allowed; an extension can only execute JavaScript that is included within its package.” as per the chrome developer documentation [0].
Stripe has also addressed this issue in their GitHub which you can read more about here [1].
As for the best way to handle this situation is for your extension to generate a link to an external website that you would create. In there, you’d be able to create a CheckoutSession or even integrate with PaymentElements.
I hope this shed some light on how to move forward.
[0] https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#feature-summary
[1] https://github.com/stripe/stripe-js/issues/273
I've just updated the Content-Security-Policy settings in the Web.Config file and added the Application Insights JavaScript snippet in my _Layout.cshtml.
Here is what the Content-Security-Policy in the Web.config looks like.
script-src-elem
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
script-src
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
mymapjs.com is not longer working properly, my maps aren't showing up, and my browser is upset with me yelling at me in red letters with the error:
Access to XMLHttpRequest at 'mymapjs.com' from origin 'mywebsite.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
When I remove the https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js url from the Web.config Content-Security-Policy I get the warning:
Refused to load the script 'https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://*.mymapjs.com use.other.net use.other.net/ https://myfont.net/it.js
It turns out I enabled the enableCorsCorrelation = true in the Application Insights configuration.
So then I tried updating the correlationHeaderExcludedDomains values with a wild card value for the mymapjs.com.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
]
The wild card alone didn't work. I had to strictly type the JS libraries urls AND have the wildcard for it to work properly. It wants the scripts that are directly being requested from the _Layout.cshtml as well as the ones generated from the JS libraries.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
'https://mymapjs.com-core-events.js'
'https://mymapjs.com-services.js'
'https://mymapjs.com-ui-services.js'
]
If anyone else gets caught up figuring this out, I hope this helps.
I am trying to integrate Stripe but facing the following issues.
When I am loading normally via ngx-stripe, it's giving me this error in the console.
Refused to load the script 'https://js.stripe.com/v3/' because it
violates the following Content Security Policy directive: "script-src
'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.
I change content_security_policy in manifest to "script-src 'self' https://js.stripe.com/v3/; object-src 'self' " but it's giving me this error in the console.
Uncaught EvalError: Refused to evaluate a string as JavaScript because
'unsafe-eval' is not an allowed source of script in the following
Content Security Policy directive: "script-src 'self'
https://js.stripe.com/v3/".
After that, I tried adding content_scripts but it's giving me this error and don't let me to import the zip file as well while saying
Could not load javascript '' for content script.
How can I overcome this issue? and is it possible to integrate Stripe into a chrome extension because Stripe only works via https but extension working with chrome://
The answer provided by #EndersJeesh works for me with Chrome extensions with manifest version 2.
I was wondering whether it was going to stop working in manifest version 3:
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code
The Remotely Hosted Code says that you will not be able to load remote hosted code so I imagine that loading https://js.stripe.com/v3 will not be possible.
The best solution would be for all the Stripe code to be embedded in the extension but there's no npm package for this Stripe code.
Any comments from #EndersJeesh or others would be appreciated.
I ran into these and several subsequent issues integrating stripe into a chrome extension.
Explanation:
I'll first state what I believe was happening. Using the stripe react libraries, I believe they have an inline js call somewhere, causing the error you're seeing about js.stripe.com. I think this would be fixed by adding unsafe-inline into your content_security_policy, but that will not be executed by chrome extensions per the extension CSP.
Solutions:
So here are the various things I did (solving one typically led to having to solve the next set of errors).
I initially had my constent_security_policy set to
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self';"
I was running into your issue above, and so I added the script into my header call, leading my index.html file to be the following:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://js.stripe.com/v3" async></script>
</head>
<body>
<div id="modal-window"></div>
</body>
</html>
That resolved the first set of errors which matched yours above, but it led to the next set of issues:
I then hit a series of errors around Refused to frame ... because it violates the following Content Security Policy directive: "frame-src"..., so I fixed these by adding to my content_security_policy the following:
frame-src https://js.stripe.com/v3
So my final version of my content_security_policy is as follows:
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
I hope that does it for you. It took several hours to work through all of that for me.
I've tried all possible setups for the CSP settings in my manifest.json, this is my current (very open and unsafe, I know).
When I open the background inspect for the extension, the first time after reloading it's fine, sometimes up until the fifth time, and then all of a sudden the errors below start pouring in..
"content_security_policy": "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';"
And still I'm getting the following error
Refused to load the script 'https://myapp-12345.firebaseio.com/.lp?start=t&ser=1234567&cb=15&v=5' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
What I've tried
Removing the chrome extension when I change the manifest.json
Is there anything I'm missing?
You can only relax CSP in Chrome extensions to a certain extent
"content_security_policy" entry in Chrome Extension manifest allows developers to relax the CSP to a certain extent only. The subset of values allowed for style-src is very limited, quote from the official documentation:
Currently, developers can allowlist origins with the following
schemes: blob, filesystem, https, and chrome-extension. The host part
of the origin must explicitly be specified for the https and
chrome-extension schemes. Generic wildcards such as https:, https://*
and https://*.com are not allowed; ...
Many of the values specified in your CSP (eg. * and 'unsafe-inline' for script-src) are not valid in "content_security_policy" and Chrome ignores them (with a warning) when parsing manifest.json.
Why you don't see warnings or errors about the invalid CSP values
I suspect that you might be checking errors in JavaScript console of the background page. You need to check the errors and warnings generated for your manifest.json first. Go to chrome://extensions/ and click on the Errors button for your extension. There will be several warnings such as this:
content_security_policy': Ignored insecure CSP value "*" in directive
'script-src'.
Edit:
I just noticed that the Errors page (chrome://extensions/?errors=<extension-id>) behaves inconsistently. There seems to be a bug that causes the warnings about ignored CSP values to only show up after reloading the extension.
Links to documentation:
"content_security_policy" in Chrome
"content_security_policy" in Firefox
(The specification is basically identical but I find the documentation on MDN nicer and easier to follow.)
I'm trying to use MathJax as part of our web application which uses pretty strict Content Security Policy (CSP). The problem is that MathJax is coded to use eval() [to be exact, in form of Function()] which is not considered safe by default by CSP.
I'm using following CSP header currently:
X-Content-Security-Policy: allow 'self'; img-src *; media-src *; frame-src *; font-src *; frame-ancestors 'none'; style-src *; report-uri '/:save-csp-violation';
Which causes MathJax 2.0 code to fail because it uses Function(). I tried to allow unsafe-eval (i.e. Function()) only for MathJax located within the same origin below path /:static/math/. To do that, I tried to add
unsafe-eval '/:static/math/*'
to make the full header look like
X-Content-Security-Policy: allow 'self'; img-src *; media-src *; frame-src *; font-src *; frame-ancestors 'none'; style-src *; report-uri '/:save-csp-violation'; unsafe-eval '/:static/math/*'
but I still cannot Firefox 13.0 to run the code. I'm getting an error message to Firefox Web Console (located in Tools - Web Developer):
[10:09:59.072] call to Function() blocked by CSP # http://localhost:8080/:static/math/2.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML:29
However, I'm not getting a CSP report to the 'report-uri'. (As you see, I'm currently running the test through custom localhost port without SSL, in case that makes a difference. The colon before static is not a typo, I'm reserving all path parts starting with a colon for internal use of the application, all user content may freely define other URLs.)
Is my use of unsafe-eval attribute incorrect or is it impossible to allow unsafe-eval only for subset of 'self'? The intent is to allow unsafe-eval only for same origin path prefix /:static/math, strict CSP JS code execution for 'self' and no JS code for any other method.
There're multiple issues:
The Content-Security-Policy (CSP) header does not work this way. CSP only has granularity of a single host+port combination (origin). If you cannot allow all scripts to have unsafe-eval, no script can have it. The only possible workaround is to not use a script that requires unsafe-eval (fortunately, MathJax no longer requires unsafe-eval since MathJax bug 256 was fixed).
The allow syntax is an old Mozilla variant and should not be used. The current syntax is to say default-src followed by scheme or host names or origins that are allowed as source of everything and then override the default value for each sub type (e.g. script-src) as needed. Some sources may support additional source keywords in addition to self. For example, the script-src supports unsafe-eval which means that any script that is otherwise allowed to execute is allowed to run eval() or Function(), and unsafe-inline meaning that any piece of markup that can support some kind of inline script is allowed to execute. Allowing unsafe-eval may be acceptable but unsafe-inline is pretty much no-go with script-src (otherwise, you should not bother with the CSP at all).
The correct syntax for script-src as follows:
script-src 'self' cdnjs.cloudflare.com
combined with loading MathJax from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js
MathJax also uses inline style attributes so following is needed (unless already allowed) or MathJax will raise Exception while trying to render the math:
style-src 'self' 'unsafe-inline'
It is not possible to use CSP to allow JS to insert style attributes and not have style attributes already inserted in the HTML source to have an effect.
It seems that Firefox 13.0 (at least) does not immediately "call home" in case of CSP violation. Most of the violation reports do get submitted some time after the event. Chrome seems to be much more aggressive with the report submission which will make it a bit easier to test. From my experience, Firefox does not always send CSP report at all - it may be using some kind of heuristic to not send repeated messages.
In the end, to make MathJax work with Content-Security-Protection, you need following headers (assuming you're using MathJax via CDNJS):
Content-Security-Policy: default-src 'self'; script-src 'self' cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';
Older browsers (e.g. Firefox 13) used to require extra parameters such as options or required using non-standard headere name such as X-Content-Security-Policy or X-WebKit-CSP. These hacks are no longer required because user agents support standard header nowadays. (With the exception of MSIE in contrary to MS Edge.)
Year 2021 Update:
CSP version 2 allows specifying paths in origins, too. However, be warned that using paths is a breaking change where backwards compatibility is a bit unknown. The problematic part is that server needs to emit CSP header before it knows if user agent supports CSP1 or CSP2.