docs: add nonce to configuration (#451)

QwikDev · Sep 8, 2023 · 05eca46 · 05eca46 · vercel · Sep 8, 2023
1 parent 46e1776
commit 05eca46
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -11,6 +11,7 @@ Partytown does not require a config for it to work, however a config can be set
 | `lib`        | Path where the Partytown library can be found your server. Note that the path must both start and end with a `/` character, and the files must be hosted from the same origin as the webpage. Default is `/~partytown/`   |
 | `loadScriptsOnMainThread` | An array of strings used to filter out which script are executed via Partytown and the main thread. An example is as follows: `loadScriptsOnMainThread: ["https://test.com/analytics.js", "inline-script-id"]`.|
 | `resolveUrl` | Hook that is called to resolve URLs which can be used to modify URLs. The hook uses the API: `resolveUrl(url: URL, location: URL, method: string)`. See the [Proxying Requests](/proxying-requests) for more information. |
+| `nonce` | The nonce property may be set on script elements created by Partytown. This should be set only when dealing with content security policies and when the use of `unsafe-inline` is disabled (using `nonce-*` instead). |
 
 ## Vanilla Config
 

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -498,6 +498,26 @@ export interface PartytownConfig {
    * The nonce property may be set on script elements created by Partytown.
    * This should be set only when dealing with content security policies
    * and when the use of `unsafe-inline` is disabled (using `nonce-*` instead).
+   *
+   * Given the following example:
+   * ```html
+   * <head>
+   *   <script nonce="THIS_SHOULD_BE_REPLACED">
+   *     partytown = {
+   *       nonce: 'THIS_SHOULD_BE_REPLACED'
+   *     };
+   *   </script>
+   * </head>
+   * ```
+   *
+   * The `nonce` property should be generated by the server, and it should be unique
+   * for each request. You can leave a placeholder, as shown in the above example,
+   * to facilitate replacement through a regular expression on the server side.
+   * For instance, you can use the following code:
+   *
+   * ```js
+   * html.replace(/THIS_SHOULD_BE_REPLACED/g, nonce);
+   * ```
    */
   nonce?: string;
 }