Using React on Rails with CSP and nonce

[joshuacronemeyer]

Hi all,

I've been unable to find any docs about how to use react on rails when our server has a CSP setup. I believe that the initial script tag that react on rails renders needs to include the nonce. Can you help me figure out how to add the nonce attribute to the react on rails script tag?

Here is the rails guide for CSP/nonce configuration. https://guides.rubyonrails.org/security.html#adding-a-nonce

Thanks in advance,
Josh Cronemeyer

[Judahmeek]

The ReactOnRails script itself doesn't need a nonce if you're able to use policy.script_src :self, :https,.

If you really need a nonce, then I believe the html_options parameter should satisfy your needs.

Side Note: You can also give the nonce to the component as a prop, which may be necessary for resolving CSP violations by certain CSS-in-JS & animation libraries. (I remember forking react-spinners to support a nonce before). I also had to replace dynamic inline styles with dynamic classes & CSS modules for the same client.

[justin808]

Hi @joshuacronemeyer, I saw you're using React on Rails at https://app.trucentive.com/users/sign_up. Cool!

Feel free to book a time with me if you think my team and I can help further: https://meetings.hubspot.com/justingordon/30-minute-consultation.

[TonyProkop]

Is there a way to add a nonce attribute to the script tag which react on rails generates? In my project I'm seeing script tags like this:

<script type="application/json" id="js-react-on-rails-context">
    {
        "railsEnv": "development",
        "inMailer": false,
        "i18nLocale": "en",
        "i18nDefaultLocale": "en",
        "rorVersion": "12.6.0",
        "rorPro": false,
        "href": "http://localhost:3000",
        "scheme": "http",
        "host": "localhost",
        "port": 3000,
        "search": null,
        "httpAcceptLanguage": "en-US,en;q=0.9,fr;q=0.8",
        "serverSide": false
    }
</script>
<script type="application/json" class="js-react-on-rails-component" data-component-name="TestComponent" data-trace="true" data-dom-id="TestComponent-react-component-31df5d9f-29d0-47f6-aa01-9fcc81ffabc3">
  {
      "exampleProp": "test",
  }
</script>

Which are causing CSP console errors like this:

Executing inline script violates the following Content Security Policy directive 'script-src 'self' https:'. Either the 'unsafe-inline' keyword, a hash ('sha256-D...='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.

I do have the recommended policy policy.script_src :self, :https,, which restricts all inline scripts.

[Judahmeek]

Neither of those scripts trigger CSP, as demonstrated here. Granted, that's for ReactOnRails v14. Let me test the latest version. v16 works the same way.

policy.script_src :self, :https, does currently report a violation with our server-rendering consoleReplay script, but that's not one of the scripts you mentioned.

[TonyProkop]

Apologies, after reviewing your demo and my app again another script was at fault. I was reading the console log wrong. Thanks!

[joshuacronemeyer]

Hey Tony,

I never figured this out and we stopped using react on rails for the part of the application that needed to have CSP enabled. Also it's worth noting that for our requirements just allowing ANY https: script src was not secure enough. We needed to only allow specific domains in order to satisfy our security audits.

If you do come up with a solution to get react on rails to include the nonce please update here. I'd really appreciate it.

[Judahmeek]

There are three scripts that you would need to possibly add a nonce to the context, the application, & the consoleReplay (if server rendering).