search

slackhq / csp-html-webpack-plugin

A plugin which, when combined with HTMLWebpackPlugin, adds CSP tags to the HTML output.
MIT License
164 stars 40 forks source link

Enable Report-Only #52

Closed RenoMeyer closed 4 years ago

RenoMeyer commented 4 years ago

Description

In order to properly test the introduction of new CSPs, it would be amazing if the plugin was able to also output a meta tag with http-equiv="Content-Security-Policy-Report-Only". Ideally, these tags could co-exist, so you can leave the already active CSPs in place, while testing new policies at the same time, i.e. it would allow two separate configurations.

I'm happy to contribute if the feature fits the scope of this plugin and nothing is in the pipeline yet...

What type of issue is this? (place an x in one of the [ ])

Requirements (place an x in each of the [ ])

AnujRNair commented 4 years ago

Hi @RenoMeyer!

We would gladly accept a PR for this feature.

Thoughts on the following?

Looking forward to hearing about what you think!

andrebazoli commented 4 years ago

Hi @AnujRNair,

I tried to be a good citizen and add this feature but I got the following error: image

As you can see on report-to and report-uri these tags cannot be used inside meta tags and the discussion about whether adding it or not can be found here.

Edit: I misread the error, actually, it's not possible to use Content-Security-Policy-Report-Only with meta tag, unfortunately, I was not able to find any reference to it, but it's probably because without the report-uri or report-to the report will not be useful.

AnujRNair commented 4 years ago

Thanks for investigating! I will close this PR for now, given it looks like we cannot implement this. We can revisit if that ever changes.

RenoMeyer commented 4 years ago

Sorry for my long absence and also thank you @andrebazoli for your attempt...

AnujRNair commented 4 years ago

https://github.com/slackhq/csp-html-webpack-plugin/releases/tag/v4.0.0 was just released a short while ago which allows you to add your own processFn - this allows you to control how the CSP is added to your app.

Devs have been using this function to extract the generated CSP into a separate file and inputting into headers - you should be able to add report only mode through this

samsaggace commented 3 years ago

Hi @AnujRNair, I'm trying to implement your proposition to use the processFn to extract the CSP into a file (that I will include in nginx) but I have some issue telling webpack I generated a new file... From what I understand from webpack, when a new file is added, it needs to be added to the assets using : compilation.emitAsset(file, content); But in the processFn, this compilation object is not binded so I can't do it... Is there another way to do so ? Is it possible may be to add this compilation object to the parameters of the processFn callback ?

Thanks for your help !

samsaggace commented 3 years ago

I've tried a little something that works fine for my use-case : https://github.com/samsaggace/csp-html-webpack-plugin/commit/4f653f7f0f4ef4fad3cfca88d2b30c9b055dacf3

And then I just need to do this in my webpack conf : 

const RawSource = require("webpack-sources").RawSource;

function dumpCSP(builtPolicy, htmlPluginData, obj, compilation) {
  header = "add_header Content-Security-Policy-Report-Only \"" + builtPolicy + "\";"
  compilation.emitAsset("nginx-csp-header.conf", new RawSource(header))
}

If it's something that could be interesting for the community please tell me and I can prepare it for a clean PR.

Thanks

AnujRNair commented 3 years ago

Hi @samsaggace - that sounds like a great addition to me - please open a PR with matching tests and I will review!

samsaggace commented 3 years ago

Hi @AnujRNair, I'm back from holidays and submitted the PR, hope it will be fine. And happy new year to you (and everyone following this issue 😄 )