Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mention downsides of nonces in CSP #220

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

mention downsides of nonces in CSP #220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions _docs-v6/intro/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,17 @@ FullCalendar's icon-font is embedded into its CSS with a `data:` protcol. You mu

## 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](https://content-security-policy.com/nonce/).
FullCalendar injects its own `<style>` tags onto the page. Your CSP might prohibit this. A workaround is to use a [nonce value](https://content-security-policy.com/nonce/).

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:

```html
<meta http-equiv='Content-Security-Policy' content="default-src 'nonce-abc123'; font-src data:">
<meta http-equiv='Content-Security-Policy' content="default-src …; style-src 'nonce-abc123'; font-src data:">
```

Then, when writing your application's `<script>` and `<link>` tags, include the `nonce` attribute:

```html
<script src='fullcalendar/dist/index.js' nonce='abc123'></script>
<script src='app/index.js' nonce='abc123'></script>
<script src='fullcalendar/dist/index.js'></script>
<script src='app/index.js'></script>
```

Starting with **v6.1.0**, FullCalendar is able to output nonce values.
Expand All @@ -43,4 +41,4 @@ You may override this behavior by including a meta at the head of your page. It
<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.
For nonce values to be secure, they must be randomly generated on the server and only used once. Also note that nonces can allow attackers to bypass all other restrictions from the CSP. Consult documentation elsewhere on the web for best practices, e.g. [in the specification](https://www.w3.org/TR/CSP3/#security-considerations).