Content Security Policy

[DocDBrown]

Feature Request: Add Strict Content Security Policy (CSP) Support to Dioxus Issue Description

Dioxus currently does not fully support strict CSP (Content Security Policy) due to its reliance on:

Inline event handlers (e.g., onclick=...)
JavaScript eval()-like mechanisms via wasm-bindgen
Potential inline styles/scripts injected dynamically

This prevents usage in security-sensitive applications (e.g., government, finance, enterprise environments) that require CSP compliance (disallowing unsafe-inline and unsafe-eval).

Why is this important?

Modern web security heavily relies on CSP to prevent XSS attacks and code injection.
Many production applications must enforce strict CSP for security compliance (e.g., OWASP Top 10).
Competitor frameworks (e.g., React, Angular, Solid.js) have workarounds to support CSP.

Implementation Suggestion Potential Approaches

Remove Inline Event Handlers
    Instead of onclick="...", use addEventListener() via Rust's event delegation.
    Example:

    let button = document().get_element_by_id("my-btn").unwrap();
    button.add_event_listener_with_callback("click", my_handler);

Ensure Wasm Execution Works Without unsafe-eval
    Modify wasm-bindgen glue code to allow module-based Wasm instantiation instead of eval().
    Example: Use WebAssembly.instantiateStreaming(fetch(...)) instead of new Function(...).

Sanitize Dynamic Content Rendering
    Ensure that dangerously_set_inner_html() is opt-in and disabled by default.
    Introduce automatic HTML escaping for unsafe elements.

Provide Secure Template Rendering as an Alternative
    Offer an opt-in precompiled template system that doesn't require runtime JavaScript execution.

Offer a csp-safe Mode for Dioxus Apps
    Introduce a configuration flag (csp_safe: true) to:
        Disable unsafe JS-based dynamic updates.
        Restrict wasm-bindgen interactions to CSP-compliant methods.
        Enforce sanitized component rendering.

Prior Art / Related Work

Solid.js's CSP workarounds: Uses fine-grained reactivity instead of Virtual DOM updates.
React’s CSP compliance: Avoids inline event handlers and provides explicit CSP settings.
WebAssembly best practices: Many frameworks precompile templates to avoid dynamic script execution.

[MatiasHiltunen]

Would the use of skia/wgpu rendering backend for browsers solve this CSP issue?

[DocDBrown]

I think you are correct