当我尝试通过
web extension
在 Chrome 浏览器中测试我的 chrome://extensions/
时,我在 Chrome 浏览器控制台中看到此错误消息:
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.
下面是抛出上述错误信息的客户端js代码:
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);
以下是index.html代码
<!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>
以下是我的
manifest.json
文件:
{
"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"
}
}
index.html 的元标记中 CSP 的 script-src 指令与错误消息中给出的指令不匹配。这意味着定义了多个CSP,并且所有内容都需要通过所有策略。
首先查看响应标头,了解其中设置了哪些 CSP。如果它们是由您控制的内容设置的,您应该修改 script-src 以允许 js.stripe.com。如果它们是由其他人设置的,您唯一的选择可能是通过代理请求来删除它......
您需要修改现有的manifest.json文件中的json属性web_accessible_resources
像下面这样:
"web_accessible_resources": [
"https://js.stripe.com/v3/buy-button.js"
],
您还需要从元标记中删除 'unsafe-inline' 和 'unsafe-eval' 值
像下面修改的元标记一样:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://js.stripe.com https://js.stripe.com/v3/;">