feat: Add inlineSlyeNonce configuration (#2542)

bigskysoftware · May 15, 2024 · ab458e7 · ab458e7
1 parent dc93911
commit ab458e7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/src/htmx.d.ts b/src/htmx.d.ts
@@ -36,6 +36,7 @@ declare namespace htmx {
         const allowEval: boolean;
         const allowScriptTags: boolean;
         const inlineScriptNonce: string;
+        const inlineStyleNonce: string;
         const attributesToSettle: string[];
         const withCredentials: boolean;
         const timeout: number;

diff --git a/src/htmx.js b/src/htmx.js
@@ -164,6 +164,12 @@ var htmx = (function() {
        * @default ''
        */
       inlineScriptNonce: '',
+      /**
+       * If set, the nonce will be added to inline styles.
+       * @type string
+       * @default ''
+       */
+      inlineStyleNonce: '',
       /**
        * The attributes to settle during the settling phase.
        * @type string[]
@@ -4866,8 +4872,9 @@ var htmx = (function() {
 
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
+      const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style>\
+        '<style' + nonceAttribute + '>\
       .' + htmx.config.indicatorClass + '{opacity:0}\
       .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
       .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\

diff --git a/www/content/api.md b/www/content/api.md
@@ -120,6 +120,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
 * `allowEval:true` - boolean: allows the use of eval-like functionality in htmx, to enable `hx-vars`, trigger conditions & script tag evaluation.  Can be set to `false` for CSP compatibility.
 * `allowScriptTags:true` - boolean: allows script tags to be evaluated in new content
 * `inlineScriptNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline scripts
+* `inlineStyleNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline styles
 * `withCredentials:false` - boolean: allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates
 * `timeout:0` - int: the number of milliseconds a request can take before automatically being terminated
 * `wsReconnectDelay:'full-jitter'` - string/function: the default implementation of `getWebSocketReconnectDelay` for reconnecting after unexpected connection loss by the event code `Abnormal Closure`, `Service Restart` or `Try Again Later`

diff --git a/www/content/docs.md b/www/content/docs.md
@@ -1643,6 +1643,7 @@ listed below:
 | `htmx.config.allowEval`               | defaults to `true`, can be used to disable htmx's use of eval for certain features (e.g. trigger filters)                                                                                                                                                                                                                                         |
 | `htmx.config.allowScriptTags`         | defaults to `true`, determines if htmx will process script tags found in new content                                                                                                                                                                                                                                                              |
 | `htmx.config.inlineScriptNonce`       | defaults to `''`, meaning that no nonce will be added to inline scripts                                                                                                                                                                                                                                                                           |
+| `htmx.config.inlineStyleNonce`        | defaults to `''`, meaning that no nonce will be added to inline styles                                                                                                                                                                                                                                                                            |
 | `htmx.config.wsReconnectDelay`        | defaults to `full-jitter`                                                                                                                                                                                                                                                                                                                         |
 | `htmx.config.disableSelector`         | defaults to `[disable-htmx], [data-disable-htmx]`, htmx will not process elements with this attribute on it or a parent                                                                                                                                                                                                                           |
 | `htmx.config.timeout`                 | defaults to 0 in milliseconds                                                                                                                                                                                                                                                                                                                     |

diff --git a/www/content/reference.md b/www/content/reference.md
@@ -233,6 +233,7 @@ listed below:
 | `htmx.config.allowEval`               | defaults to `true`, can be used to disable htmx's use of eval for certain features (e.g. trigger filters)                                                                  |
 | `htmx.config.allowScriptTags`         | defaults to `true`, determines if htmx will process script tags found in new content                                                                                       |
 | `htmx.config.inlineScriptNonce`       | defaults to `''`, meaning that no nonce will be added to inline scripts                                                                                                    |
+| `htmx.config.inlineSlyeNonce`         | defaults to `''`, meaning that no nonce will be added to inline styles                                                                                                     |
 | `htmx.config.attributesToSettle`      | defaults to `["class", "style", "width", "height"]`, the attributes to settle during the settling phase                                                                    |
 | `htmx.config.wsReconnectDelay`        | defaults to `full-jitter`                                                                                                                                                  |
 | `htmx.config.wsBinaryType`            | defaults to `blob`, the [the type of binary data](https://developer.mozilla.org/docs/Web/API/WebSocket/binaryType) being received over the WebSocket connection            |