I am getting the following errors on production while it works fine locally. The point is that I am fetching pdf from the backend and displaying it inside the ponent with iframe. In the local it displays fine while after the deploying I faced to these issues...

Refused to frame 'blob:example/...' because it violates the following Content Security Policy directive: "default-src 'self' . Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

Not allowed to load local resource: blob:example

Here is my code:

 <iframe
          width="100%"
          height="100%"
          type="application/pdf"
          :src="file"
        />
    axios(`${apiURL}/pdf`, {
        method: 'GET',
        responseType: 'blob' //Force to receive data in a Blob Format
    })
    .then(response => {
    //Create a Blob from the PDF Stream
        const file = new Blob(
          [response.data], 
          {type: 'application/pdf'});
    //Build a URL from the file
         this.file = URL.createObjectURL(file);
    
    })
    .catch(error => {
        console.log(error);
    });

How can be this fixed?

I am getting the following errors on production while it works fine locally. The point is that I am fetching pdf from the backend and displaying it inside the ponent with iframe. In the local it displays fine while after the deploying I faced to these issues...

Refused to frame 'blob:example./...' because it violates the following Content Security Policy directive: "default-src 'self' https://www.googletagmanager. https://www.google-analytics.. Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

Not allowed to load local resource: blob:example.

Here is my code:

 <iframe
          width="100%"
          height="100%"
          type="application/pdf"
          :src="file"
        />
    axios(`${apiURL}/pdf`, {
        method: 'GET',
        responseType: 'blob' //Force to receive data in a Blob Format
    })
    .then(response => {
    //Create a Blob from the PDF Stream
        const file = new Blob(
          [response.data], 
          {type: 'application/pdf'});
    //Build a URL from the file
         this.file = URL.createObjectURL(file);
    
    })
    .catch(error => {
        console.log(error);
    });

How can be this fixed?

• javascript
• ecmascript-6
• blob
• ecmascript-5
• content-security-policy

• It looks like your production uses a setup with Content Security Policy not set properly. Provide more info what type of server to do use (Apache/NginX, do you use Docker, etc.). – 0leg Commented Oct 9, 2020 at 9:35
• This seems very familiar... so (again): why not set the PDF's url as frame src? – user5734311 Commented Oct 9, 2020 at 9:36
• @ChrisG what do you mean? It's displayed inside iframe. I am not sure if I understand what you mean. – NewTech Lover Commented Oct 9, 2020 at 9:38
• Why go through all the axios/Blob trouble when you can simply do this: jsfiddle/obqph8m1 – user5734311 Commented Oct 9, 2020 at 9:48
• Because I am getting pdf from api in different unreadable format so it should be converted into file. – NewTech Lover Commented Oct 9, 2020 at 9:51

2 Answers 2

URL.createObjectURL(file) creates a blob:-url, so you need to allow blob: source in you CSP. At least:

default-src 'self' blob: https://www.googletagmanager. https://www.google-analytics.

But there is an additional notes:

To place all sources into default-src is a bad practice. It reduces CSP efficiency and sooner or later you will step on Firefox's bugs due a fallback to default-src. Therefore much better to use:

default-src 'self' https://www.googletagmanager. https://www.google-analytics.;
frame-src 'self' blob:;

As I can see, you use Google Tag Manager(GTM) and Google Analytics(GA). GTM requires much more sources to be allowed, GA - too.

If you'll put all these sources into default-src - you'll have a trouble to manage it. GTM is used to connect other scripts - you will have a lot of sources mixed in default-src.

You can find a full info on CSP here (including possible fixes):

https://developer.mozilla/en-US/docs/Web/HTTP/CSP

You might need to talk to the people responding for the back-end (your pany engineers or service provider) to setup up the server properly

If you need a quick fix in the meantime, you can try to use a browser extension to ignore it (e.g. something like https://chrome.google./webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden?hl=en).