Allow nonce attribute to be set on inline script

Not all services are able to follow the currently recommended approach of using hashes to allow specific inline scripts as part of their Content Security Policy. An alternative approach is to use a nonce which requires the attribute to be set on the script itself. Introduce a new Nunjucks variable `cspNonce` for the page template to allow users to do this.
alphagov · Jun 10, 2021 · 2e40d74 · 2e40d74
1 parent 7416216
commit 2e40d74
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/govuk/template.njk b/src/govuk/template.njk
@@ -28,7 +28,7 @@
     <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
   </head>
   <body class="govuk-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
     {% block bodyStart %}{% endblock %}
 
     {% block skipLink %}

diff --git a/src/govuk/template.test.js b/src/govuk/template.test.js
@@ -165,6 +165,18 @@ describe('Template', () => {
         // updating the hash published in https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#if-your-javascript-isn-t-working-properly
         expect('sha256-' + hash).toEqual('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=')
       })
+      it('should not have a nonce attribute by default', () => {
+        const $ = renderTemplate()
+        const scriptTag = $('body > script').first()
+
+        expect(scriptTag.attr('nonce')).toEqual(undefined)
+      })
+      it('should have a nonce attribute when nonce is provided', () => {
+        const $ = renderTemplate({ cspNonce: 'abcdef' })
+        const scriptTag = $('body > script').first()
+
+        expect(scriptTag.attr('nonce')).toEqual('abcdef')
+      })
     })
 
     describe('skip link', () => {