pull/17338/head
Rich Harris 1 week ago
parent 22dda42eaa
commit 2c289a9a06

@ -68,8 +68,11 @@ All data returned from a `hydratable` function must be serializable. But this do
`hydratable` adds an inline `<script>` block to the `head` returned from `render`. If you're using [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) (CSP), this script will likely fail to run. You can provide a `nonce` to `render`:
```ts
// @errors: 2304 2708
```js
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';
// ---cut---
const nonce = crypto.randomUUID();
const { head, body } = await render(App, {
@ -80,6 +83,10 @@ const { head, body } = await render(App, {
This will add the `nonce` to the script block, on the assumption that you will later add the same nonce to the CSP header of the document that contains it:
```js
/// file: server.js
let response = new Response();
let nonce = 'xyz123';
// ---cut---
response.headers.set(
'Content-Security-Policy',
`script-src 'nonce-${nonce}'`
@ -91,7 +98,10 @@ It's essential that a `nonce` — which, British slang definition aside, means '
If instead you are generating static HTML ahead of time, you must use hashes instead:
```js
// @errors: 2304 2708
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';
// ---cut---
const { head, body, hashes } = await render(App, {
csp: { hash: true }
});
@ -100,6 +110,10 @@ const { head, body, hashes } = await render(App, {
`hashes.script` will be an array of strings like `["sha256-abcd123"]`. As with `nonce`, the hashes should be used in your CSP header:
```js
/// file: server.js
let response = new Response();
let hashes = { script: ['sha256-xyz123'] };
// ---cut---
response.headers.set(
'Content-Security-Policy',
`script-src ${hashes.script.map((hash) => `'${hash}'`).join(' ')}`

Loading…
Cancel
Save