v6 breaks with a Content Security Policy containing nonces

[joostdebruijn]

Reduced Test Case

https://codepen.io/joostdeb/pen/yLqNJdj

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

No connector (vanilla JS)

Bug Description

After upgrading to v6 FullCalendar doesn't work any longer with a CSP-policy containing nonces for style-src, because style elements are created during runtime via javascript with the injectStyles() function in styleUtils.ts. This requires unsafe-inline to be present in the CSP, however this doesn't work together with a nonce.

A similar issue was present in v5: #4317, which has been fixed there.

The test case has a very simple CSP with a nonce, as you can see the styling is broken.

[arshaw]

Hi @joostdebruijn, thanks for the ticket. I'm trying to design a solution for this. Was wondering if you could give feedback.

The FullCalendar JS needs to be aware of the nonce value for the dynamically-injected <style> tags. However, for transmitting nonce values (which are always generated on the server-side) to the JS, there is no obvious convention.

In this article (see "Add metatag" section) they do it by outputting a meta tag:

<meta name="CSP-NONCE" content="random-csp-nonce"/>

One of the commentators asks a valid question:

This may be a dumb question, but what is stopping an XSS attack from grabbing the nonce value off the meta tag too?

I believe the JSS project leverages the same technique:

<meta property="csp-nonce" content="{{ styleNonce }}" />

The JSS lib looks for a meta tag with the selector meta[propert="csp-nonce"] I assume. The property name csp-nonce is hardcoded.

Will this solution work well?

What do you think about grabbing the nonce value from a hardcoded meta[propert="csp-nonce"]? Is the commenter's security concern an actual risk?

I feel like it probably is not. To get the nonce value from the meta tag, malicious JS needs to already be executing. If malicious JS is already executing, the cat's already out of the bag IMO.

[joostdebruijn]

Hi @arshaw. I was thinking about a similar solution (something like setting the nonce to use via the configuration object of FullCalendar on initialization).

Using a meta-tag would also be a good option in my opinion. I don't think this will introduce a real security risk, because - as you said - once a script is executing it also has also access to nonce-attributes of script- or style tags for example, see here. For applying inline styles it also requires the nonce to be present in the style-src / style-src-attr directives as well. So, if that's the set-up this could be a risk anyway. In the end, this is how nonces works and the CSP-spec doesn't have a better solution for such cases (yet?).

[joostdebruijn]

I was thinking about my idea to set the nonce in the configuration object, however - using a meta tag has a better developer experience. As the configuration object is normally in a script as well and that would require a way to get the nonce from somewhere (like a meta tag).

[arshaw]

Thanks for the conversation @joostdebruijn , really helpful.

Released as part of v6.1.0

I've explained it thoroughly in the docs https://fullcalendar.io/docs/content-security-policy

[joostdebruijn]

Very nice. Thanks, @arshaw!

[Alpin944]

This still doesn't work for me, after updating to 6.1.4 and following your guide.
It fails on parentEl.appendChild(style) in the function injectStylesInParent.
The problem is, that my app runs with one nonce for styles and another one for scripts.
This should be possible to fix, right @arshaw ?

[Alpin944]

@arshaw Could you fix this, so nonce for styles are found by a style, and nonce for scripts are found on a script?