如何在Blazor WASM中渲染含Script标签的HTML并执行JS代码

原因说明 #

Blazor使用MarkupString渲染HTML时，只会解析渲染DOM元素，但不会自动执行其中的<script>标签内容——这既是浏览器的安全限制，也是Blazor渲染机制的设计逻辑，以此避免不可信脚本带来的风险。

解决步骤 #

1. 添加JS互操作方法 #

在wwwroot/index.html（或单独的JS文件）中插入以下代码，用于提取并执行HTML中的脚本：

window.executeScriptsFromHtml = function(htmlContent) {
    // 创建临时容器解析HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlContent;

    // 遍历所有script标签
    const scripts = tempDiv.querySelectorAll('script');
    scripts.forEach(script => {
        // 创建新的script元素来执行代码
        const newScript = document.createElement('script');
        
        // 复制原script的属性
        Array.from(script.attributes).forEach(attr => {
            newScript.setAttribute(attr.name, attr.value);
        });
        
        // 处理脚本内容或外部资源
        if (script.textContent) {
            newScript.textContent = script.textContent;
        } else if (script.src) {
            newScript.src = script.src;
        }
        
        // 插入到文档执行后移除
        document.head.appendChild(newScript);
        document.head.removeChild(newScript);
    });

    // 移除临时容器中的script标签，返回纯净HTML用于渲染
    tempDiv.querySelectorAll('script').forEach(s => s.remove());
    return tempDiv.innerHTML;
};

2. 修改Blazor组件代码 #

通过JS互操作处理HTML内容，先执行脚本再渲染剩余的HTML结构：

@inject IJSRuntime JSRuntime

<div>
    @if (!string.IsNullOrWhiteSpace(ProcessedHtml))
    {
        @((MarkupString)ProcessedHtml)
    }
</div>

@code {
    [Parameter] public string Html { get; set; }
    private string ProcessedHtml { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        if (!string.IsNullOrWhiteSpace(Html))
        {
            // 调用JS方法处理HTML，执行脚本并返回不含script的内容
            ProcessedHtml = await JSRuntime.InvokeAsync<string>("executeScriptsFromHtml", Html);
        }
        else
        {
            ProcessedHtml = string.Empty;
        }
    }
}

注意事项 #

• 安全风险：执行未知来源的HTML和脚本存在XSS攻击隐患，务必确保内容来自可信数据源。
• 重复执行：若组件参数Html多次更新，需添加缓存或判断逻辑，避免脚本重复执行。
• 外部脚本：若脚本引用外部src资源，需确保资源可访问，并注意加载顺序问题。

内容的提问来源于stack exchange，提问作者Hosein Ghasemi