Question 239695 in Html Question posted in
Some basic documentation can be found here.

Html – Content-Security-Policy: The page’s settings blocked the loading of a resource at xyz.com (“default-src”) issue

I’m getting the following issue:

Content-Security-Policy: The page’s settings blocked the loading of a resource at blob:https://test.com/ff851-924-4522-8b74-f1d4f8c9f (“default-src”).

whenever I click Export button which exports user data in Mozilla Firefox browser. The file is also not getting downloaded.
The same is working fine in Google Chrome perfectly.

I tried including the following meta tag in html file but that doesn’t seem to fix the issue.

<meta http-equiv="Content-Security-Policy" content="img-src * 'self' blob:">

Any way to get around this issue?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding to @HalvorSakshaug 's answer, this issue was indeed caused due to the CSP configuration set in source, in my case Cloudfront. I modified it to allow blob and its working now.

    To create/update CSP in cloudfront,

    1. Cloudfront > Functions > Create function

    2. The handler can be defined as:

      function handler(event) {
 var response = event.response;
 var headers = response.headers;
 headers['content-security-policy'] = {
     value: "default-src 'unsafe-inline' blob: data: https://www.googletagmanager.com/ https://www.google-analytics.com/ https://fonts.googleapis.com/ https://cdnjs.cloudflare.com/ https://fonts.gstatic.com/; script-src 'unsafe-eval' 'unsafe-hashes' 'unsafe-inline' https://www.googletagmanager.com/ https://www.google-analytics.com/ https://fonts.googleapis.com/ https://cdnjs.cloudflare.com/ https://fonts.gstatic.com/ "
 };
 return response;}

    This can be used in configuration in behavior as:

    1. Distributions > DistrubtionID > default > Edit Behavior
    2. Function Associations > Viewer Response > Cloudfront Functions > function-name-created-earlier

  2. 0

    There is a content security policy set on your page, you can likely see it in the response headers. You need to identify where the policy is set and modify it to allow "blob:" in default-src or a more specific directive. Adding another policy in meta can only make the total policy stricter.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search