I get - Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive:

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
i use version 8.7.0.
In the developer tools first I get
GET http://localhost:9000/lib/ui/index.html 404 (Not Found) on line webviewer.min.js:1
and
Refused to load the script ‘http://localhost:65534/livereload.js?snipver=1’ because it violates the following Content Security Policy directive: “default-src ‘none’”. Note that ‘script-src-elem’ was not explicitly set, so ‘default-src’ is used as a fallback. on line

Detailed description of issue
When I call the component i get errors in the developers tool and also on the UI - Cannot GET /lib/ui/index.html

Expected behaviour
I expect the viewer to be initialized without any errors

image
image3678×504 101 KB

Does your issue happen with every document, or just one?
With every

Link to document
{Provide a link to the document in question if possible}

Code snippet
I can’t because the project is too big. The project is in angular JS.
I start the app locally without using server. Do I need to use server.js file ?
On angularJS sample github repo there is server.js file but on Angular 2+ sample github repo there is no such a file.

2

Hi @andrej333111222,

It seems like the issue maybe that the folder structure is not set properly.

Here is some documentation on how to get set up: Integrate JavaScript PDF Library & Angular | PDF.js Express SDK

Please let me know if following this sorts out the issue.

Best Regards,
Zach Serviss
Platform Support Engineer

3

Hello @zserviss , thank you for your reply.

If something is wrong with the folder structure for example when the path was wrong I only got error - GET http://localhost:9000/lib/ui/index.html 404 (Not Found) on line webviewer.min.js:1 on the angular sample page,
but I did not get error about CSP. I have same structure as the initial setup on the documentation page on my application now but I get CSP error now.

I am afraid that maybe the error reason is something else and I still can’t find a reason for that

4

@zserviss What should I add as CSP meta tag in order my application will not have CSP problems ?
Content Security Policy (CSP) - HTTP | MDN (mozilla.org)

What should I add as content ?

5

@Logan @zserviss In Our application it is used wildfly to setup and start the FE application with maven.
That is why I guess that we need to setup some configuration in the wildfly console so this webviewer script will be acceptable. So what should be added as Content Security Policy ?
So the webviewer is using livereload dependency in the background to load and detect changes in the pdf viewer ? Do we need to add that scripts from livereload will be accepted in our application ?

@Logan Please take a look into this because there is nothing mentioned in the documentation how the webviewer.min.js works in the background, and how we should deal with pdf js express in this situations where we have already setup for CSP and we want to load also the webviewer from pdf js express.

When I view my page source I see that automatically at the end of my body tag there is script added that is making me problems

<script src="[//localhost:65534/livereload.js?snipver=1](http://localhost:65534/livereload.js?snipver=1)" async="" defer=""></script></body>
6

Hi @andrej333111222,

Would you be able to send over a sample project where this is reproducible?

I am unable to reproduce this myself.

Best Regards,
Zach Serviss
Platform Support Engineer