内容安全策略阻止内联执行答案

【问题标题】：content security policy blocking inline execution内容安全策略阻止内联执行
【发布时间】：2021-08-21 01:21:22
【问题描述】：

我正在 Django 中开发一个项目，我正在使用来自外部支付提供商的 javascript。在调用他们的脚本后，他们会在我的页面中插入一个付款表单。

有关如何与其服务集成的文档位于here。具体来说，我正在执行第 3 步和第 4 步。

我的 html 的 sn-p 如下。在调用我的 javascript 时，来自 checkout.js 的付款表单将呈现为 checkout-container-div 元素中的 iframe

<div id="checkout-container-div"> </div>   

<script src="https://test.checkout.dibspayment.eu/v1/checkout.js?v=1"></script>

在我的 javascript 中，我首先调用我的后端来获取 paymentId。然后使用获得的paymentId，我用const checkout = new Dibs.Checkout(checkoutOptions);调用外部checkout.js以呈现付款表单

document.getElementById("paymentButton").addEventListener("click", function() {
    //Collect all the fields value and send it to the server
    console.log("pay button clicked")
    $.ajax({
        url : "localDeliveryPayment",
        type : "get",

        success: function(response) {
            
            if (response['paymentIdCreation'] == true) {
                console.log(response);
                const checkoutOptions = {
                    checkoutKey: response['checkoutKey'], // Replace!
                    paymentId: response['paymentId'],
                    containerId: "checkout-container-div",
                  };
                  const checkout = new Dibs.Checkout(checkoutOptions);
                  
                  checkout.on('payment-completed', function (response) {
                    window.location = 'completed.html';
                  });
                }
            }
        })
    })

在 Google Chrome 的控制台中，我收到以下与 test.checkout.dibspayment.eu/:1 相关的错误

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-NzNw/hrx7wC5UKemwLm4mwVnoDVfHDuSpmZAeKCQaqY=' 'sha256-aKaLBqGLMQ35mP/i/QmpW+s6QnrN3dNb78G9ndv1bC0=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='". Either the 'unsafe-inline' keyword, a hash ('sha256-1XgMsIi6szxMi7JX5ZCg4KWReddGOu15C+cKuzlVaf4='), or a nonce ('nonce-...') is required to enable inline execution.

我还看到这个与 checkout.api.ts:126 POST 相关的错误

POST https://test.checkout.dibspayment.eu/api/v1/frontendlogs net::ERR_ABORTED 401 (Unauthorized)

我认为还有一些其他错误与内容被阻止有关。我试图将以下元标记添加到我的 html 基本模板的头部。

<meta http-equiv="Content-Security-Policy"
    content = "script-src 'self' 
    cdnjs.cloudflare.com 
    code.jquery.com 
    cdn.jsdelivr.net
    stackpath.bootstrapcdn.com
    test.checkout.dibspayment.eu;">

我仍然收到错误 test.checkout.dibspayment.eu/:1

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-NzNw/hrx7wC5UKemwLm4mwVnoDVfHDuSpmZAeKCQaqY=' 'sha256-aKaLBqGLMQ35mP/i/QmpW+s6QnrN3dNb78G9ndv1bC0=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='". Either the 'unsafe-inline' keyword, a hash ('sha256-1XgMsIi6szxMi7JX5ZCg4KWReddGOu15C+cKuzlVaf4='), or a nonce ('nonce-...') is required to enable inline execution.

我还尝试在 Content-Security-Policy 元标记中使用 'unsafe-inline' 关键字，但仍然遇到相同的错误。我已经阅读了几个 CSP 阻止内联代码执行的地方，现在我真的很困惑，如果这个问题与外部 javascript 的内联代码执行有关，或者这个错误与其他什么有关？

【问题讨论】：

您是否尝试在响应标头中添加 unsafe-inline 关键字？或者更好地添加您在 CSP 配置中使用的新脚本的哈希？
是的，我已经尝试在 script-src 中添加“unsafe-inline”，还尝试通过添加“sha256-1XgMsIi6szxMi7JX5ZCg4KWReddGOu15C+cKuzlVaf4=”，如错误消息中所述。我仍然遇到同样的错误。我不明白为什么尽管将其列入白名单，但内容仍被阻止。我已验证 sha256 始终保持不变。
试试在响应头中添加怎么样？
我没试过。将其添加到响应标头是什么意思？对不起，我在这方面很新。
在您看来，如果您使用渲染作为响应，您可以执行以下操作：stackoverflow.com/a/14956179/6759844。或者您可以使用中间件将此标头添加到您拥有的每个响应中。例如：stackoverflow.com/a/36099405/6759844

标签： javascript node.js django content-security-policy

【解决方案1】：

在 Django 中运行时集成 NETS 支付服务的问题的解决方案与内容安全协议并不完全相关。我最初提出的错误与 CSP 有关，但我从未设法解决它。当我使用付款demo webshop 时，我在浏览器上看到与我自己测试时相同的错误。结帐成功，因此我发现该错误不仅与 CSP 有关。原来加了

django_referrer_policy.middleware.ReferrerPolicyMiddleware'

到我的 settings.py 中的中间件，然后添加

REFERRER_POLICY = 'strict-origin'

在 settings.py 中解决了这个问题。

【讨论】：