iosfullcalendarmobile-safaricontent-security-policynonce

Fullcalendar.io not working with CSP nonce on safari Browser


I am using FullCalendar.io in my Asp.Net core web app. Also I have setup CSP with NetEscapades.AspNetCore.SecurityHeaders. Here are the definitions:

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();
});

My calendar is very basic:

$(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();
});

On chrome (windows) this works fine. But on iOS and macOS with safari, the calendar is not being displayed.

Error message: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear int the style-src directive of the Content Security Policy. (Index, line 1)

After this there is a TypeError: null is not an object (evaluating 'i.cssRules').

I did read: Fullcalendar.io's Content Security Policy (CSP).

Anyone know why this does not work on safari?

Content-Security-Policy Header:

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:


Solution

  • I have managed to fix it by putting „.WithNonce“ on the default src CSP as well.