How Do I set a CSP Nonce Using webpack?

Question

I need to add a nonce to the inline scripts created by webpack and I can't find any documentation on how to configure this. I've found this pr: https://github.com/webpack/webpack/pull/3210/files but I can't figure out how to set __webpack_nonce__ in my dev environment.

Tress

It's over 4 years later and despite the docs improving and my spending many hours on the issue, I've never gotten this working. – Littles

Answer 1

You can set the nonce value using the __webpack_nonce__ property. In a project with React, Umbraco, and Razor pages, I handled it in the master.cshtml page like this:

var xNonce = HttpContext.Current.Response.Headers.GetValues("X-Nonce")?.First();

<script type="application/javascript" nonce="@xNonce">
   __webpack_nonce__ = "@xNonce";
</script>

Shrine