如何解决“拒绝加载脚本，因为它违反了以下内容安全策略指令”问题？

问题描述 投票：0回答：3

当我尝试通过 

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"
  }
}
javascript html content-security-policy
3个回答
2
投票

index.html 的元标记中 CSP 的 script-src 指令与错误消息中给出的指令不匹配。这意味着定义了多个CSP，并且所有内容都需要通过所有策略。

首先查看响应标头，了解其中设置了哪些 CSP。如果它们是由您控制的内容设置的，您应该修改 script-src 以允许 js.stripe.com。如果它们是由其他人设置的，您唯一的选择可能是通过代理请求来删除它......

0
投票

您需要修改现有的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/;">

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
如果您使用任何 VPN 或任何 VPN 浏览器扩展程序，我也会遇到同样类型的问题，您可以卸载或暂停，然后自动解决此问题。

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.