fix(client): safer HTML generating

nijel · nijel · commit 8eab6838d63c · 2026-05-07T20:33:10.000+02:00
- The URL should be sane and provided by Weblate, but add basic
  sanitization to make sure that we don't generate undesired links.
- Construct HTML in a way that XSS is not possible.
- Coverted the search preview from jQuery.
- Use CSS class for the results as there can be more of them.
diff --git a/docs/changes.rst b/docs/changes.rst
@@ -19,6 +19,7 @@ Weblate 2026.5
 
 .. rubric:: Bug fixes
 
+* Hardened search previews and :ref:`machine-translation` suggestion origins against XSS.
 * Database error details are no longer exposed in upload failure messages.
 * Category :doc:`/admin/announcements` no longer appear across the whole project.
 * Merge request pushes now refresh stale fork remotes after changing repository hosting.
diff --git a/weblate/static/editor/full.js b/weblate/static/editor/full.js
@@ -749,13 +749,17 @@
       if (typeof el.origin !== "undefined") {
         service.append(" (");
         let origin;
-        const _deleteUrl = false;
         if (typeof el.origin_detail !== "undefined") {
           origin = $("<abbr/>").text(el.origin).attr("title", el.origin_detail);
         } else if (typeof el.origin_url !== "undefined") {
-          origin = $("<a/>").text(el.origin).attr("href", el.origin_url);
+          const originUrl = WLT.URLs.getHttpUrl(el.origin_url);
+          if (originUrl === null) {
+            origin = document.createTextNode(String(el.origin));
+          } else {
+            origin = $("<a/>").text(el.origin).attr("href", originUrl);
+          }
         } else {
-          origin = el.origin;
+          origin = document.createTextNode(String(el.origin));
         }
         if (el.delete_url) {
           this.state.weblateTranslationMemory.add(el.text);
diff --git a/weblate/static/editor/tools/search.js b/weblate/static/editor/tools/search.js
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-$(document).ready(() => {
+document.addEventListener("DOMContentLoaded", () => {
   searchPreview("#replace", "#id_replace_q");
   searchPreview("#bulk-edit", "#id_bulk_q");
   searchPreview("#addon-form", "#id_bulk_q");
@@ -15,20 +15,27 @@ $(document).ready(() => {
    *
    */
   function searchPreview(searchForm, searchElement) {
-    const $searchForm = $(searchForm);
-    const $searchElement = $searchForm.find(searchElement);
+    const form = document.querySelector(searchForm);
+    const searchInput = form?.querySelector(searchElement);
+
+    if (!form || !searchInput) {
+      return;
+    }
 
     // Create the preview element
-    const $searchPreview = $('<div id="search-preview"></div>');
-    $searchElement.parent().parent().parent().after($searchPreview);
+    const searchPreview = document.createElement("div");
+    searchPreview.id = "search-preview";
+    searchInput.parentElement?.parentElement?.parentElement?.after(
+      searchPreview,
+    );
 
     let debounceTimeout = null;
 
     // Update the preview while typing with a debounce of 300ms
-    $searchElement.on("input", () => {
-      $searchPreview.show();
-      const userSearchInput = $searchElement.val();
-      const searchQuery = buildSearchQuery($searchElement);
+    searchInput.addEventListener("input", () => {
+      searchPreview.style.display = "block";
+      const userSearchInput = searchInput.value;
+      const searchQuery = buildSearchQuery(searchInput);
 
       // Clear the previous timeout to prevent the previous
       // request since the user is still typing
@@ -37,56 +44,72 @@ $(document).ready(() => {
       // fetch search results but not too often
       debounceTimeout = setTimeout(() => {
         if (userSearchInput) {
-          $.ajax({
-            url: "/api/units/",
-            method: "GET",
-            data: { q: searchQuery },
-            success: (response) => {
+          const url = `/api/units/?${new URLSearchParams({
+            q: searchQuery,
+          }).toString()}`;
+          fetch(url, {
+            headers: {
+              Accept: "application/json",
+              "X-Requested-With": "XMLHttpRequest",
+            },
+          })
+            .then((response) => {
+              if (!response.ok) {
+                return null;
+              }
+              return response.json();
+            })
+            .then((response) => {
+              if (response === null) {
+                return;
+              }
               // Clear previous search results
-              $searchPreview.html("");
-              $("#results-num").remove();
+              searchPreview.replaceChildren();
+              searchPreview.querySelector("#results-num")?.remove();
               const results = response.results;
               if (!results || results.length === 0) {
-                $searchPreview.text(gettext("No results found"));
+                searchPreview.textContent = gettext("No results found");
               } else {
                 showResults(results, response.count, searchQuery);
               }
-            },
-          });
+            });
         }
       }, 300); // If the user stops typing for 300ms, the search results will be fetched
     });
 
     // Show the preview on focus
-    $searchElement.on("focus", () => {
-      if ($searchElement.val() !== "" && $searchPreview.html() !== "") {
-        $searchPreview.show();
-        $("#results-num").show();
+    searchInput.addEventListener("focus", () => {
+      if (searchInput.value !== "" && searchPreview.innerHTML !== "") {
+        searchPreview.style.display = "block";
+        const resultsNumber = searchPreview.querySelector("#results-num");
+        if (resultsNumber) {
+          resultsNumber.style.display = "";
+        }
       }
     });
 
     // Close the preview on form submit, form reset, and form clear
     // or if there is no search query
-    $searchForm.on("input", () => {
-      if ($searchElement.val() === "") {
-        $searchPreview.hide();
-        $("#results-num").remove();
+    form.addEventListener("input", () => {
+      if (searchInput.value === "") {
+        searchPreview.style.display = "none";
+        searchPreview.querySelector("#results-num")?.remove();
       }
     });
-    $searchForm.on("submit", () => {
-      $searchPreview.html("");
-      $searchPreview.hide();
-      $("#results-num").remove();
+    form.addEventListener("submit", () => {
+      searchPreview.replaceChildren();
+      searchPreview.style.display = "none";
+      searchPreview.querySelector("#results-num")?.remove();
     });
-    $searchForm.on("reset", () => {
-      $searchPreview.html("");
-      $searchPreview.hide();
-      $("#results-num").remove();
+    form.addEventListener("reset", () => {
+      searchPreview.replaceChildren();
+      searchPreview.style.display = "none";
+      searchPreview.querySelector("#results-num")?.remove();
     });
-    $searchForm.on("clear", () => {
-      $searchPreview.html("");
-      $("#results-num").remove();
-      $searchPreview.hide();
+    form.addEventListener("clear", () => {
+      searchPreview.replaceChildren();
+      searchPreview.querySelector("#results-num")?.remove();
+      searchPreview.style.display = "none";
     });
 
     /**
@@ -103,30 +126,44 @@ $(document).ready(() => {
           ngettext("%s matching string", "%s matching strings", count),
           [count],
         );
-        const searchUrl = `/search/?q=${encodeURI(searchQuery)}`;
-        const resultsNumber = `<a href="${searchUrl}" target="_blank" rel="noopener noreferrer" id="results-num">${t}</a>`;
-        $searchPreview.append(resultsNumber);
+        const searchUrl = `/search/?${new URLSearchParams({
+          q: searchQuery,
+        }).toString()}`;
+        const resultsNumber = document.createElement("a");
+        resultsNumber.setAttribute("href", searchUrl);
+        resultsNumber.target = "_blank";
+        resultsNumber.rel = "noopener noreferrer";
+        resultsNumber.id = "results-num";
+        resultsNumber.textContent = t;
+        searchPreview.append(resultsNumber);
       } else {
-        $("#results-num").remove();
+        searchPreview.querySelector("#results-num")?.remove();
       }
 
       for (const result of results) {
         const key = result.context;
         const source = result.source;
+        const url = WLT.URLs.getLocalPath(result.web_url);
+
+        if (url === null) {
+          continue;
+        }
+
+        const resultElement = document.createElement("a");
+        resultElement.setAttribute("href", url);
+        resultElement.target = "_blank";
+        resultElement.className = "search-result";
+        resultElement.rel = "noopener noreferrer";
+
+        const keyElement = document.createElement("small");
+        keyElement.textContent = String(key);
+        resultElement.append(keyElement);
+
+        const sourceElement = document.createElement("div");
+        sourceElement.textContent = String(source);
+        resultElement.append(sourceElement);
 
-        // Make the URL relative
-        // TODO: is this regexp really needed?
-        const url = result.web_url.replace(/^[a-zA-Z]+:\/\/[^/]+\//, "/");
-        const resultHtml = `
-          <a href="${url}" target="_blank" id="search-result" rel="noopener noreferrer">
-            <small>${key}</small>
-            <div>
-              ${source.toString()}
-            </div>
-          </a>
-        `;
-
-        $searchPreview.append(resultHtml);
+        searchPreview.append(resultElement);
       }
     }
   }
@@ -137,24 +174,23 @@ $(document).ready(() => {
    * The path lookup is also added to the search query.
    * Built in the following format: `path:proj/comp filters`.
    *
-   * @param {jQuery} $searchElement - The user input.
+   * @param {HTMLInputElement|HTMLTextAreaElement} searchElement - The user input.
    * @returns {string} - The built search query string.
    *
    * */
-  function buildSearchQuery($searchElement) {
+  function buildSearchQuery(searchElement) {
     let builtSearchQuery = "";
 
     // Add path lookup to the search query
-    const projectPath = $searchElement
+    const projectPath = searchElement
       .closest("form")
-      .find("input[name=path]")
-      .val();
+      ?.querySelector("input[name=path]")?.value;
     if (projectPath) {
       builtSearchQuery = `path:${projectPath}`;
     }
 
     // Add filters to the search query
-    const filters = $searchElement.val();
+    const filters = searchElement.value;
     if (filters) {
       builtSearchQuery = `${builtSearchQuery} ${filters}`;
     }
diff --git a/weblate/static/js/urls.js b/weblate/static/js/urls.js
@@ -0,0 +1,51 @@
+// Copyright © Michal Čihař <michal@weblate.org>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: Shared Weblate namespace.
+var WLT = WLT || {};
+
+WLT.URLs = (() => {
+  function parse(url, base) {
+    try {
+      return new URL(String(url), base);
+    } catch {
+      return null;
+    }
+  }
+
+  function getLocalPath(url) {
+    const urlString = String(url).trim();
+    if (
+      urlString.startsWith("//") ||
+      (!urlString.startsWith("/") && !/^https?:\/\//i.test(urlString))
+    ) {
+      return null;
+    }
+    const parsedUrl = parse(urlString, window.location.origin);
+    if (
+      parsedUrl === null ||
+      (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:")
+    ) {
+      return null;
+    }
+    const path = parsedUrl.pathname.replace(/^\/+/, "/");
+    return `${path}${parsedUrl.search}${parsedUrl.hash}`;
+  }
+
+  function getHttpUrl(url) {
+    const parsedUrl = parse(url, window.location.href);
+    if (
+      parsedUrl === null ||
+      (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:")
+    ) {
+      return null;
+    }
+    return parsedUrl.href;
+  }
+
+  return {
+    getHttpUrl,
+    getLocalPath,
+  };
+})();
diff --git a/weblate/static/styles/main.css b/weblate/static/styles/main.css
@@ -2405,7 +2405,7 @@ tbody.warning {
   box-shadow: 1px 2px 4px #00000020;
 }
 
-#search-preview > #search-result {
+#search-preview > .search-result {
   display: block;
   padding: 5px;
   margin-bottom: 5px;
@@ -2414,11 +2414,11 @@ tbody.warning {
   border-radius: 4px;
 }
 
-#search-preview > #search-result:hover {
+#search-preview > .search-result:hover {
   background-color: #cccccc50;
 }
 
-#search-preview > #search-result > div {
+#search-preview > .search-result > div {
   margin-left: 10px;
 }
 
diff --git a/weblate/templates/base.html b/weblate/templates/base.html
@@ -79,6 +79,7 @@
       <script defer
               data-cfasync="false"
               src="{% static 'js/keyboard-shortcuts.js' %}{{ cache_param }}"></script>
+      <script defer data-cfasync="false" src="{% static 'js/urls.js' %}{{ cache_param }}"></script>
       <script defer
               data-cfasync="false"
               src="{% static 'editor/tools/search.js' %}{{ cache_param }}"></script>

Original file line number	Diff line number	Diff line change
`@@ -2405,7 +2405,7 @@ tbody.warning {`
`2405`	`2405`	`box-shadow: 1px 2px 4px #00000020;`
`2406`	`2406`	`}`
`2407`	`2407`
`2408`		`-#search-preview > #search-result {`
	`2408`	`+#search-preview > .search-result {`
`2409`	`2409`	`display: block;`
`2410`	`2410`	`padding: 5px;`
`2411`	`2411`	`margin-bottom: 5px;`
`@@ -2414,11 +2414,11 @@ tbody.warning {`
`2414`	`2414`	`border-radius: 4px;`
`2415`	`2415`	`}`
`2416`	`2416`
`2417`		`-#search-preview > #search-result:hover {`
	`2417`	`+#search-preview > .search-result:hover {`
`2418`	`2418`	`background-color: #cccccc50;`
`2419`	`2419`	`}`
`2420`	`2420`
`2421`		`-#search-preview > #search-result > div {`
	`2421`	`+#search-preview > .search-result > div {`
`2422`	`2422`	`margin-left: 10px;`
`2423`	`2423`	`}`
`2424`	`2424`