Git Product home page Git Product logo

strict-csp's Introduction

Glossary

  • CSP (content-security-policy): A layer of security that can be added to web apps as an HTTP header or meta tag. Source: MDN
  • Strict CSP: A specific set of CSP directives that has been identified as an effective and deployable mitigation against XSS (cross-site scripting). XSS is one of the most widespread sedcurity exploits. Source: w3c.
  • SPA (single-page application): a web app implementation that loads a single web document. When different content needs to be shown, it updates the body content of that document. Source: MDN

About this repo

Two codebases are in this repo:

  • strict-csp: a bundler-agnostic library, that can be used to generate a CSP. Go to strict-csp

  • strict-csp-html-webpack-plugin: a webpack plugin that configures a strict, hash-based CSP for an SPA. It uses the strict-csp library to form a CSP and hooks into the popular HtmlWebpackPlugin to set up this CSP as a meta HTML tag. Go to strict-csp-html-webpack-plugin

Both of these are available as separate npm packages.

Setup for development purposes

See DEVELOP.md.

Resources

strict-csp's People

Contributors

dependabot[bot] avatar jaylinski avatar lweichselbaum avatar maudnals avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

strict-csp's Issues

style-src directive doesn't exist

I expected this library to generate the hashes for the script-src and style-src directives, as well as the script-src and style-src directives themselves, but the style-src directive does not exist in the generated CSP and is not even mentioned anywhere in the libraries' code. Are there plans to address this issue? Would it include sourced styles hashes in the same way as it already does for the sourced scripts? When?

Reorganize + set up for local development

  • 3 separate codebases: React test app, library (=auto-csp), plugin code (=StrictCspHtmlWebpackPlugin)
  • Set up lib via symlinking to make local development easier
  • Pass HTML plugin a module reference for the strict CSP plugin
  • Document how to symlink
  • Document the full development setup and process in README.md

Remove unused dependencies

package.json contains unused dependencies, that create a collision when trying to import strict-csp as a lib in other projects (e.g. Squoosh)

Use a different hook?

As per @jantimon's suggestion:
Consider using this hook instead of beforeEmit. to avoid parsing twice.

This may be useful if you’re not generating html, say if you're generating php
=> Split it up?

Incorrect Hash in webpack production build when filenames uses [contenthash]

Hello,

We are looking to use the webpack plugin to wrap our SPA in a hashed inline script, and have it working locally, but when the webpack builds in production, the hash that is being generated is incorrect. I have narrowed down the issue to using a webpack config with a filename containing [contenthash]. This fails in a fresh, ejected create-react-app as well when building in production mode.

Reproduction Repo:

https://github.com/todda00/test-csp

Steps to Reproduce:

Clone reproduction repo
Navigate to repo root directory

Run the following:

npm install
npm run build
npx serve -s build

When the output.filename webpack config is changed to something static, the script is hashed correctly. Support for [contenthash] is common and required in many CDN served static production sites such as ours.

The webpack config `devtool: 'eval-cheap-module-source-map'` is incompatible with the strict CSP generated by this plugin

  • Reproduction here. This code uses StrictCspHtmlWebpackPlugin but is forked form a real-world-like React app example.
    • Install with yarn
    • Run npm start
    • See ❌ bundle.js:2074 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'strict-dynamic' 'sha256-oFPtyyJhlZ+G5A4OLrkT70kFUet3N+v/5ze3M/67PZY=' 'sha256-9+jNFV4o+lLQjYcxbOgP7ywqFpytkjvr4JvwaIaUZb8=' https: 'unsafe-inline'". That's because the devtool config uses eval.
  • Using devtool: "source-map" in /webpack/development.config.js fixes it ✅. Probably not the best fix for a dev setup because this is the slowest. Other options may be better.

Add CSP validation

Lo-prio: should be OK for now because the CSP is defined by us, there are no options

Add FAQ to the README

As suggested by @jantimon, add a FAQ to help developers understand the benefits of strict-csp and how it differs from other tools:

  • Why strict-csp over allowlists?
  • Can this plugin slow down my site? // see #15
  • What about SRI? Why not hashes on sourced scripts? // + add bug tracking link for sourced script hash support in FF and Safari

Fix dev setup instructions

Some dev setup instructions are out of order; the steps documented in the README right now lead to a missing package when first running the start script.

preserve type="module" on scripts

One unexpected behavior of this plugin was that it removed script tag attributes that may be essential to the code running correctly. For example, my team was dealing with a third party script that required this format:

<script async type="module" src="https://example.com/script.js"></script>

But the output of this strict-csp script only uses a few specific script attributes:

scripts.forEach(function(scriptUrl) {
var s = document.createElement('script');
s.src = scriptUrl;
s.async = false; // preserve execution order.
document.body.appendChild(s);

It would be great to throw an error if there are attributes besides async that end up being dropped during this conversion.

Our workaround was to not use the script tag and run the following code to be CSP-compliant:

const s = document.createElement('script');
s.src = scriptUrl;
s.type = 'module';
s.async = true;
document.body.appendChild(s);

Implement + document script for development setup

There are many steps to follow to wire all the local libs and packages properly for development purposes.
Implement a script that does this instead.


### Link the library strict-csp where needed

- Builds the library, so that there's something to link to:
  `cd strict-csp && npm install && npm run-script build && cd ..`
- Creates a link to the library:
  `cd strict-csp && npm link && cd ..`
- Link sto the library where needed:
  `cd strict-csp-html-webpack-plugin && npm link 'strict-csp' && cd ..`

This is done only once.

🧐 Troubleshooting: if you get an error like "linked library not found", ensure that `main` in strict-csp's `package.json` points to a file that exists.

### Links the plugin strict-csp-webpack-plugin where needed

- Creates a link to the plugin:
  `cd strict-csp-html-webpack-plugin && npm link && cd ..`
- (only once) Installs the dependencies in the React app, so that we can link to the plugin:
  `cd react-app && npm install && cd ..`
- Links to the plugin where needed:
  `cd react-app && npm link 'strict-csp-html-webpack-plugin' && cd ..`

Feature Request: Automatically defer sourced scripts in the script loader

Sourced scripts with defer="true" and/or type="module" are executed after the DOM has been parsed.

This behavior is ignored by default when the script is loaded dynamically. For this reason, a deferred script loaded through the CSP safe script loader will likely lead to issues: GoogleChrome/web.dev#5008 (comment).

I think it would be useful for this module to automatically implement the logic where deferred scripts are loaded on the DOMContentLoaded event, and also generate the preload links for those scripts.

Backlog

Development setup:

  • Add nodemon to prevent having to manually restart (see how here) => Automatic reload
  • Lint/Prettier config
  • TS-ify the plugin?

Features:

  • Make the sha algo configurable
  • Add XHTML support
  • Perf: add prefetch options on the scripts

Robustness/Security:

  • npm audit
  • Add CSP validation (OK for now because the CSP is defined by us, there are no options)
  • Tests

Community:

  • Add CONTRIBUTING.md

Questions

  1. Are there aspects of HTML transformation we should be especially careful about⏤e.g. gotchas that stem from knowledge of other plugins that are based on html-webpack-plugin?
  2. We're doing newStrictCspHtmlWebpackPlugin(HtmlWebpackPlugin). Are there other configs we should consider when making HtmlWebpackPlugin an argument of our plugin creation?
  3. Are there any reasons why newStrictCspHtmlWebpackPlugin(HtmlWebpackPlugin) may stop working in the future?

Refused to load script from <URL> despite strict-dynamic

Hi Team,

I'm using the webpack plugin on Angular app. However, Chrome browser refuses to load the scripts added by the loader. Shouldn't browser trust these scripts because strict-dynamic is present and was loaded by the loader script whose sha256 is allowed in script-src ?

Refused to load the script 'https://myapp.mywebsite.com/app/4493-ce4021c07yds7s87.js' 
because it violates the following Content Security Policy directive: 
"script-src 'strict-dynamic' 'sha256-mdiRA9U1beoJQUxqe51WTscrp2eub7BXW/j51AWQiy8=' https: 'unsafe-inline'". 
Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.