Merge pull request #408 from UMD-ARLIS/ext-auth

Ext auth
apache · Feb 7, 2024 · 5ab92db · 5ab92db
2 parents 8bd9b61 + 24a5ccd
commit 5ab92db
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 54 deletions.
diff --git a/build/UserALEWebExtension/background.js b/build/UserALEWebExtension/background.js
@@ -1128,6 +1128,7 @@ var defaultConfig = {
   useraleConfig: {
     url: 'http://localhost:8000',
     userId: 'pluginUser',
+    authHeader: null,
     toolName: 'useralePlugin',
     version: version
   }
@@ -1144,15 +1145,15 @@ function dispatchTabMessage(message) {
 }
 browser.runtime.onMessage.addListener(function (message) {
   switch (message.type) {
-    case CONFIG_CHANGE:
-      options(message.payload);
-      dispatchTabMessage(message);
-      break;
-
     // Handles logs rerouted from content and option scripts 
     case ADD_LOG:
       log(message.payload);
       break;
+    case CONFIG_CHANGE:
+      console.log(message);
+      options(message.payload);
+      dispatchTabMessage(message);
+      break;
     default:
       console.log('got unknown message type ', message);
   }

diff --git a/build/UserALEWebExtension/content.js b/build/UserALEWebExtension/content.js
@@ -1100,7 +1100,6 @@ function options(newConfig) {
 // browser is defined in firefox, but chrome uses the 'chrome' global.
 var browser = browser || chrome;
 function rerouteLog(log) {
-  console.log(log);
   browser.runtime.sendMessage({
     type: ADD_LOG,
     payload: log

diff --git a/build/UserALEWebExtension/options.js b/build/UserALEWebExtension/options.js
@@ -1100,7 +1100,6 @@ function options(newConfig) {
 // browser is defined in firefox, but chrome uses the 'chrome' global.
 var browser = browser || chrome;
 function rerouteLog(log) {
-  console.log(log);
   browser.runtime.sendMessage({
     type: ADD_LOG,
     payload: log
@@ -1130,33 +1129,40 @@ function rerouteLog(log) {
 addCallbacks({
   reroute: rerouteLog
 });
-function setConfig(e) {
+function setConfig() {
+  var config = {
+    url: document.getElementById("url").value,
+    userId: document.getElementById("user").value,
+    toolName: document.getElementById("tool").value,
+    version: document.getElementById("version").value
+  };
+
+  // Set a basic auth header if given credentials.
+  var password = document.getElementById("password").value;
+  if (config.userId && password) {
+    config.authHeader = "Basic " + btoa("".concat(config.userId, ":").concat(password));
+  }
   browser.storage.local.set({
-    useraleConfig: {
-      url: document.getElementById("url").value,
-      userId: document.getElementById("user").value,
-      toolName: document.getElementById("tool").value,
-      version: document.getElementById("version").value
-    }
+    useraleConfig: config
   }, function () {
-    getConfig();
+    options(config);
+    browser.runtime.sendMessage({
+      type: CONFIG_CHANGE,
+      payload: config
+    });
   });
 }
 function getConfig() {
   browser.storage.local.get("useraleConfig", function (res) {
     var config = res.useraleConfig;
+    options(config);
     document.getElementById("url").value = config.url;
     document.getElementById("user").value = config.userId;
     document.getElementById("tool").value = config.toolName;
     document.getElementById("version").value = config.version;
-    options(config);
-    browser.runtime.sendMessage({
-      type: CONFIG_CHANGE,
-      payload: config
-    });
   });
 }
-document.addEventListener('DOMContentLoaded', getConfig);
+document.addEventListener("DOMContentLoaded", getConfig);
 document.addEventListener("submit", setConfig);
 
 /* eslint-enable */
diff --git a/build/UserALEWebExtension/optionsPage.html b/build/UserALEWebExtension/optionsPage.html
@@ -25,18 +25,18 @@
 <body>
 <h1>Options</h1>
 <form>
-    <label>User ALE Server Host:</label>
+    <label>Logging Endpoint URL:</label>
     <input id="url"/>
     <br/>
-
-    <label>User ALE Client Script:</label>
-    <input id="clientScript"/>
-    <br/>
 
     <label>User:</label>
     <input id="user"/>
     <br/>
 
+    <label>Password:</label>
+    <input type="password" id="password"/>
+    <br/>
+
     <label>Tool Name:</label>
     <input id="tool"/>
     <br/>

diff --git a/src/UserALEWebExtension/background.js b/src/UserALEWebExtension/background.js
@@ -27,6 +27,7 @@ import { browser } from './globals.js';
 const defaultConfig = {useraleConfig: {
   url: 'http://localhost:8000',
   userId: 'pluginUser',
+  authHeader: null,
   toolName: 'useralePlugin',
   version: userale.version,
 }};
@@ -45,16 +46,17 @@ function dispatchTabMessage(message) {
 
 browser.runtime.onMessage.addListener(function (message) {
   switch (message.type) {
-    case MessageTypes.CONFIG_CHANGE:
-      userale.options(message.payload)
-      dispatchTabMessage(message);
-      break;
-
     // Handles logs rerouted from content and option scripts 
     case MessageTypes.ADD_LOG:
       userale.log(message.payload);
       break;
 
+    case MessageTypes.CONFIG_CHANGE:
+      console.log(message);
+      userale.options(message.payload);
+      dispatchTabMessage(message);
+      break;
+
     default:
       console.log('got unknown message type ', message);
   }

diff --git a/src/UserALEWebExtension/messageTypes.js b/src/UserALEWebExtension/messageTypes.js
@@ -15,7 +15,7 @@
 * limitations under the License.
 */
 
-var prefix = 'USERALE_';
+const prefix = 'USERALE_';
 
-export var CONFIG_CHANGE = prefix + 'CONFIG_CHANGE';
-export var ADD_LOG = prefix + 'ADD_LOG';
+export const CONFIG_CHANGE = prefix + 'CONFIG_CHANGE';
+export const ADD_LOG = prefix + 'ADD_LOG';
diff --git a/src/UserALEWebExtension/options.js b/src/UserALEWebExtension/options.js
@@ -22,34 +22,42 @@ import { rerouteLog, browser } from './globals.js';
 
 userale.addCallbacks({reroute: rerouteLog});
 
-function setConfig(e) {
-  browser.storage.local.set(
-    {useraleConfig: {
-      url: document.getElementById("url").value,
-      userId: document.getElementById("user").value,
-      toolName: document.getElementById("tool").value,
-      version: document.getElementById("version").value
-    }},
-    () => {getConfig()}
-  );
+// TODO: Warn users when setting credentials with unsecured connection.
+const mitmWarning = "Setting credentials with http will expose you to a MITM attack. Are you sure you want to continue?";
+
+function setConfig() {
+  let config = {
+    url: document.getElementById("url").value,
+    userId: document.getElementById("user").value,
+    toolName: document.getElementById("tool").value,
+    version: document.getElementById("version").value
+  };
+
+  // Set a basic auth header if given credentials.
+  const password = document.getElementById("password").value;
+  if(config.userId && password) {
+    config.authHeader = "Basic " + btoa(`${config.userId}:${password}`);
+  }
+
+  browser.storage.local.set({useraleConfig: config}, () => {
+    userale.options(config);
+    browser.runtime.sendMessage({ type: MessageTypes.CONFIG_CHANGE, payload: config });
+  });
 }
 
 function getConfig() {
   browser.storage.local.get("useraleConfig", (res) => {
     let config = res.useraleConfig;
 
+    userale.options(config);
     document.getElementById("url").value = config.url;
     document.getElementById("user").value = config.userId;
     document.getElementById("tool").value = config.toolName;
     document.getElementById("version").value = config.version;
-
-    userale.options(config);
-    browser.runtime.sendMessage({ type: MessageTypes.CONFIG_CHANGE, payload: config });
-
   });
 }
 
-document.addEventListener('DOMContentLoaded', getConfig);
+document.addEventListener("DOMContentLoaded", getConfig);
 document.addEventListener("submit", setConfig);
 
 /* eslint-enable */
diff --git a/src/UserALEWebExtension/optionsPage.html b/src/UserALEWebExtension/optionsPage.html
@@ -25,18 +25,18 @@
 <body>
 <h1>Options</h1>
 <form>
-    <label>User ALE Server Host:</label>
+    <label>Logging Endpoint URL:</label>
     <input id="url"/>
     <br/>
-
-    <label>User ALE Client Script:</label>
-    <input id="clientScript"/>
-    <br/>
 
     <label>User:</label>
     <input id="user"/>
     <br/>
 
+    <label>Password:</label>
+    <input type="password" id="password"/>
+    <br/>
+
     <label>Tool Name:</label>
     <input id="tool"/>
     <br/>