Prevent `getSelector` from returning URLs as selector (#32586)

* added checks to getSelector in util to prevent returning hrefs that are invalid selectors

* restored compatibility for the class selector and added test cases for keeping urls from being returned as a selector

Co-authored-by: XhmikosR <[email protected]>

1 files changed, 14 insertions, 1 deletions

diff --git a/js/src/util/index.js b/js/src/util/index.js
index 22d0a578b..bd519cce0 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -36,7 +36,20 @@ const getSelector = element => {
   let selector = element.getAttribute('data-bs-target')
 
   if (!selector || selector === '#') {
-    const hrefAttr = element.getAttribute('href')
+    let hrefAttr = element.getAttribute('href')
+
+    // The only valid content that could double as a selector are IDs or classes,
+    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
+    // `document.querySelector` will rightfully complain it is invalid.
+    // See https://github.com/twbs/bootstrap/issues/32273
+    if (!hrefAttr || (!hrefAttr.includes('#') && !hrefAttr.startsWith('.'))) {
+      return null
+    }
+
+    // Just in case some CMS puts out a full URL with the anchor appended
+    if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
+      hrefAttr = '#' + hrefAttr.split('#')[1]
+    }
 
     selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
   }