Blazor Interop Security

Implement sandboxing techniques to protect JS Interop from malicious script injection.

In this lesson, you will learn how to implement sandboxing techniques to prevent malicious script injection when bridging the gap between C# and JavaScript.

When you pass data from Blazor to JavaScript via IJSRuntime, you are essentially crossing a trust boundary. If you naively pass strings that are later executed using functions like eval() or inserted directly into the DOM via innerHTML, you open your application to Cross-Site Scripting (XSS) attacks. Even if the data comes from a "trusted" C# backend, that data could have been compromised at the database level.

The Sandboxing Approach: Data Serialization

The golden rule of Blazor Interop security is: Treat all data passing into JavaScript as untrusted.

Instead of passing raw, executable strings, always pass your data as structured JSON objects. When you invoke InvokeVoidAsync or InvokeAsync, Blazor automatically serializes your C# objects into JSON. By consuming these as standard objects in JavaScript, you avoid the need to use dangerous functions like eval() or new Function().

Implementing the Pattern

Imagine you are passing a user's display name to a JavaScript notification system.

Avoid this:

// DANGEROUS: Executes whatever string is passed
function notify(htmlString) {
    document.getElementById('container').innerHTML = htmlString; 
}

Adopt this (Sandboxing): Instead of sending HTML, send only the raw text and use safe DOM methods:

// SAFE: Uses textContent to avoid script execution
function notify(data) {
    const el = document.getElementById('container');
    el.textContent = data.message; // Browser treats this strictly as text
}

Sanitization Strategy

If you absolutely must render HTML, use a client-side sanitization library like DOMPurify within your JavaScript interop layer. Before assigning any string to an element's property, pass the input through the sanitizer:

import DOMPurify from 'dompurify';

window.safeRender = (dirtyHtml) => {
    const clean = DOMPurify.sanitize(dirtyHtml);
    document.getElementById('content').innerHTML = clean;
};

By ensuring that the JavaScript side of your interop never interprets data as code and strictly sanitizes any dynamic HTML, you create a robust sandbox that protects your Blazor application from injection attacks.

Key Takeaway: Never execute raw strings from C# as JavaScript; always treat Interop data as plain text or use a robust sanitization library before updating the DOM.