Nonce Tag Helper

CSP nonces allow you to whitelist specific inline scripts and styles without using 'unsafe-inline'. CSP Manager provides a tag helper that automatically injects a cryptographically secure per-request nonce into your tags and includes it in the CSP header.

For background on nonces, see the nonce guide on content-security-policy.com.

Nonces require a unique value per request. If your pages are served through a CDN or reverse proxy that caches HTML, cached nonces will not match the CSP header and inline scripts/styles will be blocked. See Caching & Nonces before enabling nonces in a cached environment.

Setup

Add the tag helper namespace to your _ViewImports.cshtml:

@addTagHelper *, Umbraco.Community.CSPManager

Adding a Nonce

Add csp-manager-add-nonce="true" to any <script>, <style>, or <link> tag:

<script csp-manager-add-nonce="true">
  doWhatever();
</script>

<style csp-manager-add-nonce="true">
  .alert { color: red; }
</style>

<link csp-manager-add-nonce="true" rel="stylesheet" href="/styles.css">

The tag helper injects a nonce attribute with a unique value, and CSP Manager includes the matching nonce in the script-src or style-src directive of the CSP header:

<!-- Rendered output (nonce values are auto-generated per request): -->
<script nonce="abc123xyz">
  doWhatever();
</script>

<style nonce="abc123xyz">
  .alert { color: red; }
</style>

<link nonce="abc123xyz" rel="stylesheet" href="/styles.css">

A single nonce is shared across all <script>, <style>, and <link> tags in the same request. CSP Manager adds it to both script-src and style-src in the response header.

Policies using script-src-elem or style-src-elem

Browsers that support script-src-elem and style-src-elem consult those directives for a <script>, <style>, or <link> tag and ignore script-src and style-src for them. Older browsers only know the broader directive. CSP Manager therefore adds the nonce to every configured directive in each pair, so nonced tags work in both:

Configured directives	Nonce added to
script-src	script-src
script-src-elem	script-src-elem
script-src and script-src-elem	both

The same applies to style-src and style-src-elem. If neither directive in a pair is configured, the nonce is not added and a warning is logged, because creating the directive from scratch would block every other source.

A nonce in a directive makes browsers ignore 'unsafe-inline' in that same directive. If your site relies on inline event handlers (onclick="...") or style="..." attributes alongside nonces, grant 'unsafe-inline' through script-src-attr or style-src-attr, which the nonce never touches.

Nonce as a Data Attribute

If you need to read the nonce value in JavaScript (e.g., to dynamically create elements), add csp-manager-add-nonce-data-attribute="true" alongside csp-manager-add-nonce="true":

<script csp-manager-add-nonce="true" csp-manager-add-nonce-data-attribute="true"></script>
<style csp-manager-add-nonce="true" csp-manager-add-nonce-data-attribute="true"></style>

The tag helper only runs on tags that carry csp-manager-add-nonce. On its own, csp-manager-add-nonce-data-attribute does nothing.

This adds a data-nonce attribute alongside the nonce attribute:

<script nonce="abc123xyz" data-nonce="abc123xyz"></script>
<style nonce="abc123xyz" data-nonce="abc123xyz"></style>

How Nonces Work

• A single nonce is generated per HTTP request using a cryptographically secure random number generator
• The same nonce value is used for all <script>, <style>, and <link> tags on the page
• The nonce is automatically included in every configured script-src / script-src-elem and style-src / style-src-elem directive in the outgoing Content-Security-Policy header
• Nonces are generated regardless of whether the policy is in enforcing or report-only mode