Allow nonce attribute to be set on inline script

nataliecarey · nataliecarey · commit 2e40d744af6e · 2021-06-10T15:18:56.000+01:00
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.
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', () => {
