React frontend: Setting content-security-policy in the index.html doesn't seem to do anything?

Developers Getting Started
1

I have been using React as a frontend on the IC for quite some time and usually load images as Nat8 and then turn them into a data URL (blob). This used to work. I now noticed with a new project that the content security policy doesn’t allow image sources as blob and so I tried to set it in the index.html but the changes don’t have any effect. I also get this warning “out of the box” with any new React installation:

Refused to load the script 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Afaik this tag in the index.html should sort this out, but it doesn’t:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' cdn.jsdelivr.net">

It seems that the security policy is being set somewhere else. Does anybody know how I can adjust it?

2

It’s a side effect of breaking changes of dfx v0.13.1. Now when you create a new project it gets created with a restrictive CSP. You can disable it, I understand did not try my self, in .ic-assets.json. Not sure if you have to clean and redeploy afterwards, checkout the release notes.

2 Likes
3

Thanks a lot! Followed these instructions and got it to work: headers not updated · Issue #3053 · dfinity/sdk · GitHub

2 Likes