Refused to connect to.. because it violates the document's Content Security Policy

Hello Devs,

I have deployed my dapp on mainnet but have been running into a connectivity issue on my frontend due to a violation of content service policy.

Below is the CSP configuration in .ic-assets.json5

"Content-Security-Policy": "default-src 'self';script-src 'self';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",

The error I am getting is:

index-a7d238a0.js:68 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/query' because it violates the document's Content Security Policy.
index-a7d238a0.js:65 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/read_state' because it violates the document's Content Security Policy.
index-a7d238a0.js:68 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/query' because it violates the document's Content Security Policy.
index-a7d238a0.js:65 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/read_state' because it violates the document's Content Security Policy.
index-a7d238a0.js:68 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/query' because it violates the document's Content Security Policy.
index-a7d238a0.js:65 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/read_state' because it violates the document's Content Security Policy.
index-a7d238a0.js:68 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/query' because it violates the document's Content Security Policy.
index-a7d238a0.js:152 Error fetching balance or logging in: TypeError: Failed to fetch
    at zn.e (index-a7d238a0.js:68:3721)
    at async zn.e (index-a7d238a0.js:73:21)
    at async zn.e (index-a7d238a0.js:73:21)
    at async zn.e (index-a7d238a0.js:73:21)
    at async h (index-a7d238a0.js:65:115356)
    at async Promise.all (/index 0)
    at async zn.query (index-a7d238a0.js:65:115774)
    at async d (index-a7d238a0.js:88:4118)
    at async onSuccess (index-a7d238a0.js:152:13224)
index-a7d238a0.js:65 Refused to connect to 'https://ic0.app/api/v2/canister/ds2zq-sqaaa-aaaag-atyyq-cai/read_state' because it violates the document's Content Security Policy.

I think I have looked up all the posts here and discord, but cannot seem to make it work. It’ll be very helpful if somebody can assist.

Please let me know if you need more information.

Thank you,

1 Like

your config has “icp0.io” the requests are going to “ic0.app”

1 Like

Interestingly, if I add it to the file manually and re deploy, it would not take affect.

The ic_assets.json is in the folder named public. When the app is built the files in the folder gets copied over to thedist folder. Despite, it isn’t taking affect.

1 Like

I do not know what was wrong. I finally cleaned up the repo, cloned it again and made the changes to the ic_assets.json and to my surprise it took effect. Weird!

But glad it worked.

1 Like

Yeah dfx has issues with header updates. In case anyone has similar issues: if you --mode reinstall your frontend it always fixes the headers, but you get some downtime :face_with_diagonal_mouth:

1 Like

Thank you @Severin and @infu!