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

express-legacy-csp

v1.6.0

Published

Downgrade content-security-policy version and fidelity to support the requesting browser

Downloads

4,841

Readme

express-legacy-csp

NPM version Build Status Coverage Status Dependency Status

Generating a content-security-policy that works correctly in all the browsers you support is hard work.

Because of the different level of support of the CSP specifications, and some times even only partial implementations, you will run into situations where you will either need to drop older browser support or implement a less secure policy in order to make a one-size-fits-all policy that includes older browsers.

NOT ANY MORE!

express-legacy-csp is a middleware that sits at the top of your stack and analyses the user agent header and the Content-Security-Policy of the response. Based on these two pieces of data it will generate a version of your policy which is specifically tailored to the capabilities of the requesting browser.

This means you can serve CSP3 with maximum security settings, but still support older versions of Chrome that only support CSP2, or even older browsers like Safari 6 with CSP1-support.

express-legacy-csp fixes other quirks in old implementations, like renaming the header that contains the policy.

Unless a browser's capabilities and quirks are explicitly known, your policy will pass through untouched.

There is a tiny performance bonus of sending fewer bytes over the wire when sending CSP1 instead of CSP2. We have not done any research on the performance improvements this results in. It's most likely that these are negligible.

How it works

Browser detection is done using useragent. Based on data from caniuse.com the decision is made whether to downgrade your policy level or apply other changes.

A CSP version is only deemed supported if the the caniuse data has no notes attached. If the support is none or has notes, the CSP version will be dropped down one level. There is a specific exception for IE, where a non-standard header is needed to get even CSP1 support.

Resolutions that are cached for runtime performance in a production setup:

  • Resolving a User-Agent string to a browser family and version
  • Resolving a browser family and version to header name and CSP capabilities
  • Downgrade of a unique CSP to corresponding lower version of the same CSP

CSP3 to CSP2 downgrade

CSP2 to CSP1 downgrade

Usage

Put express-legacy-csp in your middleware stack before the middleware that sets your CSP.

const express = require('express');
const expressLegacyCsp = require('express-legacy-csp');

express()
  .use(expressLegacyCsp())
  .use(someCspGeneratingMiddleware);

Both camelCased and kebab-cased directive names are supported, and you can supply the tokens to add as either a string or an array of strings.

Licence

MIT