Merge pull request #4636 from nichwall/multiselect_duplicate_entries

Fix: MultiSelect causes web client to become unresponsive if duplicate keys exist

client/components/ui/MultiSelect.vue

@@ -4,10 +4,11 @@
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" role="list" style="min-height: 36px" class="flex-wrap relative w-full shadow-xs flex items-center border border-gray-600 rounded-sm px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
-          <div v-for="item in selected" :key="item" role="listitem" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
+          <!-- Use index in v-for and key in case the same key exists multiple times -->
+          <div v-for="(item, idx) in selected" :key="item + '-' + idx" role="listitem" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
             <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg/75 flex items-center justify-end opacity-0 hover:opacity-100" :class="{ 'opacity-100': inputFocused }">
               <button v-if="showEdit" type="button" :aria-label="$strings.ButtonEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</button>
-              <button type="button" :aria-label="$strings.ButtonRemove" class="material-symbols text-white hover:text-error focus:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)" @keydown.enter.stop.prevent="removeItem(item)" @focus="setInputFocused(true)" @blur="setInputFocused(false)" tabindex="0">close</button>
+              <button type="button" :aria-label="$strings.ButtonRemove" class="material-symbols text-white hover:text-error focus:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item, idx)" @keydown.enter.stop.prevent="removeItem(item, idx)" @focus="setInputFocused(true)" @blur="setInputFocused(false)" tabindex="0">close</button>
             </div>
             {{ item }}
           </div>
@@ -259,8 +260,9 @@ export default {
       }
       this.focus()
     },
-    removeItem(item) {
-      var remaining = this.selected.filter((i) => i !== item)
+    removeItem(item, idx) {
+      var remaining = this.selected.slice()
+      remaining.splice(idx, 1)
       this.$emit('input', remaining)
       this.$emit('removedItem', item)
       this.$nextTick(() => {

server/auth/OidcAuthStrategy.js

@@ -527,7 +527,16 @@ class OidcAuthStrategy {
 
       // For absolute URLs, ensure they point to the same origin
       const callbackUrlObj = new URL(callbackUrl)
-      const currentProtocol = req.secure || req.get('x-forwarded-proto') === 'https' ? 'https' : 'http'
+      // NPM appends both http and https in x-forwarded-proto sometimes, so we need to check for both
+      const xfp = (req.get('x-forwarded-proto') || '').toLowerCase()
+      const currentProtocol =
+        req.secure ||
+        xfp
+          .split(',')
+          .map((s) => s.trim())
+          .includes('https')
+          ? 'https'
+          : 'http'
       const currentHost = req.get('host')
 
       // Check if protocol and host match exactly