Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

☂️ Umbrella issue for Gatsby CSP #10890

Open
m-allanson opened this issue Jan 7, 2019 · 18 comments
Open

☂️ Umbrella issue for Gatsby CSP #10890

m-allanson opened this issue Jan 7, 2019 · 18 comments

Comments

@m-allanson
Copy link
Member

@m-allanson m-allanson commented Jan 7, 2019

Summary

By default Gatsby generates a couple of inline <script> tags and one (or more?) inline <style> tags for each page.

This is problematic when creating a Content Security Policy (CSP) for your site, as the inline scripts mean script-src 'unsafe-inline' needs to be configured for your CSP. This in turn undoes some of the benefits of a CSP.

This issue is tracking improvements to using Gatsby with a CSP.

Useful links:

Related issues:

Basic example

Quoting @chuckharmston from issue #3758:

There are two ways to permit this:

  1. By allowing generated assets to be loaded as external assets, so origins can be used to control this.
  2. By using strict-dynamic and hashes of the content of each generated file or inline resource. This provides slightly better security, but is also more complex and rigid. Ideally in this case, the generated CSP is inserted as a <meta> tag and the same CSP is inserted into gatsby-plugin-netlify's generated _headers file.

Motivation

Adding a Content Security Policy can be a useful safeguard for your site, Gatsby should provide options for people using CSPs.

@eduards

This comment has been minimized.

Copy link

@eduards eduards commented Jan 7, 2019

I just started to look into this issue. I'd like to use Gatsby for our public web projects but the missing CSP support is a blocker for us. I'm happy to invest some time to look into this but would appreciate if someone could point me into the right direction as I'm brand-new to the codebase 🙈

@lucasjohnston

This comment has been minimized.

Copy link

@lucasjohnston lucasjohnston commented Jan 9, 2019

Not sure how much help I can be, but seconded ☝️

@DSchau

This comment has been minimized.

Copy link
Contributor

@DSchau DSchau commented Jan 9, 2019

cc @xjamundx, you'd be interested in this too, correct? With the additional consideration of nonce if I recall, correctly?

@kristiehowboutdat

This comment has been minimized.

Copy link
Contributor

@kristiehowboutdat kristiehowboutdat commented Jan 23, 2019

Happy to help as well, but new to the repo - what lifecycle APIs would be best to use?

@travi

This comment has been minimized.

Copy link
Member

@travi travi commented Jan 23, 2019

in addition to the issues that need to be improved with gatsby itself, i'm curious how gatsby plugins might be addressed for similar concerns. have others already considered what would be needed beyond core?

@mattburrowsmonzo

This comment has been minimized.

Copy link

@mattburrowsmonzo mattburrowsmonzo commented Jan 29, 2019

Hi all,

My colleague @eduards and I looked into getting CSPs working with Gatsby last week and wanted to share our progress.

The changes that we made were to the static-entry.js file. You can see what we did in this GitHub comparison view.

We set out to get CSPs working by hashing inline scripts and styles by adding the hashes to a meta tag that we add to the head. We found inlined scripts and styles by extracting them from the following objects in the static-entry.js file:

  • headComponents
  • preBodyComponents
  • postBodyComponents

We are working out whether they are inlined scripts / styles by checking for either the “script” or “style” type and the “dangerouslySetInnerHTML” property on the props key

With these simple changes we managed to get CSPs working with the httpEquiv="Content-Security-Policy" meta tag.

From getting the proof of concept (POC) working, we came to the conclusion that making the changes in this file wouldn’t be the best way to implement CSPs. And instead would like some advice about implementing this as a plugin (if this is the right approach).

A few questions to help us on the way:

  • If writing as a plugin, how can we make sure it picks up all the inline styles / scripts? Is there a Gatsby lifecycle hook that we can tap into that also allows us to access the headComponents, preBodyComponents and postBodyComponents?
  • Implementing a strict CSP means a lot of themes will not work as they rely on style attributes on elements which are blocked. This is something we encountered when implementing CSPs in static-entry.js. Are there any other edge cases that we might be missing?
  • If this should be a core feature, are there any examples you can recommend for configuring CSPs?
    • As well as picking up inline styles / scripts users should also be able to pass in config so they can whitelist domains, include data: images and other things they might want to configure
    • Various pages might have different CSPs so how can we implement it on a page by page basis?
  • This solution covers implementing CSPs via a meta tag, what is the best approach for headers?
    • Is it to update the netlify headers plugin?
@thomkrupa

This comment has been minimized.

Copy link

@thomkrupa thomkrupa commented Feb 19, 2019

Hey, internally we've been using a custom plugin for this. I decided to open source it, maybe it will help some of you.

https://github.com/bejamas/gatsby-plugin-csp

It generates hashes for inline scripts and styles which means it sets strict policy by default.

@mattburrowsmonzo

This comment has been minimized.

Copy link

@mattburrowsmonzo mattburrowsmonzo commented Feb 19, 2019

@thomkrupa looks like we both had the same idea! 😂

I created a repo last night with the same name to do pretty much the same thing -> https://github.com/mattjburrows/gatsby-plugin-csp

@wardpeet wardpeet changed the title Umbrella issue for Gatsby CSP ☂️ Umbrella issue for Gatsby CSP Feb 22, 2019
@dsebastien

This comment has been minimized.

Copy link

@dsebastien dsebastien commented Mar 3, 2019

@thomkrupa @mattburrowsmonzo, thanks for sharing!
Your solution does help, but I'm still having issues with gatsby-image that generates inline styles.

When I use gatsby develop it works fine (with CSP enabled), but it fails with gatsby build

For now I'll have to keep unsafe-inline there :(

dsebastien added a commit to DeveloPassion/website that referenced this issue Mar 3, 2019
@dsebastien

This comment has been minimized.

Copy link

@dsebastien dsebastien commented Mar 3, 2019

By the way, at the moment I'm using gatsby-plugin-netlify (https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/) to add security-related headers and it would be great to be able copy the CSP generated by your plugin to the "_headers" file generated by gatsby-plugin-netlify.

I'm trying to do it now by parsing the generated "public/index.html", but I'm guessing that there could be an easier solution (e.g., if you plugin wrote the raw CSP content somewhere or made it available somehow for other Gatsby plugins to use :)

Here's my current solution: DeveloPassion/website@c31120c

dsebastien added a commit to DeveloPassion/website that referenced this issue Mar 3, 2019
@thomkrupa

This comment has been minimized.

Copy link

@thomkrupa thomkrupa commented Mar 4, 2019

hey @dsebastien, thanks for your feedback! Feel free to create an issue(s) -> https://github.com/bejamas/gatsby-plugin-csp/issues so we can track the progress on them.
Gatsby-image issue is something I will definitely look into.

@gatsbot

This comment has been minimized.

Copy link

@gatsbot gatsbot bot commented Mar 25, 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

@gatsbot gatsbot bot added the stale? label Mar 25, 2019
@dsebastien

This comment has been minimized.

Copy link

@dsebastien dsebastien commented Mar 25, 2019

ping. Don't let this one get forgotten please :)

@DSchau DSchau added not stale and removed stale? labels Mar 25, 2019
@DSchau DSchau moved this from To do to Prioritized in OSS Roadmap Mar 26, 2019
@dsebastien

This comment has been minimized.

Copy link

@dsebastien dsebastien commented Apr 2, 2019

Hey everyone.

I'm also facing this issue with the google analytics plugin. Initially, I thought that I could simply add a 'sha256-...' entry to my script-src, but the value changes from page to page. That plugin should allow to pass a nonce so that we can whitelist it through the CSP.

@m-allanson

This comment has been minimized.

Copy link
Member Author

@m-allanson m-allanson commented May 20, 2019

Question for folks - is this something that should be moved in to core? What should be optional, what should be enabled for everyone? Is this something that always needs to be configured, so people would be better served by using the https://github.com/bejamas/gatsby-plugin-csp plugin?

@travi

This comment has been minimized.

Copy link
Member

@travi travi commented May 20, 2019

i think the community would benefit greatly from some good defaults in this area. gatsby does a great job in other areas of making it easier to do the right thing than the wrong thing, but this is an area that is currently quite difficult to do the right thing.

that said, it may be quite difficult to get to that point that would work out of the box for all configurations, but even warnings to help track conflicts and some guidance to get past issues could go a long way.

@Addile

This comment has been minimized.

Copy link
Member

@Addile Addile commented Jul 6, 2019

Was looking to make this work with gatsby-plugin-netlify to have proper CSP headers, but that seems hard to do at the moment. gatsby-plugin-csp seems like a good start with meta tags, not my preferred choice but it works, but there are still problems and things that could be improved.

@vcarl

This comment has been minimized.

Copy link
Contributor

@vcarl vcarl commented Sep 6, 2019

Adding another note with an issue I ran into, gatsby-plugin-mdx uses new Function, which necessitates 'unsafe-eval' in a CSP. Would be great to be able to remove that, that punches a huge hole in the policy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
OSS Roadmap
  
Prioritized
You can’t perform that action at this time.