A enhanced secure Blazor iFrame component with built-in origin validation, bidirectional messaging, navigation tracking, and comprehensive security features.
$ dotnet add package BlazorFrame
A security-first Blazor iframe component with automatic resizing, cross-frame messaging, and comprehensive Content Security Policy integration.
dotnet add package BlazorFrame@using BlazorFrame
<!-- Simple iframe with automatic security -->
<BlazorFrame Src="https://example.com" />
<!-- Production-ready configuration with bidirectional communication and navigation tracking -->
<BlazorFrame @ref="iframeRef"
Src="https://widget.example.com"
EnableNavigationTracking="true"
SecurityOptions="@securityOptions"
OnValidatedMessage="HandleMessage"
OnNavigation="HandleNavigation"
OnSecurityViolation="HandleViolation" />
<button @onclick="SendDataToIframe">Send Data</button>
@code {
private BlazorFrame? iframeRef;
private readonly MessageSecurityOptions securityOptions = new MessageSecurityOptions()
.ForProduction() // Strict security settings
.WithBasicSandbox() // Enable iframe sandboxing
.RequireHttps(); // Enforce HTTPS transport
private Task HandleMessage(IframeMessage message)
{
Console.WriteLine($"Received message from {message.Origin}: {message.Data}");
return Task.CompletedTask;
}
private Task HandleNavigation(NavigationEvent navigation)
{
Console.WriteLine($"Navigation to: {navigation.Url}");
Console.WriteLine($"Query params: {string.Join(", ", navigation.QueryParameters)}");
return Task.CompletedTask;
}
private Task HandleViolation(IframeMessage violation)
{
Console.WriteLine($"Security violation: {violation.ValidationError}");
return Task.CompletedTask;
}
private async Task SendDataToIframe()
{
if (iframeRef != null)
{
await iframeRef.SendTypedMessageAsync("user-data", new { userId = 123, name = "John" });
}
}
}// Development environment - relaxed security
var devOptions = new MessageSecurityOptions()
.ForDevelopment()
.WithPermissiveSandbox();
// Production environment - strict security
var prodOptions = new MessageSecurityOptions()
.ForProduction()
.WithStrictSandbox()
.ValidateAndThrow();
// Payment widgets - maximum security
var paymentOptions = new MessageSecurityOptions()
.ForPaymentWidget();<BlazorFrame Src="https://widget.example.com"
CspOptions="@cspOptions"
OnCspHeaderGenerated="HandleCspGenerated" />
@code {
private readonly CspOptions cspOptions = new CspOptions()
.ForProduction()
.AllowFrameSources("https://widget.example.com")
.WithScriptNonce("secure-nonce-123");
private Task HandleCspGenerated(CspHeader cspHeader)
{
// Apply CSP header to HTTP response
// HttpContext.Response.Headers.Add(cspHeader.HeaderName, cspHeader.HeaderValue);
return Task.CompletedTask;
}
}Comprehensive CSP integration for defense-in-depth security:
All iframe messages are automatically validated for:
| Level | Description | Use Case |
|---|---|---|
| None | No restrictions | Trusted content only |
| Basic | Scripts + same-origin | Most trusted widgets |
| Permissive | + forms + popups | Interactive widgets |
| Strict | Scripts + same-origin only | Display widgets |
| Paranoid | Scripts only | Untrusted content |
Interactive Demo - Try different security configurations live
This project is licensed under the MIT License.
Built with :heart: for the Blazor community