From ab458e7143f7256fa37b0478aa1c87cb7a500ff3 Mon Sep 17 00:00:00 2001
From: Marcos Pereira <marcos.silva@gmail.com>
Date: Wed, 15 May 2024 14:06:40 -0400
Subject: [PATCH] feat: Add inlineSlyeNonce configuration (#2542)

---
 src/htmx.d.ts            | 1 +
 src/htmx.js              | 9 ++++++++-
 www/content/api.md       | 1 +
 www/content/docs.md      | 1 +
 www/content/reference.md | 1 +
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/htmx.d.ts b/src/htmx.d.ts
index 36ee4ca4..3775459f 100644
--- 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
index 34fb33f3..46a7fb86 100644
--- 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
index 1a1a39ed..70eae99b 100644
--- 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
index 433b4b6a..97356229 100644
--- 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
index c4a192df..8f3d58be 100644
--- 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            |