Meta tag not included when using index.ejs template

IoannisPetridis commented 4 years ago

Description

Hello, I am using HtmlWebpackPlugin to define an index.ejs file as template. I am also passing some templateParameters through the HtmlWebpackPlugin (below given random names for security but you get the picture). If I leave the csp meta tag in the index.ejs, it doesn't get overwritten by your csp plugin, and if I remove it completely then it's not even created. I must add that I am using webpack-dev-server with hot reloading to develop and test it locally. I am giving you an excerpt of both plugin configurations up till now, could you maybe shed some light as to how to use them properly?

// ... rest of code

const cspOptions = {
      'script-src': ['"self"', '"unsafe-eval"', '"resource:"'],
      'style-src': ['"self"', '"unsafe-inline"'],
      'connect-src': ['"blob:"', '"http://localthost:*"', '"ws://localhost:*"'],
      'font-src': '"self"',
      'object-src': '"blob:"',
      'img-src': ['"data:"', '"self"'],
      'media-src': '"self"',
      'form-action': '"self"',
      'child-src': ['"blob:"'],
      'worker-src': ['"blob:"', '"resource:"'],
      'frame-src': ['"blob:"', '"self"'],
      'base-uri': '"resource"',
      'block-all-mixed-content': true // Is this even working like that?
};
new HtmlWebpackPlugin({
       cspPlugin: {
           enabled: true,
           policy: cspOptions,
        }
        inject: false,
        template: './public/index.ejs',
        templateParameters: {
            platform: 'browser',
            mode: 'development',
            pathPrefix: './',
            backend: 'http://localhost:3001',
            metaDescription: 'Testing CSP',
            title: 'Test App',
        },
        minify: false
      }),
new CspHtmlWebpackPlugin(cspOptions)
// ... rest of code

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

[ ] bug
[ ] enhancement (feature request)
[x] question
[ ] documentation related
[ ] testing related
[ ] discussion

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

[x] I've read and understood the Contributing guidelines and have done my best effort to follow them.
[x] I've read and agree to the Code of Conduct.
[x] I've searched for any related issues and avoided creating a duplicate issue.

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Reproducible in:

slackhq/csp-html-webpack-plugin version: v3.0.4

node version: v8.11.1

OS version(s): Windows 10

Expected result:

Have an overwritten csp meta tag within the built index.html or if it wasn't existing have a new csp meta tag created with this plugin's configuration

Actual result:

No meta tag is overwritten or created based on this plugin's configuration

AnujRNair commented 4 years ago

Hi there,

I wouldn't recommend using this plugin when developing locally, and with webpack-dev-server, as asset contents will always be changing as you update your code, and this plugin will block the updates / local assets from being loaded by the browser.

Instead, only enable this plugin when you are producing production ready assets. This plugin will watch assets which are output onto disk, will calculate the hashes for each one of them, and will then inline those hashes into your CSP (or create one if it doesn't exist)

If you're not seeing this work as expected, creating a minimal repo where I can replicate this issue and debug what is happening would be beneficial, and the next step to debugging your issue.

Thanks!

IoannisPetridis commented 4 years ago

Hi there,

I wouldn't recommend using this plugin when developing locally, and with webpack-dev-server, as asset contents will always be changing as you update your code, and this plugin will block the updates / local assets from being loaded by the browser.

Instead, only enable this plugin when you are producing production ready assets. This plugin will watch assets which are output onto disk, will calculate the hashes for each one of them, and will then inline those hashes into your CSP (or create one if it doesn't exist)

If you're not seeing this work as expected, creating a minimal repo where I can replicate this issue and debug what is happening would be beneficial, and the next step to debugging your issue.

Thanks!

Thank you for your reply, I am not entirely sure that the webpack-dev-server is causing issues here... It might as well be that I am using your plugin in conjunction with html-webpack-plugin wrong? What is the exact way I should use them? Do I need both for it to work or can I just rely on the html-webpack-plugin and declare the cspPlugin.policy as above? Is it maybe that it doesn't work because of the inject that I have within the html-webpack-plugin? Too many questions I know, but if you could be so kind as to give me a working example guide for this case that would be awesome :)

AnujRNair commented 4 years ago

You should only need to include an instance of HTMLWebpackPlugin, and an instance of CspHtmlWebpackPlugin to get this working:

new HtmlWebpackPlugin()
new CspHtmlWebpackPlugin()

The build your assets in webpack

If you're not seeing this, please provide us an example repo, and we'll be able to assist you more!

AnujRNair commented 4 years ago

If you're able to provide a sample repo, please open a new issue, and I can look into this Thanks!

slackhq / csp-html-webpack-plugin