feat: add CSP with nonce support (#2478)

Author: andreituicu

src/server/HeadHtmlSupport.js

@@ -31,6 +31,12 @@ export default class HeadHtmlSupport {
     const update = (obj, keys) => {
       keys.sort();
       for (const k of keys) {
+        if (k === 'nonce') {
+          // ignore nonce attribute, because it can change on every request
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         let v = obj[k];
         if (v !== undefined) {
           if (Array.isArray(v)) {

src/server/utils.js

@@ -89,19 +89,21 @@ const utils = {
     if (match) {
       const { index } = match;
       // eslint-disable-next-line no-param-reassign
+      const nonceMatch = body.match(/nonce="([a-zA-Z0-9+/=]+)"/);
+      const nonce = nonceMatch ? ` nonce="${nonceMatch[1]}"` : '';
       let newbody = body.substring(0, index);
       if (process.env.CODESPACES === 'true') {
-        newbody += `<script>
+        newbody += `<script${nonce}>
 window.LiveReloadOptions = { 
   host: new URL(location.href).hostname.replace(/-[0-9]+\\.preview\\.app\\.github\\.dev/, '-35729.preview.app.github.dev'), 
   port: 443,
   https: true,
 };
 </script>`;
       } else {
-        newbody += `<script>window.LiveReloadOptions={port:${server.port},host:location.hostname,https:${server.scheme === 'https'}};</script>`;
+        newbody += `<script${nonce}>window.LiveReloadOptions={port:${server.port},host:location.hostname,https:${server.scheme === 'https'}};</script>`;
       }
-      newbody += '<script src="/__internal__/livereload.js"></script>';
+      newbody += `<script${nonce} src="/__internal__/livereload.js"></script>`;
       newbody += body.substring(index);
       return newbody;
     }