Content Security Policy (CSP)
If your application has a Content Security Policy (CSP), there are some things to consider.
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.
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
<link> tags, include the
<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
You may override this behavior by including a meta at the head of your page. It must have the name
<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.