CSP (Content Security Policy)

Developing with Prismic
1

Hello Prismic community, nice to meet you!

A couple months ago we have made this website for the company I work for: https://uplexis.com.br/

Our awesome developer @kris did the hard work, using the Slice Machine and we love it!

The only thing we are missing is the CSP, to make everyone happy (including our security team).

Our past website had this one (which might be inneficient)

**default-src https: data: 'unsafe-inline' 'unsafe-eval'**

We have tried to replicate this to the new website, but it ended up causing an incompatibility with 3rd party embeds we are using, such as Youtube.

Does anyone have a Prismic website with a CSP or can give us some direction on this matter?

Thanks a lot

2

Hey there @bmaulo, I haven't personally used a project that has a certain CSP enabled. But as far as I know there shouldn’t be any issues with any Prismic fields whatsoever.

The only one that caused trouble in the past was SVG files. They are a special kind of image that can embed javascript (for animation purpose mainly) that could result in a security breach. Prismic used to deliver SVGs via Imgx. Now it uses AWs to retrieve the file, the URL was images.prismic.io/img.svg?imgx_param=value , now it;s received like this: prismic-io.s3.amazonaws.com/img.svg

4

Hi @Pau

Just a note that I'm not a security headers expert, but I just tried it in several possible combinations but the whole website errors out and doesn't render anything. I tried several different values but they all resulted in the same output

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'unsafe-inline' 'unsafe-eval'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'unsafe-inline' 'unsafe-eval'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

8Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "default-src 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

I'm using next-secure-headers to create my security headers. This is the values I've tried so far

      contentSecurityPolicy: {
        directives: {
          defaultSrc: "'unsafe-inline' 'unsafe-eval'",
        },
      },

      contentSecurityPolicy: {
        directives: {
          defaultSrc: "https: data: 'unsafe-inline' 'unsafe-eval'",
        },
      },

Any tips on how to make it work?

5

Hey @kris
Which of this content is coming from Prismic?

6

@Pau All images from the website are coming from Prismic.

From within the error message, you can also see that google fonts is also being blocked, that's why this might not be a necessarily a Prismic issue, but Prismic is definitely impacted by it.

What we could do is find another Prismic website (preferably built in Nextjs/Gatsby) which uses a CSP and then we can use what they have done by looking at their security headers using https://securityheaders.com/

I've also tried adding this meta tag

          <meta
            httpEquiv="Content-Security-Policy"
            content="upgrade-insecure-requests"
          />

However it didn't help with passing the test on the website.

It's worth noting that the goal here is to purely pass the test on the checker, not to implement a proper content security policy. The website is 100% static, so there is no danger from such an attack

7

Thanks for the additional details, I'll ask the team for feedback and come back as soon as I have more information.

1 Like
9

Hello everyone, Our DevOps team recommends checking this piece of documentation:

To allow Prismic ressources from not being blocked by the policy.

11

Thanks a lot @Pau, we will do our homework.