当我尝试通过chrome://extensions/在Chrome浏览器中测试我的web extension时，我在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"
}
}
2条答案
按热度按时间pod7payv1#
您的index.html的 meta标记中CSP的script-src指令与错误消息中给出的指令不匹配。这意味着定义了多个CSP，并且所有内容都需要通过所有策略。
首先查看响应头，以查看其中设置了哪些CSP。如果它们是由你控制的东西设置的，你应该修改script-src以允许js.stripe.com。如果它们是由其他人设置的，您唯一的选择可能是通过代理请求来删除它。
fv2wmkja2#
您需要修改您现有manifest.json文件中的json属性web_accessible_resources
就像下面这样：
并且还需要从 meta标记中删除'unsafe-inline'和'unsafe-eval'值
像下面这样修改的 meta标签：