Implement security improvements and add security audit report

Co-authored-by: softchris <4598064+softchris@users.noreply.github.com>

5-browser-extension/solution/dist/manifest.json

@@ -2,7 +2,9 @@
 	"manifest_version": 3,
 	"name": "My Carbon Trigger",
 	"version": "0.1.0",
-	"host_permissions": ["<all_urls>"],
+	"host_permissions": [
+		"https://api.co2signal.com/v1/*"
+	],
 	"background": {
 		"service_worker": "background.js"
 	},

5-browser-extension/solution/package.json

@@ -24,6 +24,6 @@
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"axios": "^1.7.4"
+		"axios": "^1.6.0"
 	}
 }

5-browser-extension/solution/src/index.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { storeApiKey, getApiKey, storeRegion, getRegion, clearStoredData } from './security.js';
 
 // form fields
 const form = document.querySelector('.form-data');
@@ -68,8 +69,8 @@ const displayCarbonUsage = async (apiKey, region) => {
 
 // set up api key and region
 const setUpUser = async (apiKey, region) => {
-	localStorage.setItem('apiKey', apiKey);
-	localStorage.setItem('region', region);
+	storeApiKey(apiKey);
+	storeRegion(region);
 	loading.style.display = 'block';
 	errors.textContent = '';
 	clearBtn.style.display = 'block';
@@ -86,8 +87,8 @@ const handleSubmit = async (e) => {
 //initial checks
 const init = async () => {
 	//if anything is in localStorage, pick it up
-	const storedApiKey = localStorage.getItem('apiKey');
-	const storedRegion = localStorage.getItem('region');
+	const storedApiKey = getApiKey();
+	const storedRegion = getRegion();
 
 	//set icon to be generic green
 	chrome.runtime.sendMessage({
@@ -116,7 +117,7 @@ const init = async () => {
 const reset = async (e) => {
 	e.preventDefault();
 	//clear local storage for region only
-	localStorage.removeItem('region');
+	clearStoredData('region');
 	init();
 };
 

5-browser-extension/solution/src/security.js

@@ -0,0 +1,79 @@
+/**
+ * Security utilities for the browser extension
+ * 
+ * SECURITY NOTE: In a production environment, you should use the Chrome extension's
+ * chrome.storage.sync API with proper encryption rather than localStorage for sensitive data.
+ * https://developer.chrome.com/docs/extensions/reference/storage/
+ */
+
+/**
+ * Securely store an API key
+ * @param {string} apiKey - The API key to store
+ */
+export const storeApiKey = (apiKey) => {
+  // SECURITY NOTE: In production, implement additional protection
+  // such as encryption before storage
+  try {
+    // For educational purposes, we're still using localStorage
+    localStorage.setItem('apiKey', apiKey);
+    console.log('API key stored (Note: localStorage is not secure for sensitive data)');
+  } catch (error) {
+    console.error('Error storing API key:', error);
+  }
+};
+
+/**
+ * Retrieve a stored API key
+ * @returns {string|null} The stored API key or null if not found
+ */
+export const getApiKey = () => {
+  try {
+    return localStorage.getItem('apiKey');
+  } catch (error) {
+    console.error('Error retrieving API key:', error);
+    return null;
+  }
+};
+
+/**
+ * Store region information
+ * @param {string} region - The region to store
+ */
+export const storeRegion = (region) => {
+  try {
+    localStorage.setItem('region', region);
+  } catch (error) {
+    console.error('Error storing region:', error);
+  }
+};
+
+/**
+ * Retrieve stored region information
+ * @returns {string|null} The stored region or null if not found
+ */
+export const getRegion = () => {
+  try {
+    return localStorage.getItem('region');
+  } catch (error) {
+    console.error('Error retrieving region:', error);
+    return null;
+  }
+};
+
+/**
+ * Clear stored security information
+ * @param {string} key - The specific key to clear (optional)
+ */
+export const clearStoredData = (key) => {
+  try {
+    if (key) {
+      localStorage.removeItem(key);
+    } else {
+      // Be careful with clear() as it removes all data
+      localStorage.removeItem('apiKey');
+      localStorage.removeItem('region');
+    }
+  } catch (error) {
+    console.error('Error clearing stored data:', error);
+  }
+};