FullCalendar.io搭配CSP Nonce在Safari浏览器无法显示求助

我在Asp.Net Core Web应用中集成FullCalendar.io，并通过NetEscapades.AspNetCore.SecurityHeaders配置了内容安全策略（CSP）。该功能在Windows系统的Chrome浏览器中运行正常，但在iOS和macOS的Safari浏览器中无法显示日历，出现以下报错：

拒绝应用样式表，因为其哈希值、nonce或'unsafe-inline'未出现在内容安全策略（CSP）的style-src指令中。(Index, 第1行)
TypeError：null不是对象（计算'i.cssRules'时）

我的CSP配置代码 #

policy.AddContentSecurityPolicy(builder =>
{
    builder.AddDefaultSrc().Self();
    builder.AddConnectSrc()
        .From("wss://localhost:*")
        .From("ws://localhost:*")
        .From("https://localhost:*")
        .From("http://localhost:*")
        .Self();

    builder.AddObjectSrc().Self();
    builder.AddBlockAllMixedContent();
    builder.AddImgSrc().Self().From("data:").OverHttps();
    builder.AddFormAction().Self().OverHttps();
    builder.AddFontSrc().Self().From("data:").OverHttps();
    builder.AddStyleSrc()
        .Self()
        ////.UnsafeInline()
        .WithNonce()
        .OverHttps();
    builder.AddScriptSrc()
        .Self()
        .WithNonce()
        .OverHttps();
    builder.AddBaseUri().Self().OverHttps();
    builder.AddFrameAncestors().Self().OverHttps();
    builder.AddWorkerSrc().Self().OverHttps();
    builder.AddManifestSrc().Self().OverHttps();
});

日历初始化代码 #

$(document).ready(function () {
    var antiForgeryToken = $('input[name = "AFTFFINNIA"]').val();
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'de-CH',
        firstDay: 1,
        height: "auto",
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        events: {
            url: '/Kalender/Termine',
            method: 'POST',
            extraParams: {
                AFTFFINNIA: antiForgeryToken
            },
        },
    });

    calendar.render();
});

当前实际生效的CSP请求头 #

style-src 'self' https: 'nonce-+1v9CuQxiH8qkVG0PK4Lo/D/kV0oI2jIw7Eb2xxemXY='; 
script-src 'self' https: 'nonce-+1v9CuQxiH8qkVG0PK4Lo/D/kV0oI2jIw7Eb2xxemXY='; 
default-src 'self'; 
connect-src wss://localhost:* ws://localhost:* https://localhost:* http://localhost:* 'self'; 
object-src 'self'; 
block-all-mixed-content; 
img-src 'self' data: https:; 
form-action 'self' https:; font-src 'self' data: https:; 
base-uri 'self' https:; 
frame-ancestors 'self' https:; 
worker-src 'self' https:; 
manifest-src 'self' https:

问题原因分析 #

1. Safari对CSP nonce的兼容性差异：Safari在处理带nonce的style-src指令时，对FullCalendar动态注入的内联样式识别逻辑与Chrome不同，即使配置了nonce，仍会阻止这类样式加载。
2. 样式加载失败触发连锁报错：当样式被CSP拦截后，FullCalendar内部尝试访问cssRules属性时，对应的样式对象为null，从而抛出TypeError，导致日历无法正常渲染。

解决方案 #

• 临时兼容方案：在style-src中添加'unsafe-inline'（注意：此操作会降低CSP安全性，仅作为临时调试或兼容手段），取消CSP配置中////.UnsafeInline()的注释即可。
• 优化nonce传递逻辑：确保页面中所有动态生成的样式标签都正确携带nonce属性，Asp.Net Core需保证nonce在每个请求中唯一且正确注入到HTML的样式、脚本标签内。
• 升级FullCalendar版本：更新到FullCalendar最新稳定版，新版本可能已修复Safari下的CSP兼容问题。
• 强制外部样式加载：确保FullCalendar样式通过外部CSS文件引入，避免依赖动态内联样式，减少CSP冲突概率。

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