CSP error when using third-party library in plugin

Development

AI-generated summary

The discussion revolves around resolving a CSP error when using a third-party library in a plugin. peter.be successfully loads a library via loadScript but encounters a CSP violation when the library creates Blobs, resulting in a blocked blob: URL. Firepup650 suggests adding http://localhost:4200 or blob:http://localhost:4200 to the CSP, but peter.be notes these are ineffective or invalid. merefield advises that CSP should not be enforced in development, as it can block useful tools and is unnecessary since localhost is not a real internet address. peter.be acknowledges the advice but wants to resolve the issue early to assess its impact on production readiness.

1

After many different tries and approaches, I managed to successfully load a third party library to use in my plugin.

The library is located under public/javascripts/some-library.js.

In my controller, I am able to successfully load the script via:

loadScript("/plugins/my-plugin/javascripts/some-library.js")

On some occasions in that file, the library creates Blobs and assigns them to variables that are being used. E.g.

var A=URL.createObjectURL(new Blob(['\n\tsome code snippet...],{type:"application/javascript"}))

And whenever I try to use the library in my plugin code, I get:

Refused to load the script 'blob:http://localhost:4200/f33a6788-a853-4286-883a-48cb8e2c9cc1' because it violates the following Content Security Policy directive: "script-src http://localhost:4200/assets/ etc etc...

What would be the best way to work around this?

Thank you for any help and pointers!

2

What if you just add http://localhost:4200 to the CSP?

3

I’ve actually tried that, and it didn’t change anything :confused:

4

What about blob:http://localhost:4200?

5

Tried that as well, but that’s an invalid statement for a CSP :confused:

6

For anyone stumbling upon this, the correct line to add to to csp script src is blob:

7

Wait! You don’t need to implement CSP in development, you are not at risk from attackers?

It will also block some developer tools potentially.

Just turn this setting OFF:

IMG_0197
IMG_0197781×155 22.5 KB

Simples.

I would delay this headache until you have a working plugin testing on a production staging server.

8

I was indeed in the phase of getting it ready for production, so this was the last headache to be resolved. And besides, I don’t like to delay these things, especially when I need to find out if they could be a potential deal breaker and I need to find another avenue altogether :man_surfing:

9

Yes but you should be working on the CSP config on the production staging server that has a real internet address.

Localhost is not an internet address! :slight_smile::wink: It’s not even https …