Make site work without `unsafe-inline` CSP

Is your feature request related to a problem? Please describe.

I’ve been setting up a Content Security Policy (CSP) for a react-static site and I’ve noticed that the way static html is generated currently requires script-src 'unsafe-inline' and style-src 'unsafe-inline'; policies. Adding these policies opens up XSS and other attack vectors, so I’d prefer if the site worked without these policies.

Looking at a react-static-example-basic site, there are two issues. One is an inline script with the route info:

<script type="text/javascript">
    window.__routeInfo = JSON.parse("{\"template\":\"READACTED/my-static-site/src/pages/index.js\",\"sharedHashesByProp\":{},\"data\":{},\"path\":\"/\",\"sharedData\":{},\"siteData\":{}}");
</script>

And two divs with the following inline style:

<div style="outline:none" tabindex="-1" role="group">

Describe the solution you’d like

It would be great if there was an option to not to include the inline script and load the route info from the routeInfo.json at the cost of performance. I’m not sure where the outline:none style comes from and why it’s necessary, but it would be great if that could be excluded somehow as well.

Describe alternatives you’ve considered

For the inline script, one could compute its hash and insert a meta tag with the CSP option script-src '<hash-algorithm>-<base64-value>';, but I’m not sure how this would play with additional CSP configurations eg. from headers.

Happy to provide a PR with some guidance 😃

[agostbiro]

@buddhamangler-cbre I had a look and found this function, but I haven’t found any usages and it’s been two years so I can’t guarantee that it works:

function getCSPString(inlineScripts) {
  let scriptSources = ''
  for (let k in inlineScripts) {
    scriptSources += `'${inlineScripts[k].hash}'`
  }
  // TODO (abiro) remove style unsafe inline
  // Solution: https://github.com/reach/router/issues/63#issuecomment-575748441
  const csp = `
  default-src 'none'; 
  prefetch-src 'self';
  script-src 'self' ${scriptSources};
  connect-src 'self' https://api.example.com https://cognito-idp.us-west-2.amazonaws.com;
  img-src 'self'; 
  style-src 'self' 'unsafe-inline';
  base-uri 'self';
  frame-ancestors 'none';
  form-action 'self';
  `.replace(/(?:\r\n|\r|\n)/g, ' ')

  return csp
}

inlineScripts should be the same object that you get from Document.state in static.config.js.

[agostbiro]

Hi @owenschoppe this feature is just to give you the hashes of the inline scripts generated by react-static at build time. You can then add these hashes to your CSP at build time to restrict scripts. The Document.state object is not meant to be set in the configuration file, it’s something that react-static populates dynamically at build time to give you access to some internals like the inline script hashes in this case. Hope this helps!