# Content Security Policy

Embeds rely on `style` and `script` elements rendered inside the iframe. If your application uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), these elements might be blocked by your rules. To avoid this, permit the following sources in your policy. If you are installing the Checkr WebSDK library via CDN, additionally add the CDN source to the `script-src` header.

| CSP Header | Sources |  |
|  --- | --- | --- |
| frame-src | https://web-sdk-services.checkr.com |  |
| script-src | https://web-sdk-services.checkr.com | https://cdn.jsdelivr.net/npm/@checkr/web-sdk |


If you are using a Checkr staging account, you will need to add sources for Staging as well.

| CSP Header | Sources |  |
|  --- | --- | --- |
| frame-src | https://web-sdk-services.checkr-staging.com |  |
| script-src | https://web-sdk-services.checkr-staging.com | https://cdn.jsdelivr.net/npm/@checkr/web-sdk |


### cspNonce

`cspNonce` can be used to pass a [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) to all inline `style` elements rendered by Embeds.

**Note:** Nonces should be generated differently each time the page loads and should be a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator. If your site uses static html, consider using a CSP [hash](https://content-security-policy.com/hash) instead.

JavaScript
```javascript
const crypto = require('crypto')
const cspNonce = crypto.randomBytes(16).toString('base64') // '8IBTHwOdqNKAWeKl7plt8g=='

const embed = new Checkr.Embeds.NewInvitation({ cspNonce })
```

React
```jsx
const crypto = require('crypto')
const cspNonce = crypto.randomBytes(16).toString('base64') // '8IBTHwOdqNKAWeKl7plt8g=='

<NewInvitation cspNonce={cspNonce} />
```