@mexican-man/pages-csp-generator
v0.1.5
Published
The goal of this package is to provide a simple automated way to generate Content Security Policy compliant headers for your Cloudflare Pages site at runtime. The primary goal is to automate hashing and nonces, but it will also scan your page to include a
Downloads
8
Maintainers
mexican-manReadme
Pages-CSP-Generator
Automatically generate hashes and nonces along with Content Security Policy compliant headers for static Cloudflare Pages sites.
What if my Page isn't Static?
There's no good way to parse obfuscated JS for assets of unknown types. Especially if SSR is used, it can be impossible. If you're willing to put in a little work, you can make it work, but it won't always be worth the trouble, especially if framework-specific plugins exist.
What it Does
Using HTMLRewriter, it:
- Looks for any existing headers/
<meta http-equiv="Content-Security-Policy"> - Looks for any inline scripts/stylesheets that need hashes/nonces
- Looks for any inline elements (such as
<img>,<iframe>, etc.) that contain URLs - Scans through any linked web-app-manifests and stylesheets that contain images
- Injects the headers into the request, automatically, per page
This project is new, so there are some features/directives that haven't been addressed yet. See below for how to override default behaviour.
How to Use
npm i @mexican-man/pages-csp-generatorImport it as middleware in your _middleware.ts:
import { InjectCSP } from '@mexican-man/pages-csp-generator';
export const onRequestGet = [InjectCSP({ /* config here */ })];Configuration
InlineMethod: 'nonce' | 'sha256' | 'sha384' | 'sha512' (default: 'nonce')
How to handle inline scripts/styles.
InjectionMethod: 'headers' | 'meta-tags' (default: 'headers')
How to serve the CSP directive to the browser.
UseSelf: boolean (default: true)
Allow the use of the 'self' keyword when generating headers.
ScanExternal: boolean (default: false)
By default, only local assets (ony css, manifests, for now) get scanned for URLs. You can override this behaviour to work with non-local files as well, but performance can tank dramatically.
A Quick Word About Performance
Execution time is usually quite fast, with larger pages taking around 30-40ms to process. Some more optimization could be added via caching.
"Oh no, my Assets Aren't Loading!"
If you load any assets via Javascript, there's a good chance you'll need to do some extra work to let the package know what it needs to add.
There are three ways you can manually add assets:
- Add a
<link>element in your<head>(preload,prefetch,prerender, etc. all work) - Add a [
<meta http-equiv="Content-Security-Policy" content="...">to your<head>and it will get picked up automatically - Adding CSP headers programatically (or with a
_headersfile), they will also get picked up.
Guide to CSP headers/formatting*
If you're using something like web-components, or you really like using the style="..." attribute, you can always add "unsafe-inline", or any other valid value.
Naturally, some assets don't fit within our CSP-formatting needs. Assets such as Google Fonts will import a .woff that changes URL each request, so you would manually need to add https://fonts.gstatic.com to font-src.
If you find a type of resource that isn't being handled properly, please PR or open an issue.