Search code examples
javascripthtmlnode.jscontent-security-policy

The ion-icons script, stripe js lib script is not being loaded in front-end


Refused to load the script 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

This error keeps occuring for loading stripejs, and ion-icons, because of this CSPolicy, how do i fix it? I've tried to use nonce, but of course, nonce have nothing to do with CSP errors.

Also, I've tried to allow specific hosts to be loaded, but still:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://unpkg.com https://js.stripe.com https://cdn.jsdelivr.net;">

In summary, CSP is blocking the request from external script sources.


Solution

  • There is a Content Security Policy set somewhere in your app. Adding another policy in a meta tag doesn't change anything, as the content needs to pass all policies. Another policy does only make it stricter. You need to identify how the other policy is set and modify that instead. Find the policy in server response headers and see if you can find the corresponding configuration.