Example on how to use this with CRA + react-app-rewired?

RIP21 commented 4 years ago

Description

Hey folks, can you please make some example that will show how to make this thingy working with CRA + react-app-rewired? Because all my attempts failed with no result in resulting index.html

I tried rewired function like that with no avail tho. I tried a few other approaches, also no result.

function addCspHtmlWebpackPlugin(config, env) {
  config.plugins[0].options.cspPlugin = {
    enabled: true,
    policy: {
      'base-uri': "'self'",
      'script-src': ["'unsafe-inline'", "'self'"],
    },
    hashEnabled: {
      'script-src': true,
    },
    nonceEnabled: {
      'script-src': true,
    },
  }

  config.plugins.push(
    new CspHtmlWebpackPlugin(
      {
        'base-uri': "'self'",
        'script-src': ["'unsafe-inline'", "'self'"],
      },
      { ...config.plugins[0].options },
    ),
  )

  return config
}

I'm talking about this thing :) https://github.com/timarney/react-app-rewired

Thanks!

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 `[ ]`)

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

AnujRNair commented 4 years ago

Hi @RIP21,

I'm unfamiliar with how CRA and react-app-rewired work, but if you are able to replicate the issue in a minimal repo, where I could poke around, I might be able to point you in the right direction.

Thanks!

kaikun213 commented 4 years ago

@RIP21 With the following code it works fine for me (similar to yours):

In config-overrides.js:

function addCspHtmlWebpackPlugin(config) {
  if(process.env.NODE_ENV === 'production' &&  
     process.env.PUBLIC_URL === "") {
      console.log("[PRODUCTION] Enable CSP")
      config.plugins.push(new CspHtmlWebpackPlugin(cspConfigPolicy));
  }

  return config;
}

module.exports = override(
  addCspHtmlWebpackPlugin,
)

In public/index.html:

<meta http-equiv="Content-Security-Policy" content="">

RIP21 commented 4 years ago

CSP was new to me back when I created this issue. Am I right that this thingy just adds nounce or hash or whatever to any inline script that is detected in HTML? Or it also adds meta tag with all rules that you mention in its config? Because I already implemented CSP with just headers, it's way more secure.

On Sun, Feb 16, 2020, 10:43 kaikun213 notifications@github.com wrote:

@RIP21 https://github.com/RIP21 With the following code it works fine for me (similar to yours):

In config-overrides.js:

function addCspHtmlWebpackPlugin(config) { if(process.env.NODE_ENV === 'production' && process.env.PUBLIC_URL === "") { console.log("[PRODUCTION] Enable CSP") config.plugins.push(new CspHtmlWebpackPlugin(cspConfigPolicy)); }

return config; }

module.exports = override( addCspHtmlWebpackPlugin, )

In public/index.html:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/slackhq/csp-html-webpack-plugin/issues/53?email_source=notifications&email_token=AA6B53ZLMH65UQC3JATVACTRDEDEJA5CNFSM4KQK7ZGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL4CBXQ#issuecomment-586686686, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6B535UEUJYPG33LIM6KFTRDEDEJANCNFSM4KQK7ZGA .

AnujRNair commented 4 years ago

That's correct! Glad you managed to implement this. Closing this issue for now

slackhq / csp-html-webpack-plugin