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

gatsby-plugin-csp-nonce

v1.2.0

Published

Generate fixed nonces for scripts in Gatsby and make them available for the headers.

Downloads

906

Readme

gatsby-plugin-csp-nonce

What is a Content Security Policy (CSP)?

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other data injection attacks. These attacks execute malicious code in the trusted web page context. It is widely supported by modern web browsers as it improves website security.

With a Content Security Policy you simply declare what sources of content are allowed to be loaded from a web page (Like CSS, Javscript, Images, iframes etc.). Untrusted sources cannot be executed, preventing XSS and other data injection attacks.

Existing solutions & implications

To implement a CSP on your Gatsby website, there is a plugin called gatsby-plugin-csp. This plugin relies upon creating hashes and adding those in a <meta>-tag. This <meta>-tag has limited browser support (Source: Can I use). Therefore, setting Content-Security-Policy in the HTTP headers is the best supported alternative.

Besides, many rely upon a plugin called gatsby-plugin-image (GatsbyImage & StaticImage) for processing images on their Gatsby application. gatsby-plugin-image creates inline styles, but gatsby-plugin-csp doesn't offer support for that (Source). A resolution might be to use 'unsafe-inline'. Hench the name, it is generally not recommended to use (see for more information: https://content-security-policy.com/unsafe-inline/).

Solution

A solution is to use CSP level 3 feature called strict-dynamic (read-more). This will use a nonce (randomly generated number), which changes every page request. As such, there no need to generate sha-256 or whitelist hosts anymore.

What does this plugin do

gatsby-plugin-csp-nonce adds a fixed nonce to inline styles and scripts.

Having a fixed nonce on the right placed in your Gatsby code does half the job. The other part is making sure that during a page request this nonce will be replaced by a randomly generated nonce.

Different hosting providers have solutions for this, but it is not in the scope of this plugin;

Install

npm i gatsby-plugin-csp-nonce

or

yarn add gatsby-plugin-csp-nonce

How to use

Step 1: Load the plugin in your Gatsby website

// In your gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-csp-nonce`]
};

This will add the plugin and add nonce="nonce-DhcnhD3khTMePgXw" to your scripts and styles. By default the plugin is only visible in production mode (gatsby build). Logs are disabled by default to prevent flooding the console.

To add a custom nonce, add logs in the console or to see the nonce in development mode (gatsby develop), you can use the settings below.

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-csp-nonce`,
      options: {
          disableOnDev: false,
          enableLogs: false,
          nonce: 'my-custom-nonce',
      },
    },
  ]
};

Step 2: Send headers to hosting provider

Set the Content-Security-Policy HTTP header. This can be done by setting them in a custom file (e.g. CloudFlare, Netlify), or by setting custom headers using a plugin (e.g. Gatsby Cloud).

Setting headers with a file

Files placed in the /static directory will be copied in the /public directory during build time (Gatbsy build). Some hosting providers offer support for setting custom headers by placing a 'headers' file in the /public directory. For CloudFlare Workers and Netlify a _headers can be used to set the headers.

Your hosting provider, might need a different file like headers.json, but it is still the same idea.

// In static directory, filename (no extension): _headers
/*
    X-Frame-Options: DENY
    X-Content-Type-Options: nosniff
    Referrer-Policy: no-referrer
    X-XSS-Protection: 1; mode=block
    Strict-Transport-Security: max-age=31536000
    Permission-Policy: accelerometer=(), camera=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), sync-xhr=(), usb=()
    Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-DhcnhD3khTMePgXw' 'strict-dynamic' https://www.google-analytics.com/analytics.js; style-src 'self'; img-src 'self' *.example.com https://www.google-analytics.com/collect; connect-src 'self' *.example.com; font-src 'self'; object-src 'none'; media-src 'none'; frame-src 'none'; child-src 'none'; form-action 'self'; frame-ancestors 'none'; base-uri 'self'; worker-src 'none'; manifest-src 'self'; prefetch-src 'self'; navigate-to 'self';