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

时间:2021-06-02 21:10:31

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

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

有关如何与其服务集成的文档位于 here。具体来说,我遵循第 3 步和第 4 步。

我的 html 片段如下。调用我的 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,我使用 checkout.js 调用外部 const checkout = new Dibs.Checkout(checkoutOptions); 以呈现付款表单

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 执行内联代码有关,或者这个错误是否与其他事情有关?

1 个答案:

答案 0 :(得分:0)

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

django_referrer_policy.middleware.ReferrerPolicyMiddleware'   

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

REFERRER_POLICY = 'strict-origin'

在 settings.py 中解决了问题。