Content Security Policy

[ornelasnarciso]

I've searched for a Content Security Policy plugin for eleventy but looks like there's none...

Searched everywhere in how to implement one with eleventy but everything that I've fond was vague and no tutorial or examples in how to implement.

I believe that every site should have a Content Security Policy and this should be a priority for eleventy. It would be nice to have in the documentation how to implement this feature with examples.

Eleventy is the best framework for self taught programmers like me, but some things like CSP are a bit over my head if I don't have examples how to implement. Keep the good work. Thanks. :)

[nhoizey]

I don't know how Eleventy could really help generating CSP directives, as they are really specific for each site.

If it can help, here's how I manage the CSP for my photography site hosted on Netlify with a Nunjucks template: https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/src/_headers.njk

[ornelasnarciso]

Thank you very much.

I'll take a look. :)

[ornelasnarciso]

I saw your project and used lighthouse to check for the CSP. According to lighthouse you don't have a CSP, so I'm a bit confused.

I've found a starter with CSP https://github.com/google/eleventy-high-performance-blog but this project is way to complex and the build times are gigantic.

Hugo framework has tutorials in how to apply CSP, Gatsby has a plugin for CSP but there's nothing for eleventy...

A CSP is mandatory for every website and I can't find a thing about it for eleventy. This should be a priority and it should be on the documentation. 11ty is my favorite framework but if I can't apply a CSP I'll have to, unfortunately, use another framework. I can't go live without a CSP.

Thank you for your help.

[nhoizey]

Well, my CSP might not be perfect, but it is there, I just checked with https://csp-evaluator.withgoogle.com/

CSP is not mandatory at all. It's better for security of course, but it's not really "mandatory".

However, the way you implement CSP depends more on the HTTP server you're using and the way your generated site is architectured than how the build is done, so there is no way to have a generic documentation for building CSP with Eleventy.

I would not consider this a good reason to choose another SSG…

[cdowdy]

@ornelasnarciso

@nhoizey site has security headers. They're at line 20 and you can see them here: https://securityheaders.com/?q=https%3A%2F%2Fnicolas-hoizey.photo%2F&followRedirects=on

Csp directives are a server side thing (or meta tag in the head of a doc). So whatever you use to serve your site you need to set them that way. Like @nhoizey does with netlify or through an .htaccess file for apache, nginx config location block or whatever you're using.

Here's some examples I quickly found https://content-security-policy.com/examples/

Also the repo you linked in the _headers include and the apply csp plugin https://github.com/google/eleventy-high-performance-blog/blob/main/_11ty/apply-csp.js

[ornelasnarciso]

@nhoizey I'll take a look and try to replicate your example. I'm using cloudflare pages and not netlify. Will it still work? I've checked securityheaders.com and everything is ok with your website. I'll just ignore lighthouse. :)

@cdowdy I'll go with @nhoizey solution. Much, much easier to understand.

Thank you for the help. This is a good starting point. :)

[cdowdy]

@ornelasnarciso

You can attach headers with a _headers file with cloudflare pages like this and a csp example is at the bottom https://developers.cloudflare.com/pages/platform/headers/

[ornelasnarciso]

@cdowdy this is perfect. Thank you very much :D

[nhoizey]

@ornelasnarciso like @cdowdy said, Cloudflare Pages behaves a lot like Netlify on the _headers side, so it should be pretty straightforward.

They unfortunately don't support proxying requests as Netlify do, but this is not relevant for CSP.

[ornelasnarciso]

@nhoizey an update on this trend. :)

This information should be on eleventy docs (don't know how to reach the developers) for anyone who wants to create a content security policy on their website using cloudflare pages. Also for Netlify if someone knows how to do it.

Cloudflare pages:

Create a _headers file with cloudflare pages: https://developers.cloudflare.com/pages/platform/headers/

Make the _headers file readable: https://www.seancdavis.com/posts/netlify-redirects-headers-with-eleventy/

Tweak the content security policy to make it work with your website: https://content-security-policy.com/

[nhoizey]

@ornelasnarciso I don't think Eleventy docs need to contain content that is not specific to Eleventy itself.

However, Eleventy docs have "community resources", like in https://www.11ty.dev/docs/collections/ so someone could write an article about this topic on it's own website, and add a link somewhere, maybe in the "quick tips" section: https://www.11ty.dev/docs/quicktips/

I could be this "someone"… 😅

[ornelasnarciso]

@nhoizey then please do it. This information is very useful. There's no need for people like me to lose hours on end trying to figure how to build mandatory features like this on a website. :)

I'm rebuilding my website, and I'll probably create articles about these subjects, but is going to take some time because I have other projects to finish first.

[TigersWay]

I have to agree on both your points @nhoizey

@ornelasnarciso I don't think Eleventy docs need to contain content that is not specific to Eleventy itself.

In fact these information can be found in the Netlify / Cloudflare / Render / Vercel documentations.

However, Eleventy docs have "community resources"...

That's always a good idea 😄

[ornelasnarciso]

@TigersWay Not true. Cloudflare docs are incomplete. If you follow their docs _headers will not work. I had to go to forums, as always, to try to figure why it was not working. I got lucky and someone found out that I actually needed the second step I've mentioned above (that is not on cloudflare docs).

Also looks like the second step is only for eleventy and it would be nice to have this information somewhere on eleventy website. :)

[jackdbd]

If you are hosting your site on Cloudflare Pages, you can set custom headers with a _headers file that should be placed in the Eleventy build directory (tipically _site/). This means you can adopt a solution like @nhoizey 's one and let Eleventy generate _headers from src/_header.njk.

However, I'm not a fan of writing CSP directives in a nunjuck template.

I looked around and found this Netlify build plugin which works this way:

1. it finds <style> and <script> tags in all HTML pages (using jsdom)
2. it generates a SHA for each <style> and <script> tag
3. it adds a Content-Security-Policy header (or a Content-Security-Policy-Report-Only header) in the _headers file, for each HTML page.

This plugin hooks to the Netlify onPostBuild event. I think it could become an 11ty plugin by hooking to the eleventy.after event.

[jackdbd]

I created an eleventy plugin that can help you generate a Content-Security-Policy header (or a Content-Security-Policy-Report-Only header). It's in my monorepo of eleventy plugins:

https://github.com/jackdbd/undici/tree/main/packages/eleventy-plugin-content-security-policy

The plugin contains almost no logic. It just calls a function from this library:

https://github.com/jackdbd/content-security-policy

[ornelasnarciso]

I created an eleventy plugin that can help you generate a Content-Security-Policy header (or a Content-Security-Policy-Report-Only header). It's in my monorepo of eleventy plugins:

https://github.com/jackdbd/undici/tree/main/packages/eleventy-plugin-content-security-policy

The plugin contains almost no logic. It just calls a function from this library:

https://github.com/jackdbd/content-security-policy

Thank you very much I'll definitely take a look. :)

[uncenter]

Solved? I think this can be closed!