Merge pull request #302 from browserstack/security/codeql-xss-through-dom-fixes

security: fix CodeQL js/xss-through-dom findings [CTO-4840/4841/4842/4843]

Author: vedharish

static/files/js/front.js

@@ -134,18 +134,23 @@ $(function () {
 
         $("#colour").change(function () {
 
-            if ($(this).val() !== '') {
+            var theme = $(this).val();
 
-                var theme_csspath = 'css/style.' + $(this).val() + '.css';
+            // Validate theme name is a simple identifier so a tampered <option value>
+            // cannot inject a `javascript:` URI or off-origin stylesheet URL into the
+            // <link href>. Fixes CodeQL js/xss-through-dom.
+            if (!theme || !/^[a-zA-Z0-9_-]+$/.test(theme)) {
+                return false;
+            }
 
-                alternateColour.attr("href", theme_csspath);
+            var theme_csspath = 'css/style.' + theme + '.css';
 
-                $.cookie("theme_csspath", theme_csspath, {
-                    expires: 365,
-                    path: document.URL.substr(0, document.URL.lastIndexOf('/'))
-                });
+            alternateColour.attr("href", theme_csspath);
 
-            }
+            $.cookie("theme_csspath", theme_csspath, {
+                expires: 365,
+                path: document.URL.substr(0, document.URL.lastIndexOf('/'))
+            });
 
             return false;
         });

templates/EnigmaOps/allUserAccessList.html

@@ -127,18 +127,27 @@
       x[i].style.background = "grey";
     }
     elem.style.background = "#429244";
-    title_line  = $("#access-header-row")
-    title_html = "<h4 id='header-title'>Access List for User {{username}}</h4>"
-    if(access_type.length) {
-      title_html = `<button class="btn btn-danger" data-toggle="modal" data-target="#revokeModal"
-                    onclick='revokeConfirm("module-`+access_type+`", "{{username}}")''
-                    style="float: left;" id=module-`+access_type+`>Revoke all `+ access_type+`</button>
-                    <h4 id="header-title">`+access_type+` Accesses for User {{username}}</h4>`
+    // Build the title via DOM APIs so user-controlled `access_type` is treated as
+    // text, not HTML. Fixes CodeQL js/xss-through-dom.
+    var title_line = $("#access-header-row");
+    var username = "{{username|escapejs}}";
+    title_line.empty();
+    if (access_type && access_type.length && access_type !== "other") {
+      var $btn = $('<button>', {
+        'class': 'btn btn-danger',
+        'data-toggle': 'modal',
+        'data-target': '#revokeModal',
+        'style': 'float: left;',
+        'id': 'module-' + access_type
+      }).text('Revoke all ' + access_type);
+      $btn.on('click', function () { revokeConfirm('module-' + access_type, username); });
+      title_line.append($btn);
+      title_line.append($('<h4>', { id: 'header-title' }).text(access_type + ' Accesses for User ' + username));
+    } else if (access_type === "other") {
+      title_line.append($('<h4>', { id: 'header-title' }).text('Other Access List for User ' + username));
+    } else {
+      title_line.append($('<h4>', { id: 'header-title' }).text('Access List for User ' + username));
     }
-    else if(access_type == "other"){
-      title_html = "<h4 id='header-title'>Other Access List for User {{username}}</h4>"
-    }
-    title_line.html(title_html)
   }
 
   function updateTable() {

templates/global_layout.html

@@ -225,13 +225,13 @@ <h4 class="modal-title">Add New Members</h4>
             <div>
               <select id="selectedGroup" name="group" class="form-control custom-dropdown">
                 {% for group in groups %}
-                <option value="{% url 'addUserToGroup' group %}" >{{group}}</option>
+                <option value="{{forloop.counter0}}">{{group}}</option>
                 {% endfor %}
               </select>
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" onclick="javascript:location.href=document.getElementById('selectedGroup').value">Fill Request Form</button>
+            <button type="button" class="btn btn-primary" onclick="navigateToSelectedGroup('selectedGroup')">Fill Request Form</button>
             <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
           </div>
         </div>
@@ -248,12 +248,12 @@ <h4 class="modal-title">Select Group</h4>
           <div class="modal-body">
             <select id="groupList" class="form-control custom-dropdown" name="groupName" style="width: -moz-available;width: -webkit-fill-available;">
               {% for group in groups %}
-                <option value="{% url 'groupAccessList' group %}" >{{group}}</option>
+                <option value="{{forloop.counter0}}">{{group}}</option>
               {% endfor %}
             </select>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" onclick="javascript:location.href= document.getElementById('groupList').value">Proceed</button>
+            <button type="button" class="btn btn-primary" onclick="navigateToSelectedGroup('groupList')">Proceed</button>
             <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
           </div>
         </div>
@@ -288,6 +288,29 @@ <h4 class="modal-title">Select Group</h4>
       $('.group-access-select-dropdown').dropdown();
       $('.custom-dropdown').dropdown();
     });
+
+    // Server-rendered URL allowlists keyed by the dropdown's selectedIndex.
+    // Navigation targets come from these JS literals (server-trusted reverses
+    // of the named URLs below), never from DOM text — this removes the taint
+    // flow that CodeQL js/xss-through-dom was flagging on the previous
+    // <option value> reads.
+    var SELECTED_GROUP_URLS = [{% for group in groups %}{% url 'addUserToGroup' group as g_url %}"{{ g_url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}];
+    var GROUP_LIST_URLS = [{% for group in groups %}{% url 'groupAccessList' group as g_url %}"{{ g_url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}];
+
+    function navigateToSelectedGroup(selectId) {
+      var sel = document.getElementById(selectId);
+      if (!sel) {
+        return;
+      }
+      var urls = selectId === 'selectedGroup' ? SELECTED_GROUP_URLS : (selectId === 'groupList' ? GROUP_LIST_URLS : null);
+      if (!urls) {
+        return;
+      }
+      var idx = sel.selectedIndex;
+      if (idx >= 0 && idx < urls.length) {
+        window.location.assign(urls[idx]);
+      }
+    }
   </script>
 </body>