1

I recently added CSP header to my project. At the same time, I am also using PDFTron webviewer in my project. As you know, PDFTron webviewer is rendered in an iframe and after adding CSP headers, I'm getting below error - related frame-ancestors.

enter image description here

Question1 is how can I add a frame-ancestors header to the PDFtron webviewer to bypass this error?

Question2 is the second error related with cross domain is not fixable by adding my domains to configorigin.txt, is it related with the csp header setting?

Honey
  • 2,208
  • 11
  • 21

1 Answers1

2

To Question1: Just change frame-ancestors 'none' to the frame-ancestors 'self' (or to frame-ancestors localhost:* if in your particular browser the 'self' token does not cover a localhost:port_number) to allow embedding PDF webviewer.

To Question2: I think the second error is CSP-related (side effect of CSP blocking) because localhost should not be a cross-origin resource since main page is loaded with the same host name and port number http://localhost:3000.

granty
  • 7,234
  • 1
  • 14
  • 21
  • Hey, granty, thank you for the answer. Regarding the first question, I know I need to add `frame-ancestors` header to pdftron webviewer since it's embedded in an iframe, what I am asking is how / where can I add the header in the pdftron project. I tried to add it to the index.html as a meta tag, but it didn't work. – Honey Nov 04 '21 at 15:32
  • (1) `frame-ancestors` is not supported in meta tag, but only in HTTP header. (2) you have already publish CSP HTTP header since you see a blocking in the browser console. Check `next.config.js` file on `next-secure-headers`/`next-safe` packages presence or `headers()` function call - these can publich CSP header. You have to modify `frame-ancestors` there. – granty Nov 05 '21 at 05:18
  • My understanding is `frame-ancestors` header should be set inside the iframe, am I wrong? I tried to change the header value in next.config.js, but the result is the same "refused to frame localhost .... frame-ancestors: none" - means it's not working for iframe. – Honey Nov 05 '21 at 16:04
  • 2
    Yes, `frame-ancestors` header should be set inside the iframe. "*refused to frame localhost .... frame-ancestors: none*" means you did not change CSP header. After changing it should be `frame-ancestors 'self'` or `frame-ancestors localhost:*` in the violation message. – granty Nov 05 '21 at 16:39