fullcalendar: 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 '';
    };

calnoncecsponlyunsafeinline_15sep18

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 19 (9 by maintainers)

Commits related to this issue

replace all style= with a data-attribute that sets the style later. This is for CSP support. #4317 — committed to Grexxboxx/fullcalendar by deleted user 5 years ago
replace all style= with a data-attribute that sets the style later. This is for CSP support. #4317 — committed to Grexxboxx/fullcalendar by deleted user 5 years ago
replace all style= with a data-attribute that sets the style later. This is for CSP support. #4317 — committed to Grexxboxx/fullcalendar by deleted user 5 years ago

Most upvoted comments

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

arshaw on Jun 22, 2020

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.

halfninja on Oct 11, 2018

this is fixed in the latest v5-beta

thanks @vandernorth , your fix will be valuable for v4

arshaw on Apr 14, 2020

Nonces are explained here - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

In summary they are only for script tags, not style attributes, and it requires the server side to generate a new nonce for every HTTP request.

The only fix for style attributes containing variable styles is to replace them with the style property.

CSP is becoming the norm for deployments and is no longer a ‘weird’ environment.

halfninja on Aug 18, 2019

Current version (4.2.0) contains another CSP bug: Refused to load the font 'data:application/x-font-ttf;charset=utf-8;base64 […] because it violates the following Content Security Policy directive: “default-src ‘self’ blob:”. Note that ‘font-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

It’s caused by loading remote src url in @font-face in the core main.css file.

Please correct it, in order to YetiForceCRM could use the newest version without scss modification of forking 😉

poradz on Jul 17, 2019

Thanks for the detailed report and demo.

acerix on Oct 12, 2018

If you still have an error after enabling unsafe-inline styles, make sure that your setup doesn’t include nonces for styles, because they prevent nonce-free styles from being applied.

Example policy with nonces:

Content-Security-Policy: base-uri 'self'; [other values…] style-src 'self' https: 'unsafe-inline' 'nonce-zO0MwPmzV7TY0vV2KZrIVg=='

Example policy without nonces:

Content-Security-Policy: base-uri 'self'; [other values…] style-src 'self' https: 'unsafe-inline'

goulvench on Nov 5, 2020

This has been released in v5.2.0

If you have problem with the data: font, please upvote this issue: https://github.com/fullcalendar/fullcalendar/issues/5685 . It proposes FullCalendar switch to inline SVG icons.

arshaw on Aug 1, 2020

I’m not sure how I’d remove the inlined glyph font

Would it be possible to serve the font as a separate file? That way it would be covered by ‘self’. Another alternative would be to replace it with inline SVG.

xi on Jul 28, 2020