Content Security Policy (CSP)
If your application has a Content Security Policy (CSP), there are some things to consider.
Icon Font
FullCalendar’s icon-font is embedded into its CSS with a data: protcol. You must whitelist the data: protocol for fonts:
<meta http-equiv='Content-Security-Policy' content="font-src data:">
This ticket proposes moving to SVG icons to avoid this problem.
Dynamically-Generated Styles
FullCalendar injects its own <style> tags onto the page. Your CSP might prohibit this. The solution is to use a nonce value.
On your server, generate a random nonce value (abc123 in this example). Then, register it with your CSP. The following line achieves this while also whitelisting the icon-font mentioned above:
<meta http-equiv='Content-Security-Policy' content="default-src 'nonce-abc123'; font-src data:">
Then, when writing your application’s <script> and <link> tags, include the nonce attribute:
<script src='fullcalendar/dist/index.js' nonce='abc123'></script>
<script src='app/index.js' nonce='abc123'></script>
Starting with v6.1.0, FullCalendar is able to output nonce values.
By default, FullCalendar will scan for the first nonce attribute it sees in any <script> tag. It will use this nonce value when injecting its own <style> tags, essentially outputting <style nonce='abc123'>.
You may override this behavior by including a meta at the head of your page. It must have the name csp-nonce:
<meta name='csp-nonce' content='qwerty456' />
For nonce values to be secure, they must be randomly generated on the server and only used once. Consult documentation elsewhere on the web for best practices.