如何解决因内容安全策略（CSP）导致的iframe加载被拒问题？

问题概述 #

Angular前端搭配.NET后端的Web应用，此前iframe加载正常，突然出现以下问题：

• iframe区域显示提示：此内容已被阻止，请联系网站所有者修复
• 浏览器控制台报错：

  Refused to frame 'LOCAL_HOST_URL' because it violates the following Content Security Policy directive: "frame-src 'self' 'WALKME_URL'  'COMPANY_URL' 'ANOTHER_LOCAL_HOST_URL' blob: data: 'MICROSOFT_LOGIN_URL' 'KBMAX_URL' 'ONE_ANOTHER_URL' 'ATLASSIAN_URL'"
  

  已尝试在前端index.html的meta标签中添加LOCAL_HOST_URL到frame-src指令，但未生效。

解决方案 #

1. 检查.NET后端的CSP响应头配置 #

HTTP响应头中的CSP优先级高于前端meta标签配置，若后端通过响应头设置了CSP，前端meta标签的配置会被忽略。需在后端更新frame-src规则：

• .NET Core 示例（Startup.cs/Program.cs）：

  app.Use(async (context, next) =>
  {
      context.Response.Headers.Add("Content-Security-Policy", 
          "default-src 'self'; frame-src 'self' WALKME_URL COMPANY_URL ANOTHER_LOCAL_HOST_URL LOCAL_HOST_URL blob: data: MICROSOFT_LOGIN_URL KBMAX_URL ONE_ANOTHER_URL ATLASSIAN_URL");
      await next();
  });
  

• .NET Framework 示例（Web.config）：

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Content-Security-Policy" 
             value="default-src 'self'; frame-src 'self' WALKME_URL COMPANY_URL ANOTHER_LOCAL_HOST_URL LOCAL_HOST_URL blob: data: MICROSOFT_LOGIN_URL KBMAX_URL ONE_ANOTHER_URL ATLASSIAN_URL" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

2. 修正URL的CSP格式 #

CSP中，普通URL不需要加单引号（单引号仅用于'self'、'unsafe-inline'这类关键字）。若之前给LOCAL_HOST_URL加了单引号，会被识别为字面量字符串而非合法URL，需去掉单引号。

3. 强制清除浏览器缓存 #

浏览器可能缓存了旧的CSP规则，导致新配置不生效。可通过以下方式刷新：

• 按下Ctrl+Shift+R强制刷新页面
• 手动清除浏览器缓存后重新加载

4. 排查其他CSP冲突 #

确认是否存在其他CSP指令（如child-src）间接限制了iframe加载，不过根据报错信息，问题明确指向frame-src，优先排查该指令。

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