使用html.Raw渲染含内嵌JS的HTML时<script>标签不显示问题

常见原因及处理步骤 #

• 内容安全策略（CSP）拦截
  多数后端框架（如ASP.NET Core）默认启用严格的CSP规则，会直接阻止内联脚本运行。

  • 调试阶段可临时放宽规则（不建议生产环境使用）：
    在Program.cs或Startup.cs中配置：

    app.UseCsp(options => options
        .DefaultSources(s => s.Self())
        .ScriptSources(s => s.Self().UnsafeInline())
    );
    

  • 生产环境推荐用Nonce/Hash验证：
    生成随机Nonce值，在CSP头中声明，同时给script标签添加对应属性：

    var nonce = Guid.NewGuid().ToString();
    app.UseCsp(options => options
        .ScriptSources(s => s.Self().Nonce(nonce))
    );
    

    渲染的HTML中script标签需带上nonce：

    <script nonce="@nonce">alert("hi")</script>
    

• 框架渲染机制限制（如Blazor）
  像Blazor这类框架，html.Raw仅负责静态插入HTML，不会主动解析执行动态添加的script标签。需手动触发执行：

  1. 通过JS互调执行脚本内容：

     @inject IJSRuntime JSRuntime
     <div>@(Html.Raw(yourHtmlContent))</div>
     
     @code {
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
                 await JSRuntime.InvokeVoidAsync("eval", "alert('hi')");
             }
         }
     }
     

  2. 也可以单独提取脚本内容，通过JS互调执行，避免依赖DOM中的script标签。

• 动态插入脚本的执行时机问题
  即使script标签被渲染到DOM，若为动态插入，浏览器可能不会自动执行。可通过JS手动创建并插入脚本元素：

  function runInlineScript(scriptText) {
      const scriptEl = document.createElement('script');
      scriptEl.textContent = scriptText;
      document.body.appendChild(scriptEl);
  }
  

  渲染HTML后调用该函数传入脚本内容即可。

内容的提问来源于stack exchange，提问作者Alejandro De los santos