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:
I have managed to fix it by putting „.WithNonce“ on the default src CSP as well.