Blazor WASM站点iOS端无法加载index.html的CSP帧祖先问题解决

1. 修正代码语法错误 #

你的代码存在两处字符串语法错误，这会引发运行时异常，iOS环境对这类错误的兼容性更差：

• 第8行：string mainUrl = "https://myurl; 缺少闭合双引号，改为：

  string mainUrl = "https://myurl";
  

• 第11行：mainUrl = https://localhost:7241; 未给URL添加引号，改为：

  mainUrl = "https://localhost:7241";
  

2. 调整内容安全策略（CSP）规则 #

当前CSP的script-src未包含'self'，而Blazor WebAssembly的核心脚本（如_blazor.webassembly.js）从本地域名加载，这会导致iOS WebKit阻止脚本执行，进而无法加载应用。同时补充其他可能遗漏的源：

修改CSP规则如下：

context.Response.Headers.Add("Content-Security-Policy",
    $"default-src 'self' {mainUrl} {oidcAuthority} " +
        "https://code.cdn.mozilla.net" +
        "https://dc.services.visualstudio.com" +
        "'unsafe-inline' 'unsafe-eval'; " +
    $"script-src 'self' 'unsafe-inline' 'unsafe-eval' {mainUrl}; " + // 添加'self'允许本地脚本加载
    $"connect-src 'self' {mainUrl} {oidcAuthority} https://code.cdn.mozilla.net;" + // 添加mainUrl允许自身API请求
    $"img-src 'self' data: {mainUrl}; " + // 修正data为标准写法data:
    $"style-src 'self' 'unsafe-inline' {mainUrl} " + // 添加'self'允许本地样式加载
        "https://code.cdn.mozilla.net" +
        ";" +
    "base-uri 'self'; " +
    "form-action 'self'; " +
    "frame-ancestors 'self';");

3. 移除错误的SameSite响应头 #

单独设置SameSite: Strict响应头不符合HTTP规范，SameSite是Cookie的属性，应在Cookie配置阶段指定（比如OIDC认证Cookie、会话Cookie）。这个多余的头会导致iOS WebKit处理异常，直接移除该行：

// 移除以下错误配置
// context.Response.Headers.Add("SameSite", "Strict");

如需设置Cookie的SameSite属性，可在ASP.NET Core的全局Cookie配置中设置：

services.Configure<CookiePolicyOptions>(options =>
{
    options.MinimumSameSitePolicy = SameSiteMode.Strict;
});

4. 验证frame-ancestors规则 #

如果你的应用不需要被嵌入到其他域名的iframe中，frame-ancestors 'self'是正确配置。若需允许特定域名嵌入，可添加对应域名，例如：

"frame-ancestors 'self' https://allowed-domain.com;"

Windows下正常运行说明该规则本身无问题，iOS加载失败的核心原因是前面的语法错误和CSP规则遗漏。

5. 额外优化（可选） #

• 移除X-XSS-Protection头：现代浏览器（包括iOS Safari）已默认启用XSS保护，该头在部分环境下可能引发兼容性问题
• 调整缓存策略：当前CacheControl完全禁止缓存，若iOS下资源加载异常，可尝试对静态资源启用缓存，仅禁止敏感页面缓存

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