fix(tooltip): xss in container option

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index ed10057ed07ef8d3999125785ab836fb78c38f0e..3d4e93f2b8f4dc3c4c7036e9f86805a2eba6b9ba 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -273,7 +273,7 @@ const Tooltip = (($) => {
         const attachment = this._getAttachment(placement)
         this.addAttachmentClass(attachment)
 
-        const container = this.config.container === false ? document.body : $(this.config.container)
+        const container = this.config.container === false ? document.body : $(document).find(this.config.container)
 
         $(tip).data(this.constructor.DATA_KEY, this)
 

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 91713044ab13e32be12ef58e2dbf68b34b56b96e..d81b018cc5254c9225ad7594e3794bd0f74065ef 100644 (file)
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -27,27 +27,40 @@
 
       <hr>
 
-      <p>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto">
-          Tooltip on auto
-        </button>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
-          Tooltip on top
-        </button>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
-          Tooltip on right
-        </button>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
-          Tooltip on bottom
-        </button>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
-          Tooltip on left
-        </button>
-        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
-          Tooltip with HTML
-        </button>
-      </p>
+      <div class="row">
+        <p>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto">
+            Tooltip on auto
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+            Tooltip on top
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+            Tooltip on right
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+            Tooltip on bottom
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+            Tooltip on left
+          </button>
+        </p>
+      </div>
+      <div class="row">
+        <p>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with XSS" data-container="<img src=1 onerror=alert(123) />">
+            Tooltip with XSS
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with container" data-container="#customContainer">
+            Tooltip with container
+          </button>
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+            Tooltip with HTML
+          </button>
+        </p>
+      </div>
       <div id="target" title="Test tooltip on transformed element"></div>
+      <div id="customContainer"></div>
     </div>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>