Does not support Content Security Policy (CSP) nonce, only unsafe-inline css

Cannot use “script-src 'nonce-…” only supports “style-src ‘self’ ‘unsafe-inline’;”

In fullcalendar.js starting at line 11408:

// Generates an HTML attribute string for setting the width of the axis, if it is known
    AgendaView.prototype.axisStyleAttr = function () {
        if (this.axisWidth != null) {
            return 'style="width:' + this.axisWidth + 'px"'; <--------- violation will not load
        }
        return '';
    };

[arshaw]

this is no longer an issue in v5, which has just been released

[halfninja]

Demo:

https://codepen.io/halfninja/pen/dgRPzK

In the HTML head I’ve added the below, which adds a Content Security Policy (normally it would be an HTTP header). The long hashes in here are just to allow the main fullcalendar CSS and demo CSS to load in CodePen.

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'sha256-3wE6om7wsjgmaEcN8PeaBW8gFRhfuO4E3h37DMXo3cM=' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'">

You will see the problem in the console when you switch to week and day views, as it refuses to apply anything provided as a style attribute:

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘sha256-3wE6om7wsjgmaEcN8PeaBW8gFRhfuO4E3h37DMXo3cM=’ ‘nonce-EDNnf03nceIOfn39fn3e9h3sdfa’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Adding 'unsafe-inline' isn’t an option because that undermines the whole point of CSP. @codemasterover9000 has the general idea, though I know that this is not easy in practice because of how fullcalendar uses strings of HTML to pass everything around. It would be a lot easier to fix if it created DOM elements and passed those around.

To be honest I can’t actually tell any visual difference with or without these width styles being set, so I’m not sure how necessary they are.

If you’re only setting a small subset of styles like width, then a workaround could be to set a data attribute like data-width="40px" and then once you have dropped everything into innerHTML, search for any elements with that attribute and copy the value to element.style.width. Might sound a bit hacky but would avoid having to completely redesign how the library renders stuff.