Updated the CSP fix with improved comments

and better clarification.

Author: BrianRaymond800

src/client/app/emotionCache.ts

@@ -1,5 +1,8 @@
+//imports the createSche function from React's Emotion library
 import createCache from '@emotion/cache';
 
+//creates the nonce for the script being run
+//he nonce works alongside the webpack_nonce and plotly_nonce to protect against unwated scripts
 const nonce = (document.querySelector('script[nonce]') as HTMLScriptElement | null)?.nonce;
 
 const emotionCache = createCache({

src/client/app/index.tsx

@@ -1,13 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ //these lines take the nonce, and create the webpack and plotly nonces from it
+ //these are additional nonces that contribute to styling with webpacvk and plotly
 const __webpack_nonce__ = (document.querySelector('script[nonce]') as HTMLScriptElement | null)?.nonce;
 (window as any).__webpack_nonce__ = __webpack_nonce__;
 (window as any).__plotly_nonce__ = __webpack_nonce__;
 
-console.log('Set __webpack_nonce__ to:', __webpack_nonce__);
-
-console.log('Set nonces:', __webpack_nonce__);
 declare global {
 	interface Window {
 		__webpack_nonce__?: string;
@@ -21,7 +21,6 @@ document.head.appendChild = function (node: any) {
 	if (
 		node instanceof HTMLStyleElement
 	) {
-		console.log('Appending style, has nonce:', __webpack_nonce__);
 		node.setAttribute('nonce',__webpack_nonce__|| '');
 	}
 
@@ -32,28 +31,7 @@ document.head.appendChild = function (node: any) {
 		throw err;
 	}
 };
-// document.head.appendChild = function (node: any) {
-// 	if (node instanceof HTMLStyleElement) {
-// 		const hasNonce = node.getAttribute('nonce');
-// 		console.log('Appending style, has nonce:', hasNonce);
-
-// 		if (!hasNonce) {
-// 			const nonceToUse = window.__plotly_nonce__ || window.__webpack_nonce__ || '';
-// 			console.log('Setting nonce on style element:', nonceToUse);
-// 			node.setAttribute('nonce', nonceToUse);
-// 		}
-// 	}
-// 	try {
-// 		return originalAppendChild.call(this, node);
-// 	} catch (err) {
-// 		console.error('Failed to append style:', err, node);
-// 		throw err;
-// 	}
-// };
-console.log('Before import, __webpack_nonce__ =', __webpack_nonce__);
 import 'bootstrap/dist/css/bootstrap.css';
-console.log('BootstrapCSS Loaded');
-console.log('After import, __webpack_nonce__ =', __webpack_nonce__);
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';

src/client/index.html

@@ -23,35 +23,20 @@
 
 
     <!--
-    The meta tag with "Content-Security-Policy" below is the Content Security Policy, by having default-src as self all CSP rules that are unspecified will only 
-    allow the OED site and resources to be used/displayed. Tags like img-src, media-src, and script-src are also set to self to ensure that only 
-    resources like images, audio/videos, and scripts like JavaScript and TypeScript can only be from OED and will block any types of injections. 
-    The tag font-src is the exception to this as OED also uses a font from a bootstrapcdn.com sub-domain and has this site listed next to 'self'.
-    To test CSP rules change http-equiv=”Content-Security-Policy” to http-equiv=”Content-Security-Policy-Report-Only” this allows us to send reports of 
-    what would have been blocked without actually blocking it.
+    The meta tag with "Content-Security-Policy" below is the Content Security Policy, by having default-src as self all CSP rules that are
+    unspecified will only allow the OED site and resources to be used/displayed. Tags like img-src, media-src, and script-src are also set to self
+    to ensure that only resources like images, audio/videos, and scripts like JavaScript and TypeScript can only be from OED and will block any
+    types of injections. The tag font-src is the exception to this as OED also uses a font from a bootstrapcdn.com sub-domain and has this site
+    listed next to 'self'. To test CSP rules change http-equiv=”Content-Security-Policy” to http-equiv=”Content-Security-Policy-Report-Only” this
+    allows us to send reports of what would have been blocked without actually blocking it.
     
-    For sites using OED and are blocked by these CSP rules may add their site to the exception they may list their website link next to the tag that is blocking 
-    the user site. The site link must be added after 'self' but before the semi colon marking the end of that tag. The font-src tag is a great example on how to implement 
-    a site to the exception list. Another example for adding a site (https://newException.com) to a tag with multiple sites as an exceptions would be : 
-    img-src 'self' http://example.com https://site_example.net; becomes img-src 'self' http://example.com https://site_example.net https://newException.com;
-    -->
-    <!-- <meta http-equiv="Content-Security-Policy" content="
-    default-src 'self';
-    img-src 'self'; 
-    font-src 'self' https://maxcdn.bootstrapcdn.com; 
-    media-src 'self'; 
-    script-src 'self' 'nonce-__NONCE__';
-    style-src 'self' 'nonce-__NONCE__'; "> -->
-    
-    
-    <!-- <link rel="stylesheet" href="styles/card-page.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/DateRangeCustom.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/index.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/modal.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/react-select-css.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/spinner.css" nonce="__NONCE__">
-    <link rel="stylesheet" href="styles/tooltip.css" nonce="__NONCE__">
+    For sites using OED and are blocked by these CSP rules may add their site to the exception they may list their website link next to the tag that
+    is blocking the user site. The site link must be added after 'self' but before the semi colon marking the end of that tag. The font-src tag is a
+    great example on how to implement a site to the exception list. Another example for adding a site (https://newException.com) to a tag with
+    multiple sites as an exceptions would be : img-src 'self' http://example.com https://site_example.net; becomes img-src 'self'
+    http://example.com https://site_example.net https://newException.com;
     -->
+
 </head>
 
 <body>

src/server/app.js

@@ -148,6 +148,7 @@ router.get('*', (req, res) => {
 		const subdir = config.subdir || '/';
 		let htmlPlusData = html.toString().replace('SUBDIR', subdir);
 
+		//assigns a value to the nonce in order to check for authenticity
 		const nonce = crypto.randomBytes(16).toString('base64url')
 		htmlPlusData = htmlPlusData.replace(/{{nonce}}/g, nonce)
 

webpack.config.js

@@ -44,6 +44,7 @@ const config = {
 				{loader: 'style-loader',
 					options: {
 						attributes: {
+							//this line allows the webpack nonce to be applied to styles
 							nonce: '__webpack_nonce__'
 						}
 					}