OpenEnergyDashboard · huss · Apr 30, 2025 · Apr 30, 2025 · May 1, 2025 · May 1, 2025
diff --git a/src/client/app/emotionCache.ts b/src/client/app/emotionCache.ts
@@ -0,0 +1,16 @@
+/* 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/. */
+
+import createCache from '@emotion/cache';
+
+//creates the nonce for the script being run
+//the nonce works alongside the webpack_nonce and plotly_nonce to protect against unwanted scripts
+const nonce = (document.querySelector('script[nonce]') as HTMLScriptElement | null)?.nonce;
+
+const emotionCache = createCache({
+	key: 'css',
+	nonce: nonce
+});
+
+export default emotionCache;
diff --git a/src/client/app/index.tsx b/src/client/app/index.tsx
@@ -1,7 +1,7 @@
 /* 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/. */
-
+ 
 import 'bootstrap/dist/css/bootstrap.css';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -10,6 +10,38 @@ import { store } from './store';
 import RouteComponent from './components/RouteComponent';
 import { initApp } from './redux/slices/appStateSlice';
 import './styles/index.css';
+import { CacheProvider } from '@emotion/react';
+import emotionCache from './emotionCache';
+
+//these lines take the nonce, and create the webpack and plotly nonces from it
+//these are additional nonces that contribute to styling with webpack 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__;
+
+declare global {
+	interface Window {
+		__webpack_nonce__?: string;
+		__plotly_nonce__?: string;
+	}
+}
+
+
+const originalAppendChild = document.head.appendChild;
+document.head.appendChild = function (node: any) {
+	if (
+		node instanceof HTMLStyleElement
+	) {
+		node.setAttribute('nonce',__webpack_nonce__|| '');
+	}
+
+	try {
+		return originalAppendChild.call(this, node);
+	} catch (err) {
+		console.error('Failed to append style:', err);
+		throw err;
+	}
+};
 
 store.dispatch(initApp());
 
@@ -19,7 +51,9 @@ const root = createRoot(container);
 
 root.render(
 	//  Provides the Redux store to all child components
-	< Provider store={store} stabilityCheck='always' >
-		< RouteComponent />
-	</Provider >
+	<CacheProvider value={emotionCache}>
+		<Provider store={store} stabilityCheck="always">
+			<RouteComponent />
+		</Provider>
+	</CacheProvider>
 );
diff --git a/src/client/index.html b/src/client/index.html
@@ -7,21 +7,47 @@
 <html>
 
 <head>
-	<meta charset="utf-8">
-	<base id="base" href="SUBDIR" target="_blank">
-	<link rel="icon" type="image/png" href="favicon.ico">
-	<title>Open Energy Dashboard</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous">
+    <meta charset="utf-8">
+    <script nonce="{{nonce}}">
+        window.__webpack_nonce__ = "{{nonce}}";
+        window.__plotly_nonce__ = "{{nonce}}";
+        // console.log("This script runs because it has the correct nonce.");
+    </script>
+    <base id="base" href="SUBDIR" target="_blank">
+    <link rel="icon" type="image/png" href="favicon.ico">
+    <title>Open Energy Dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+        nonce="{{nonce}}">
+
+    <!--
+    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;
+    -->
+
 </head>
 
 <body>
-	<div id="root"></div>
-	<script src="app/bundle.js"></script>
-	<noscript>
-		<div style="padding:15px 15px;font-family:Helvetica;font-size:24px;background:lightcoral;border:6px solid red">
-			OED requires JavaScript to run correctly. Please enable JavaScript.
-		</div>
-	</noscript>
+    <div id="root"></div>
+
+    <script src="app/bundle.js" nonce="{{nonce}}"></script>
+
+    <noscript>
+        <div style="padding:15px 15px;font-family:Helvetica;font-size:24px;background:lightcoral;border:6px solid red">
+            OED requires JavaScript to run correctly. Please enable JavaScript.
+        </div>
+    </noscript>
 </body>
-</html>
+
+</html>
diff --git a/src/server/app.js b/src/server/app.js
@@ -32,18 +32,7 @@ const conversionArray = require('./routes/conversionArray');
 const units = require('./routes/units');
 const conversions = require('./routes/conversions');
 const ciks = require('./routes/ciks');
-const { HTTP_CODES } = require('./util/httpCodes');
-
-// Detect test environment and use higher rate limits during tests.
-// Rate limiting is critical for security in production but interferes with automated testing.
-// Using a separate test rate limiter (100x production limits) ensures the middleware is still
-// exercised during tests while preventing test failures from rate limiting.
-// 100x is certainly big enough to avoid issues and the exact value should not be important as
-// the goal is to avoid hitting rate limiting in testing.
-// Note that NODE_ENV of test should only be set for the testing environment and is done in
-// package.json in the script section for the test ones.
-const isTestEnvironment = process.env.NODE_ENV === 'test';
-const testMultiplier = isTestEnvironment ? 100 : 1;
+const crypto = require('node:crypto');
 
 // Limit the rate of overall requests to OED
 // TODO Verify that user see the message returned, see https://express-rate-limit.mintlify.app/reference/configuration#message
@@ -162,6 +151,13 @@ 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);
+
+		res.setHeader('Content-Security-Policy', `default-src 'self'; img-src 'self' data: ; font-src 'self' https://maxcdn.bootstrapcdn.com ; media-src 'self'; script-src 'self' 'nonce-${nonce}' ; style-src 'self' 'nonce-${nonce}' 'unsafe-inline';`)
+
 		res.send(htmlPlusData);
 	});
 });

diff --git a/webpack.config.js b/webpack.config.js
@@ -4,7 +4,7 @@
 
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const webpack = require('webpack');
 const path = require('path');
 
@@ -40,12 +40,22 @@ const config = {
 			// All TypeScript ('.ts' or '.tsx') will be handled by 'awesome-typescript-loader'.
 			{ test: /\.[jt]sx?$/, exclude: /node_modules/, use: 'ts-loader' },
 			// CSS stylesheet loader.
-			{ test: /\.css$/, use: [
-				{loader: 'style-loader'},
-				{loader: 'css-loader'}
-			] },
+			{
+				test: /\.css$/, use: [
+					{
+						loader: 'style-loader',
+						options: {
+							attributes: {
+								//this line allows the webpack nonce to be applied to styles
+								nonce: '__webpack_nonce__'
+							}
+						}
+					},
+					{ loader: 'css-loader' }
+				]
+			},
 			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-			{ enforce: 'pre', test: /\.js$/, use:[{loader: 'source-map-loader'}] }
+			{ enforce: 'pre', test: /\.js$/, use: [{ loader: 'source-map-loader' }] }
 		]
 	},
 	output: {