When I try to test my web extension in my Chrome browser via chrome://extensions/ I see this error message in the Chrome browser console:
Refused to load the script 'https://js.stripe.com/v3/buy-button.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
The following is the client-side js code that throws the above error message:
const basicPlanButton = document.createElement('div');
basicPlanButton.classList.add('basicPlanButton');
basicPlanButton.id = 'basicPlanButton';
basicPlanButton.style.display = 'block';
basicPlanButton.style.justifyContent = 'center';
basicPlanButton.style.alignItems = 'center';
basicPlanButton.style.position = 'absolute';
basicPlanButton.style.zIndex = '9999';
basicPlanButton.style.cursor = 'pointer';
modal.prepend(basicPlanButton);
const stripeScript = document.createElement('script');
stripeScript.setAttribute('async', '');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/buy-button.js');
basicPlanButton.appendChild(stripeScript);
const stripeBuyButton = document.createElement('stripe-buy-button');
stripeBuyButton.setAttribute('buy-button-id', 'buy_btnXXXXXXXf');
stripeBuyButton.setAttribute('publishable-key', 'pk_test_51MyXXXXXXXX9x7SNN');
basicPlanButton.appendChild(stripeBuyButton);
Following is the index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QuickDic</title>
<script src="content.js"></script>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://js.stripe.com https://js.stripe.com/v3/;">
</head>
<body>
<script async
src="https://js.stripe.com/v3/buy-button.js">
</script>
<stripe-buy-button
buy-button-id="buy_btn_1NXXXXXXXXXXXXX"
publishable-key="pk_test_51XXXXXXXXXXXXXX">
</stripe-buy-button>
</body>
</html>
And following is my manifest.json file:
{
"manifest_version": 3,
"name": "Name AI",
"version": "1.0.0",
"permissions": [
"storage",
"http://localhost:5000/*",
"activeTab"
],
"host_permissions": [
"https://js.stripe.com/",
"https://js.stripe.com/v3/buy-button.js"
],
"web_accessible_resources": [
{
"resources": [ "image/*.gif", "image/*.png", "https://js.stripe.com/v3/buy-button.js"],
"matches": [ "<all_urls>" ]
}
],
"description": "Quickly Access AI",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"action": {
"default_popup": "index.html"
},
"icons": {
"48": "icon-48.png",
"128": "icon-128.png"
}
}
2
Answers
You need to modify your json property web_accessible_resources in your existing manifest.json file
Like this below :
and also you need to remove the ‘unsafe-inline‘ and ‘unsafe-eval‘ values from the meta tag
Like this below modified meta tag :
The script-src directive of the CSP in the meta tag in your index.html doesn’t match the one given in the error message. This means that there are multiple CSPs defined, and all content will need to pass all policies.
Start by looking at the response headers to see which CSPs are set there. If they are set by something you control you should modify script-src to allow js.stripe.com. If they are set by someone else your only option is likely to remove it by proxying the requests…