npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

1

Readme

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-generator

Import 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:

  1. Add a <link> element in your <head> (preload, prefetch, prerender, etc. all work)
  2. Add a [<meta http-equiv="Content-Security-Policy" content="..."> to your <head> and it will get picked up automatically
  3. Adding CSP headers programatically (or with a _headers file), 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.