content security policy blocking inline execution

Question

I am working on a project in Django, where I am using a javascript from an external payment provider. Upon calling their script, they will insert a payment form embedded in my page.

The documentation on how to integrate with their service is found here. Specifically I am following step 3 and 4.

A snippet of my html is as below. Upon calling my javascript the payment form from checkout.js will be rendered as an iframe in the checkout-container-div element

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

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

In my javascript, I first call my backend to get the paymentId. Then using the obtained paymentId, I am calling the external checkout.js with const checkout = new Dibs.Checkout(checkoutOptions); in order to render the payment form

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';
                  });
                }
            }
        })
    })

From Google Chrome's console I get the following error related to 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.

Also I see this error related to checkout.api.ts:126 POST

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

There are some other errors as well that I think is related to content being blocked. I have tried to add the below meta tag to the head in my html base template.

<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;">

Still I got the error 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.

Also I tried with 'unsafe-inline' keyword in the Content-Security-Policy meta tag, but still got the same error. I have read several places that CSP is blocking for inline code execution and now is really confused if the issue at all is related to inline code execution from the external javascript, or if this error is related to something else?

Have you tried adding the `unsafe-inline` keyword in the response header instead? Or better yet add the hash of the new script you are using in your CSP configuration? — Brian Destura, Jun 03 '21 at 05:11
Yes I have both tried the adding the'unsafe-inline' in the script-src and also tried by adding the 'sha256-1XgMsIi6szxMi7JX5ZCg4KWReddGOu15C+cKuzlVaf4=' as stated in error message. Still I got the same error. What I don't get is why the content is still being blocked despite whitelisting it. I have verified that the sha256 stays consistently the same. — jxw, Jun 03 '21 at 05:46
that I haven't tried. What do you mean by adding it to response header? Sorry I am quite new in this area. — jxw, Jun 03 '21 at 05:53
In your view, if you are using render as response, you can do something like: https://stackoverflow.com/a/14956179/6759844. Or you can use a middleware to add this header to every response you have. See this for example: https://stackoverflow.com/a/36099405/6759844 — Brian Destura, Jun 03 '21 at 06:33
You would want something like `response['Content-Security-Policy'] = 'your policy'` — Brian Destura, Jun 03 '21 at 06:34

score 0 · Answer 1 · answered Jun 05 '21 at 19:18

The solution to this problem on integration of NETS payment service when running in Django turned out not to be fully related to content security protocol. The error I posed originally is related to CSP, but I never managed to solve it. When I used the payment demo webshop I see the same error on my browser as during my own test. The checkout was successful, therefore I figured out that the error is not only related to CSP. It turned out that adding

django_referrer_policy.middleware.ReferrerPolicyMiddleware'

to the middleware in my settings.py and followed by adding

REFERRER_POLICY = 'strict-origin'

in settings.py solved the problem.

content security policy blocking inline execution

1 Answers1