Handling editor-injected JavaScript in Umbraco v17 with Umbraco Community CSPManager

A Practical Guide to Noncing Script Tags Coming From the CMS

Content Security Policy (CSP) is one of the most effective security layers you can add to an Umbraco website — but it can also be one of the most painful when your editors need to embed arbitrary JavaScript.

In Umbraco v17, I recently had to implement a CSP‑safe way of allowing editors to insert script snippets like this directly into the CMS:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> 
<div x-data="{ count: 0 }" style="margin:20px;"> 
  <button @click="count++">Increment</button> 
  <span style="margin-left:10px;">Count: <strong x-text="count"></strong></span> 
</div> 

This content comes from Umbraco itself — not my Razor files — which means I cannot simply use:

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

because that attribute only works for scripts I control inside views or partials.

This blog explains the exact steps I used to solve this by injecting a CSP nonce into editor-supplied script tags automatically.

The Challenge

If you use Umbraco.Community.CSPManager, adding a nonce to your own scripts is easy:

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

But this doesn’t solve the problem when script tags come from the CMS itself, e.g.:

• Block List content

• RTE fields

• Custom embed code fields

• Grid components

• Head/Body embed fields

Because these script tags are output as raw HTML, the CSPManager never sees them.

The Goal

Ensure that every <script> tag coming from the CMS automatically gets a CSP nonce:

<script nonce="RANDOM_VALUE" src="…"></script>

so the browser allows it even when script-src is using strict CSP settings like:

script-src 'self' 'strict-dynamic' 'nonce-xyz';

Without the nonce, the browser simply blocks the script.

Solution Overview

The fix is simple and elegant:

1. Get the CSP nonce from CSPManager in your view using ICspService.

2. Take the editor-supplied embed code string.

3. Automatically replace <script with <script nonce="THE_NONCE".

4. Output the modified markup.

Step-by-Step Implementation Guide

Step 1 — Install Umbraco.Community.CSPManager

If you haven’t already:

dotnet add package Umbraco.Community.CSPManager

Step 2 — Create an Umbraco Property for Editor Embed Code

Your document type might have a property like:

• Alias: embedCode

• Type: TextArea

This is where the editor places script tags.

Step 3 — Update Your Razor View to Inject CSP Nonces

Here’s the full working Razor code:

@using UmbV17CSPManager.Models
@inherits UmbracoViewPage<Home>
@using Umbraco.Community.CSPManager.Services
@inject ICspService CspService 
@{ 
Layout = "master.cshtml"; 
// Generate or get the existing nonce for this request 
var scriptNonce = CspService.GetOrCreateCspScriptNonce(Context); 
// Get embed code from Umbraco and inject nonce into every <script> tag 
var content = Model.EmbedCode?.Replace("<script", $"<script nonce=\"{scriptNonce}\"");
} 
@Html.Raw(content)

Security Notes

1. Only use this technique on trusted editor fields
Never auto-inject nonces into public user-supplied data.

2. Use a strong CSP policy with 'strict-dynamic'

3. Avoid unsafe-inline
Adding a nonce eliminates the need for unsafe settings.

Final Thoughts

This approach is ideal when:

• You want strong CSP security

• You give editors freedom to embed script tags

• You use Umbraco.Community.CSPManager

• Your scripts are not controlled in Razor files

By injecting the nonce dynamically, you get the best of both worlds:

• Flexible editor experience

• Strong CSP compliance

• Simple, maintainable code

Thanks For Reading and Supporting.