diff --git a/.github/workflows/safe-nonce.yml b/.github/workflows/safe-nonce.yml
new file mode 100644
index 0000000..0e619ae
--- /dev/null
+++ b/.github/workflows/safe-nonce.yml
@@ -0,0 +1,28 @@
+name: Tests - safe-nonce
+
+on:
+ push:
+ branches: [ main ]
+ paths:
+ - 'src/safe-nonce/**'
+ - '.github/workflows/safe-nonce.yml'
+ pull_request:
+ branches: [ main ]
+ paths:
+ - 'src/safe-nonce/**'
+ - '.github/workflows/safe-nonce.yml'
+ workflow_dispatch:
+
+jobs:
+ test_suite:
+ runs-on: ubuntu-22.04
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20.x'
+ - run: npm ci
+ working-directory: ./src/safe-nonce
+ - run: npm test
+ working-directory: ./src/safe-nonce
diff --git a/src/safe-nonce/LICENSE b/src/safe-nonce/LICENSE
new file mode 100644
index 0000000..2e176b0
--- /dev/null
+++ b/src/safe-nonce/LICENSE
@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2023, Alexander Petros
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/src/safe-nonce/README.md b/src/safe-nonce/README.md
new file mode 100644
index 0000000..408c7d4
--- /dev/null
+++ b/src/safe-nonce/README.md
@@ -0,0 +1,67 @@
+The `safe-nonce` htmx extension can be used to improve the security of the application/web-site and help avoid XSS issues by allowing you to return known trusted inline scripts with full [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) support while blocking all other inline scripts via an appropriate [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). It improves the base security provided with the htmx.config.inlineScriptNonce feature by forcing you to provide a unique HX-Nonce response header along with the same random nonce on all trusted inline scripts to reduce the risk of untrusted script tags being allowed to run. By default htmx is designed to trust all inline scripts provided by your server when using inlineScriptNonce feature and this extension changes it to not trust them by default.
+
+This feature is not a replacement for a good secure backend server implementation where all potential user input strings are sanitized by auto-escaping or a templating engine. This is just another layer of protection you can choose to add on top if needed.
+
+## Implementation Steps
+
+1. Install the safe-nonce.js script in your page head or elsewhere
+2. Set the hx-ext attribute in the body tag of all full page requests to `safe-nonce`
+3. Generate a truly random nonce value on each server response
+4. Return the random nonce in your default-src/script-src CSP response header or in a CSP meta tag
+5. Return a htmx-config meta tag to set `safeInlineScriptNonce` to your nonce at the top of your page head (Note that htmx only reads the first htmx-config meta tag in the page so move it as high as you can)
+6. Update all inline script tags you trust to include `nonce="{random-nonce}"` attribute
+7. Return the `HX-Nonce` response header set to the value of your random nonce on all responses that have protected inline scripts
+8. Use developer tools to test your website loads without CSP warnings in console output
+
+If you only need to support inline scripts in head and not in the body that gets replaced by htmx then you do not need this extension and can implement just steps 3-6 above but instead set `allowScriptTags` config to false at step 5 and this will protect your page. If you can move all your scripts into external js files, then you do not need to support inline scripts and can set `allowScriptTags` false and set a strong CSP instead. Also consider disabling `allowEval` config value as well to improve your websites security.
+
+When partial AJAX requests are swapped into part of the page the `HX-Nonce` header will be used to update the nonce attribute of only the trusted inline scripts to match the initial page load nonce value which allows just these scripts to execute. There is nonce reuse protection so the initial page load nonce if it is discovered cannot be abused.
+
+Note It would be ideal to use the existing Content-Security-Policy header instead of a custom HX-Nonce header for this purpose but browsers only process CSP headers on full page loads and not the partial AJAX requests htmx uses.
+
+## Configuration Reference
+
+
+
+| Config Variable | Info |
+|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `htmx.config.safeInlineScriptNonce` | added by `safe-nonce` and should be set to the random nonce generated on each full page load when using this extension |
+| `htmx.config.inlineScriptNonce` | disabled by `safe-nonce`, so it does not trust and replace script nonces for all replaced content |
+| `htmx.config.inlineSlyeNonce` | defaults to `''`, meaning that no nonce will be added to inline styles. Setting this to your random nonce will allow indicator styles to work with a strong style-src CSP header |
+| `htmx.config.includeIndicatorStyles` | defaults to `true` (determines if the indicator styles are loaded) and this can be disabled instead of using `inlineStyleNonce` option |
+| `htmx.config.refreshOnHistoryMiss` | normally defaults to `false`, but set `true` by safe-nonce so that htmx will issue a full page refresh on history misses rather than use an AJAX request which will not update script nonces correctly |
+| `htmx.config.allowScriptTags` | defaults to `true`, determines if htmx will process script tags found in new content and should be disabled if you don't need this feature. If you disable this you probably do not need the `safe-nonce` extension |
+| `htmx.config.allowEval` | defaults to `true`, can be used to disable htmx's use of eval for certain features (e.g. trigger filters). Should be disabled if you don't use these features so you can remove unsafe-eval from CSP and protect you page|
+| `htmx.config.selfRequestsOnly` | defaults to `true`, whether to only allow AJAX requests to the same domain as the current document. Avoid setting this false as it has the risk of bypassing some of the protections |
+
+
+
+## Install
+
+```html
+
+```
+
+## Usage
+
+A sample initial page load response:
+
+```html
+HX-Nonce: "{random-nonce}"
+Content-Security-Policy: "default-src 'self' 'nonce-{random-nonce}'; style-src 'self' 'nonce-{random-nonce}'"
+
+ .width-nonce{ width:150px;}')
+ var div = make('
')
+ div.clientWidth.should.equal(150)
+ })
+
+ it('style without inlineStyleNonce fails to apply when CSP header set', function() {
+ document.head.insertAdjacentHTML('beforeend', '')
+ var div = make('
')
+ div.clientWidth.should.not.equal(150)
+ })
+
+ it('inlineScriptNonce sets nonce of script so it can run when CSP script nonce set', function(done) {
+ // Note inlineScriptNonce and CSP configured in index.html which applies to all tests
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', '') // increment the count by 1
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(1)
+ delete window.i
+ done()
+ }, 50)
+ })
+
+ it('inlineScriptNonce not set prevents inline scripts running because it will not match CSP', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', '') // fail to increment the count by 1
+ htmx.config.inlineScriptNonce = '' // disable inlineScriptNonce
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ htmx.config.inlineScriptNonce = 'nonce'
+ done()
+ }, 50)
+ })
+
+ it('inlineScriptNonce set wrong prevents inline scripts running because it will not match CSP', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', '') // fail to increment the count by 1
+ htmx.config.inlineScriptNonce = 'invalid' // make inlineScriptNonce invalid
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ htmx.config.inlineScriptNonce = 'nonce'
+ done()
+ }, 50)
+ })
+
+ it('safe-nonce enabled and HX-Nonce header match script nonce allows inline scripts to run', function(done) {
+ // safe-nonce overrides inlineScriptNonce function and requires the server to respond with HX-Nonce header instead
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', [200, { 'HX-Nonce': '6p1zabP/K+va3O8bi2yydg==' }, ''])
+ htmx.config.safeInlineScriptNonce = 'nonce'
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(1)
+ delete window.i
+ done()
+ }, 50)
+ })
+
+ it('safe-nonce enabled but safeInlineScriptNonce set wrong blocks inline scripts running', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', [200, { 'HX-Nonce': '6p1zabP/K+va3O8bi2yydg==' }, ''])
+ htmx.config.safeInlineScriptNonce = 'invalid' // When set to an invalid value expect inline scripts to fail
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ done()
+ }, 50)
+ })
+
+ it('safe-nonce enabled but HX-Nonce header does not match script nonce will block inline scripts', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', [200, { 'HX-Nonce': '6p1zabP/K+va3O8bi2yydg==' }, ''])
+ htmx.config.safeInlineScriptNonce = 'nonce'
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ done()
+ }, 50)
+ })
+
+ it('safe-nonce enabled but HX-Nonce header not set will block inline scripts', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', [200, {}, ''])
+ htmx.config.safeInlineScriptNonce = 'nonce'
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ done()
+ }, 50)
+ })
+
+ it('reuse of original page load nonce in scripts blocked', function(done) {
+ window.i = 0 // set count to 0
+ this.server.respondWith('GET', '/test', [200, {}, ''])
+ htmx.config.safeInlineScriptNonce = 'nonce'
+ var div = make('
')
+ div.click()
+ this.server.respond()
+
+ setTimeout(function() {
+ window.i.should.equal(0)
+ delete window.i
+ done()
+ }, 50)
+ })
+})
\ No newline at end of file
diff --git a/src/safe-nonce/test/index.html b/src/safe-nonce/test/index.html
new file mode 100644
index 0000000..f39dc15
--- /dev/null
+++ b/src/safe-nonce/test/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Mocha Tests
+ htmx.js test suite
+Version:
+
+Scratch Page
+
+
+Manual Tests
+Here
+
+Mocha Test Suite
+[ALL]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Work Area
+
+
+
+
diff --git a/src/safe-nonce/test/util.js b/src/safe-nonce/test/util.js
new file mode 100644
index 0000000..77c0c28
--- /dev/null
+++ b/src/safe-nonce/test/util.js
@@ -0,0 +1,114 @@
+/* Test Utilities */
+
+function byId(id) {
+ return document.getElementById(id)
+}
+
+function make(htmlStr) {
+ htmlStr = htmlStr.trim()
+ var makeFn = function() {
+ var range = document.createRange()
+ var fragment = range.createContextualFragment(htmlStr)
+ var wa = getWorkArea()
+ var child = null
+ var children = fragment.children || fragment.childNodes // IE
+ var appendedChildren = []
+ while (children.length > 0) {
+ child = children[0]
+ wa.appendChild(child)
+ appendedChildren.push(child)
+ }
+ for (var i = 0; i < appendedChildren.length; i++) {
+ htmx.process(appendedChildren[i])
+ }
+ return child // return last added element
+ }
+ if (getWorkArea()) {
+ return makeFn()
+ } else {
+ ready(makeFn)
+ }
+}
+
+function ready(fn) {
+ if (document.readyState !== 'loading') {
+ fn()
+ } else {
+ document.addEventListener('DOMContentLoaded', fn)
+ }
+}
+
+function getWorkArea() {
+ return byId('work-area')
+}
+
+function clearWorkArea() {
+ var workArea = getWorkArea()
+ if (workArea) workArea.innerHTML = ''
+}
+
+function removeWhiteSpace(str) {
+ return str.replace(/\s/g, '')
+}
+
+function getHTTPMethod(xhr) {
+ return xhr.requestHeaders['X-HTTP-Method-Override'] || xhr.method
+}
+
+function makeServer() {
+ var server = sinon.fakeServer.create()
+ server.fakeHTTPMethods = true
+ server.getHTTPMethod = function(xhr) {
+ return getHTTPMethod(xhr)
+ }
+ return server
+}
+
+function parseParams(str) {
+ var re = /([^&=]+)=?([^&]*)/g
+ var decode = function(str) {
+ return decodeURIComponent(str.replace(/\+/g, ' '))
+ }
+ var params = {}; var e
+ if (str) {
+ if (str.substr(0, 1) == '?') {
+ str = str.substr(1)
+ }
+ while (e = re.exec(str)) {
+ var k = decode(e[1])
+ var v = decode(e[2])
+ if (params[k] !== undefined) {
+ if (!Array.isArray(params[k])) {
+ params[k] = [params[k]]
+ }
+ params[k].push(v)
+ } else {
+ params[k] = v
+ }
+ }
+ }
+ return params
+}
+
+function getQuery(url) {
+ var question = url.indexOf('?')
+ var hash = url.indexOf('#')
+ if (hash == -1 && question == -1) return ''
+ if (hash == -1) hash = url.length
+ return question == -1 || hash == question + 1
+ ? url.substring(hash)
+ : url.substring(question + 1, hash)
+}
+
+function getParameters(xhr) {
+ if (getHTTPMethod(xhr) == 'GET') {
+ return parseParams(getQuery(xhr.url))
+ } else {
+ return parseParams(xhr.requestBody)
+ }
+}
+
+function log(val) {
+ console.log(val)
+ return val
+}
diff --git a/www/index.html b/www/index.html
index b91421e..b1fc81e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -407,6 +407,16 @@
Triggers an event whenever a back button even is detected while using hx-boost
+
+
+
+ safe-nonce
+
+
+
+ The `safe-nonce` extension can be used to improve the security of the application/web-site and help avoid XSS issues by allowing you to return known trusted inline scripts safely
+
+