Merge pull request #1 from mdarrik/add-unsafe-styles-input

Adds "Unsafe Styles" Configuration

Author: mdarrik

README.md

@@ -6,14 +6,38 @@ While static sites are fairly secure, there's still a risk of Cross Site Scripti
 
 CSP Headers can also help you get better scores on some automated tests, like [Web Page Test](https://www.webpagetest.org/)
 
+## Installation
+Currently, this plugin is not available in the Netlify UI. To install it, perform the following steps: 
+
+1. Add it to your Netlify.toml by adding the following to the Netlify.toml. This plugin should go after any other plugins that modify your html pages. This will prevent hashes from getting mismatched. 
+```toml
+[[plugins]]
+package = "netlify-plugin-csp-headers"
+```
+1. Install the plugin in your package.json using either npm or yarn. 
+```bash
+npm install -D netlify-plugin-csp-headers
+```
+```bash
+yarn add -D netlify-plugin-csp-headers
+```
+1. Deploy your site. If you have deploy previews turned on, it's probably best to test this plugin in a deploy preview. This can help you make sure you don't accidentally break your site when you turn on CSP headers. Typically, this involves making the above changes in a pull request. 
+
+## Inputs/Options
+
+|Input | Environment Variable | Allowed Values | Description 
+--- | --- | --- | ---
+|`unsafeStyles` | `CSP_HEADERS_UNSAFE_STYLES` | `true`, `false` |  A value of `true` removes the style tag hashes from your inline styles. This way any post-processing modifications/runtime styles still work on your site. 
+
+
 
 ## Warning about Netlify Asset Optimizations
 
 To improve the security of inline script & style tags, it takes a hash of the contents. This can stop attackers from modifying them after you've deployed your site. It also prevents new ones from being added. However, this also means that Netlify's Asset Optimization can break your site. Because Asset Optimization changes the URLs of static assets like fonts after your build is complete, it makes the hashes no longer match the ones generated by this plugin. This causes your browser to block those inline assets. Unfortunately, I haven't come up with a good way around this since the URLs are randomly generated. Unfortunately, even if you only use the Pretty URLs optimization, self hosted font urls will still get replaced. To get around this, I currently see 3 options: 
 
 1. Move all `<style>` tags with font declarations to an external file. This will add additional network requests to your page load, and may cause performance to drop slightly. 
 1. Turn off all optimizations (including pretty urls 😢). This will stop Netlify from changing anything about your code. You'll also be responsible for optimizing all of your own assets. It may also prevent "pretty urls" from working correctly on your site (so pages might be at `https://example.com/route/index.html` instead of `https://example.com/route/`). 
-1. Add the environment variable `CSP_HEADERS_UNSAFE_STYLE` with a value of `true` in your Netlify UI Dashboard. The plugin will then not include any hashes for style tags in the CSP headers. This is probably mostly safe. However, there are some risks of malicious `<style>` elements, especially around images. 
+1. Add the environment variable `CSP_HEADERS_UNSAFE_STYLE` with a value of `true` in your Netlify UI Dashboard. The plugin will then not include any hashes for style tags in the CSP headers. This is probably mostly safe. However, there are some risks of malicious `<style>` elements, especially around images. The default CSP header added by the site should prevent at least some of the risks associated with images. 
 
 
 

index.js

@@ -9,8 +9,11 @@ const isScriptTag = require('hast-util-is-javascript');
 const isStyleTag = require('hast-util-is-css-style')
 const isCssLink = require('hast-util-is-css-link')
 
+let unsafeInlineStyles = process.env.CSP_HEADERS_UNSAFE_STYLES ?? false
+
 module.exports= {
-    onPostBuild: async function({constants, utils}) {
+    onPostBuild: async function({constants, utils, inputs}) {
+        unsafeInlineStyles = inputs.unsafeStyles ?? unsafeInlineStyles
         try {
             const htmlFiles = await getHtmlFilesFromDir(constants.PUBLISH_DIR)
             const cspHashesPromises = htmlFiles.map(file => processHtmlFile(file));
@@ -88,6 +91,6 @@ function generateRedirectString({filePath, hashes}, publishPath) {
 const url = filePath.replace(publishPath, '').replace(/^\/index.html/, '/');
 return (
 `${url}
-    Content-Security-Policy: default-src 'self'; script-src 'self' 'strict-dynamic' 'unsafe-inline' ${hashes['script'].join(" ")}; style-src 'self' 'unsafe-inline' ${hashes['style'].join(' ')};
+    Content-Security-Policy: default-src 'self'; script-src 'self' 'strict-dynamic' 'unsafe-inline' ${hashes['script'].join(" ")}; style-src 'self' 'unsafe-inline' ${unsafeInlineStyles ? '' : hashes['style'].join(' ')};
 `)
 }

manifest.yml

@@ -1 +1,4 @@
-name: netlify-plugin-csp-hash
+name: netlify-plugin-csp-hash
+inputs: 
+  - name: unsafeStyles
+    description: Value of "true" allows unsafe-inline styles in your site. This leaves the style tag hashes out of your CSP headers. This gets around issues from Netlify transforming urls and other things after the plugin runs. Can instead use CSP_HEADERS_UNSAFE_STYLES environment variable. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "netlify-plugin-csp-headers",
-  "version": "0.0.1-alpha.04",
+  "version": "0.0.1-alpha.05",
   "main": "index.js",
   "repository": "https://github.com/mdarrik/netlify-plugin-csp-hash.git",
   "author": "Darrik <30670444+mdarrik@users.noreply.github.com>",