How to handle `unsafe-eval` using bitbucket static sites

Question

I coded a static page using gatsby and deployed it. :80 is no problem, also when i hosted it on a github static page the console didnt spammed errors. For each <GatsbyImage/> i am using in my project, i get this chrome-console-error on my static page.

[Report Only] Refused to connect to '<URL>' because it violates the following Content Security Policy directive:
"connect-src bitbucket.org *.bitbucket.org bb-inf.net *.bb-inf.net analytics.atlassian.com as.atlassian.com
api-private.stg.atlassian.com api-private.atlassian.com cofs.staging.public.atl-paas.net cofs.prod.public.atl-paas.net intake.opbeat.com api.media.atlassian.com api.segment.io
xid.statuspage.io xid.atlassian.com xid.sourcetreeapp.com bam.nr-data.net sentry.io bqlf8qjztdtr.statuspage.io <URL>".

Can someone point me to 1. understand the problem 2. handle it properly to avoid all this console errors. i hate errors in live projects ;-)

Answer 1

This is an issue on Content Security Policy usage on Gatsby. See more explanation on [1]. Gatsby cannot be used with a CSP rule directly.

For that there are some plugins, for example one at [2] that make it happen that CSP rule is partially generated by Gatsby. The errors get fixed.

Source:

[1] https://github.com/gatsbyjs/gatsby/issues/10890

[2] https://www.gatsbyjs.com/plugins/gatsby-plugin-csp/