diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
index 0e75b6873..211670721 100644
--- a/src/pat/inject/inject.js
+++ b/src/pat/inject/inject.js
@@ -467,29 +467,32 @@ const inject = {
         /* Called after the XHR has succeeded and we have a new $sources
          * element to inject.
          */
-        const wrapper = document.createElement("template");
-        if ($sources.length > 0) {
-            const method = cfg.sourceMod === "content" ? "innerHTML" : "outerHTML";
-            // There might be multiple sources, so we need to loop over them.
-            // Access them with "innerHTML" or "outerHTML" depending on the sourceMod.
-            const sources_string = [...$sources].map(source => source[method]).join("\n");
-            wrapper.innerHTML = sources_string;
-
-            for (const img of wrapper.content.querySelectorAll("img")) {
-                events.add_event_listener(
-                    img,
-                    "load",
-                    "inject_img_load",
-                    (e) => {
-                        $(e.currentTarget).trigger("pat-inject-content-loaded");
-                    },
-                    { once: true }
-                );
+        const fragment = document.createDocumentFragment();
+        for (const [index, source] of [...$sources].entries()) {
+            if (index > 0) {
+                fragment.append(document.createTextNode("\n"));
+            }
+            const content = source.nodeName === "TEMPLATE" ? source.content : source;
+            const nodes = cfg.sourceMod === "content" ? content.childNodes : [source];
+            for (const node of nodes) {
+                fragment.append(node.cloneNode(true));
             }
         }
 
-        // Copy, because after insertion wrapper.children is empty.
-        const source_nodes = [...wrapper.content.childNodes];
+        for (const img of fragment.querySelectorAll("img")) {
+            events.add_event_listener(
+                img,
+                "load",
+                "inject_img_load",
+                (e) => {
+                    $(e.currentTarget).trigger("pat-inject-content-loaded");
+                },
+                { once: true }
+            );
+        }
+
+        // Keep references before insertion empties the fragment.
+        const source_nodes = [...fragment.childNodes];
 
         // Now the injection actually happens.
         if (this._inject(trigger, source_nodes, target, cfg)) {
@@ -664,8 +667,7 @@ const inject = {
             error_page_fragment = error_page_fragment ? `#${error_page_fragment}` : null;
 
             if (error_page_fragment) {
-                error_page = document.createElement("html");
-                error_page.innerHTML = event.jqxhr.responseText;
+                error_page = await this._sanitizeHtml(event.jqxhr.responseText || "");
                 error_page = error_page.querySelector(error_page_fragment);
             }
 
@@ -674,8 +676,9 @@ const inject = {
                     const error_page_response = await fetch(error_page_url, {
                         method: "GET",
                     });
-                    error_page = document.createElement("html");
-                    error_page.innerHTML = await error_page_response.text();
+                    error_page = await this._sanitizeHtml(
+                        await error_page_response.text()
+                    );
                     error_page = error_page.querySelector(error_page_fragment || "body");
                 } catch {
                     // fall back to standard error message and ignore.
@@ -696,7 +699,7 @@ const inject = {
 
         if (error_page) {
             const error_zone = document.querySelector(error_page_fragment || "body");
-            error_zone.innerHTML = error_page.innerHTML;
+            error_zone.replaceChildren(...error_page.childNodes);
             registry.scan(error_zone); // initialize any patterns in error page
         } else {
             const msg_attr = `${explanation} Status is ${status} ${event.jqxhr.statusText}, time was ${timestamp}. You can click to close this.`;
@@ -832,40 +835,47 @@ const inject = {
         return true;
     },
 
-    _sourcesFromHtml(html, url, sources) {
-        const $html = this._parseRawHtml(html, url);
-        return sources.map((source) => {
-            if (source === "body") {
-                source = "#__original_body";
-            }
-            if (source === "none") {
+    async _sourcesFromHtml(html, url, sources) {
+        const source_dom = await this._parseRawHtml(html, url);
+
+        return sources.map((source_selector) => {
+            if (source_selector === "none") {
                 return $("<!-- -->");
             }
-            const $source = $html.find(source);
 
-            if ($source.length === 0) {
-                if (source != "title") {
-                    log.warn("No source elements for selector:", source, $html);
+            const source_result = dom.querySelectorAllAndMe(source_dom, source_selector);
+            const $source = $(source_result);
+
+            if (source_result.length === 0) {
+                if (source_selector != "title") {
+                    log.warn(
+                        "No source elements for selector:",
+                        source_selector,
+                        source_dom
+                    );
                 }
             }
 
-            $source.find('a[href^="#"]').each((idx, el_) => {
-                const href = el_.getAttribute("href");
+            for (const anchor of dom.querySelectorAllAndMe(
+                source_result,
+                'a[href^="#"]'
+            )) {
+                const href = anchor.getAttribute("href");
                 if (href.indexOf("#{1}") !== -1) {
                     // We ignore hrefs containing #{1} because they're not
                     // valid and only applicable in the context of
                     // pat-clone.
-                    return;
+                    continue;
                 }
                 // Skip in-document links pointing to an id that is inside
                 // this fragment.
                 if (href.length === 1) {
                     // Special case for top-of-page links
-                    el_.href = url;
-                } else if (!$source.find(href).length) {
-                    el_.href = url + href;
+                    anchor.href = url;
+                } else if (!dom.querySelectorAllAndMe(source_result, href).length) {
+                    anchor.href = url + href;
                 }
-            });
+            }
             return $source;
         });
     },
@@ -895,16 +905,12 @@ const inject = {
         return base.slice(0, base.lastIndexOf("/") + 1) + url;
     },
 
-    _rebaseHTML(base, html) {
-        if (html === "") {
+    _rebaseHTML(base, page) {
+        if (!page) {
             // Special case, source is none
             return "";
         }
 
-        // Parse the html string into a DOM tree.
-        const page = document.createElement("div");
-        page.innerHTML = html;
-
         // Create efficient selector for any tag with it's corresponding
         // attribute from _rebaseAttrs. Note: the current data structure allows
         // only for one attribute to be rebased per tag.
@@ -968,33 +974,20 @@ const inject = {
             }
         }
 
-        return page.innerHTML.trim();
+        return page;
     },
 
-    _parseRawHtml(html, url = "") {
-        // remove script tags and head and replace body by a div
-        const title = html.match(/\<title\>(.*)\<\/title\>/);
-        let clean_html = html
-            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
-            .replace(/<head\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/head>/gi, "")
-            .replace(/<html([^>]*?)>/gi, "")
-            .replace(/<\/html([^>]*?)>/gi, "")
-            .replace(/<body([^>]*?)>/gi, '<div id="__original_body">')
-            .replace(/<\/body([^>]*?)>/gi, "</div>");
-
-        if (title && title.length == 2) {
-            clean_html = title[0] + clean_html;
-        }
-        try {
-            clean_html = this._rebaseHTML(url, clean_html);
-        } catch (e) {
-            log.error("Error rebasing urls", e);
-        }
-        const $html = $("<div/>").html(clean_html);
-        if ($html.children().length === 0) {
-            log.warn("Parsing html resulted in empty jquery object:", clean_html);
-        }
-        return $html;
+    async _sanitizeHtml(html) {
+        const dompurify = (await import("dompurify")).default;
+        return dompurify.sanitize(html, {
+            WHOLE_DOCUMENT: true,
+            RETURN_DOM: true,
+        });
+    },
+
+    async _parseRawHtml(html, url = "") {
+        const sanitized = await this._sanitizeHtml(html);
+        return this._rebaseHTML(url, sanitized);
     },
 
     _initAutoloadVisible($el, cfgs) {
@@ -1119,10 +1112,10 @@ const inject = {
 
     handlers: {
         html: {
-            sources(cfgs, data) {
+            async sources(cfgs, data) {
                 const sources = cfgs.map((cfg) => cfg.source);
                 sources.push("title");
-                const result = this._sourcesFromHtml(data, cfgs[0].url, sources);
+                const result = await this._sourcesFromHtml(data, cfgs[0].url, sources);
                 return result;
             },
         },
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
index 9850a8821..abf971555 100644
--- a/src/pat/inject/inject.test.js
+++ b/src/pat/inject/inject.test.js
@@ -338,9 +338,16 @@ describe("pat-inject", function () {
     });
 
     describe("5 - rebaseHTML", function () {
+        const rebaseHtml = (url, html) => {
+            const page = new DOMParser().parseFromString(html, "text/html");
+            const root = page.documentElement;
+            expect(pattern._rebaseHTML(url, root)).toBe(root);
+            return page.body.innerHTML.trim();
+        };
+
         it("5.1 - Basic markup with DOCTYPE", function () {
             expect(
-                pattern._rebaseHTML(
+                rebaseHtml(
                     "base",
                     "<!DOCTYPE html>\n<p>This is a simple <em>test</em></p>"
                 )
@@ -348,20 +355,20 @@ describe("pat-inject", function () {
         });
 
         it("5.2 - Basic markup", function () {
-            expect(
-                pattern._rebaseHTML("base", "<p>This is a simple <em>test</em></p>")
-            ).toBe("<p>This is a simple <em>test</em></p>");
+            expect(rebaseHtml("base", "<p>This is a simple <em>test</em></p>")).toBe(
+                "<p>This is a simple <em>test</em></p>"
+            );
         });
 
         it("5.3 - Recover from unclosed tags", function () {
-            expect(pattern._rebaseHTML("base", "<p>This is a simple <em>test</p>")).toBe(
+            expect(rebaseHtml("base", "<p>This is a simple <em>test</p>")).toBe(
                 "<p>This is a simple <em>test</em></p>"
             );
         });
 
         it("5.4 - Anchor element without href attribute", function () {
             var spy_rebaseURL = jest.spyOn(pattern, "_rebaseURL");
-            expect(pattern._rebaseHTML("base", "<a>This is a test</a>")).toBe(
+            expect(rebaseHtml("base", "<a>This is a test</a>")).toBe(
                 "<a>This is a test</a>"
             );
             expect(spy_rebaseURL).not.toHaveBeenCalled();
@@ -371,7 +378,7 @@ describe("pat-inject", function () {
 
         it("5.5 - Anchor element with href attribute", function () {
             expect(
-                pattern._rebaseHTML(
+                rebaseHtml(
                     "http://example.com/test/",
                     '<a href="subsite/page.html">This is a test</a>'
                 )
@@ -382,7 +389,7 @@ describe("pat-inject", function () {
 
         it("5.6 - Automatically fix casing of attribute", function () {
             expect(
-                pattern._rebaseHTML(
+                rebaseHtml(
                     "http://example.com/test/",
                     '<a HrEF="subsite/page.html">This is a test</a>'
                 )
@@ -392,14 +399,14 @@ describe("pat-inject", function () {
         });
 
         it("5.7 - Check if image is rebased correctly", function () {
-            expect(
-                pattern._rebaseHTML("http://example.com/test/", '<img src="image.png">')
-            ).toBe('<img src="http://example.com/test/image.png">');
+            expect(rebaseHtml("http://example.com/test/", '<img src="image.png">')).toBe(
+                '<img src="http://example.com/test/image.png">'
+            );
         });
 
         it("5.8 - Leave non attribute occurences of src intact", function () {
             expect(
-                pattern._rebaseHTML(
+                rebaseHtml(
                     "base",
                     "<p>This string has    src = \"foo\" , src= bar , and SrC='foo'</p>"
                 )
@@ -412,7 +419,7 @@ describe("pat-inject", function () {
             await import("../date-picker/date-picker");
             await import("../datetime-picker/datetime-picker");
 
-            const res = pattern._rebaseHTML(
+            const res = rebaseHtml(
                 "https://example.com/test/",
                 `<div class="test1" data-pat-inject="loading-class:yeah;url:./index.html;class:hoy"/>
                  <div class="test2" data-pat-calendar="url: ./calendar.html; event-sources: ../calendar2.json, ./test/calendar3.json"/>
@@ -449,7 +456,7 @@ describe("pat-inject", function () {
             // tests for an error where a semicolon at the end of a pattern
             // config as well as multiple configs were not correctly parsed.
 
-            const res = pattern._rebaseHTML(
+            const res = rebaseHtml(
                 "https://example.com/test/",
                 `<div
                     class="test1"
@@ -491,7 +498,7 @@ describe("pat-inject", function () {
         it("5.11 - doesn't rebase invalid pattern configuration options", async () => {
             await import("../calendar/calendar");
 
-            const res = pattern._rebaseHTML(
+            const res = rebaseHtml(
                 "https://example.com/test/",
                 '<div id="test" data-pat-calendar="url: ; event-sources: ../calendar2.json"/>'
             );
@@ -511,23 +518,128 @@ describe("pat-inject", function () {
     });
 
     describe("6 - parseRawHtml", function () {
-        it("6.1 - Roundtrip attributes with double quotes", function () {
+        it("6.1 - Roundtrip attributes with double quotes", async function () {
             var value =
                     '{"plugins": "paste", "content_css": "/_themes/Style/tiny-body.css"}',
                 input = "<a data-tinymce-json='" + value + "'>Test</a>",
-                $output = pattern._parseRawHtml(input, null);
-            expect($output.find("a").attr("data-tinymce-json")).toBe(value);
+                output = await pattern._parseRawHtml(input, null);
+            expect(output.querySelector("a").getAttribute("data-tinymce-json")).toBe(
+                value
+            );
         });
 
-        it("6.2 - Roundtrip attributes with single quotes", function () {
+        it("6.2 - Roundtrip attributes with single quotes", async function () {
             var value =
                     "{'plugins': 'paste', 'content_css': '/_themes/Style/tiny-body.css'}",
                 input = '<a data-tinymce-json="' + value + '">Test</a>',
-                $output = pattern._parseRawHtml(input, null);
-            expect($output.find("a").attr("data-tinymce-json")).toBe(value);
+                output = await pattern._parseRawHtml(input, null);
+            expect(output.querySelector("a").getAttribute("data-tinymce-json")).toBe(
+                value
+            );
         });
     });
 
+    describe("Sanitized response sources", () => {
+        it("removes unsafe markup before rebasing and preserves pattern attributes", async () => {
+            const rebase = pattern._rebaseHTML.bind(pattern);
+            jest.spyOn(pattern, "_rebaseHTML").mockImplementation((url, root) => {
+                expect(root.querySelector("script")).toBeNull();
+                expect(root.querySelector("img").hasAttribute("onerror")).toBe(false);
+                expect(root.querySelector("a").hasAttribute("href")).toBe(false);
+                return rebase(url, root);
+            });
+            const root = await pattern._parseRawHtml(
+                `
+                <title>Safe title</title>
+                <div class="pat-example" data-pat-example="value: test" aria-label="Example">
+                    <script>alert(1)</script>
+                    <img src="image.png" onerror="alert(1)">
+                    <a href="javascript:alert(1)">Link</a>
+                </div>
+            `,
+                "https://example.com/page"
+            );
+            expect(root.querySelector("title").textContent).toBe("Safe title");
+            expect(
+                root.querySelector(".pat-example").getAttribute("data-pat-example")
+            ).toBe("value: test");
+            expect(root.querySelector(".pat-example").getAttribute("aria-label")).toBe(
+                "Example"
+            );
+            expect(root.querySelector("img").getAttribute("src")).toBe(
+                "https://example.com/image.png"
+            );
+        });
+
+        it("rebases hash links while preserving local targets and clone placeholders", async () => {
+            const [source] = await pattern._sourcesFromHtml(
+                `
+                <section id="source">
+                    <a href="#{1}">Clone</a>
+                    <a href="#">Top</a>
+                    <a href="#outside">Outside</a>
+                    <a href="#inside">Inside</a>
+                    <a href="#source">Source root</a>
+                    <span id="inside"></span>
+                </section>
+            `,
+                "https://example.com/page",
+                ["#source"]
+            );
+            expect(
+                [...source[0].querySelectorAll("a")].map((a) => a.getAttribute("href"))
+            ).toEqual([
+                "#{1}",
+                "https://example.com/page",
+                "https://example.com/page#outside",
+                "#inside",
+                "#source",
+            ]);
+        });
+
+        it("rebases an anchor selected as the source itself", async () => {
+            const [source] = await pattern._sourcesFromHtml(
+                '<a id="source" href="#outside">Link</a>',
+                "https://example.com/page",
+                ["#source"]
+            );
+            expect(source[0].getAttribute("href")).toBe(
+                "https://example.com/page#outside"
+            );
+        });
+
+        it.each(["content", "element"])(
+            "clones %s independently for multiple targets",
+            async (sourceMod) => {
+                const [source] = await pattern._sourcesFromHtml(
+                    '<section id="source">Text<!-- comment --><strong>Safe</strong></section>',
+                    "/page",
+                    ["#source"]
+                );
+                jest.spyOn(pattern, "_afterInjection").mockImplementation(() => {});
+                jest.spyOn(pattern, "_update_history").mockImplementation(() => {});
+                const targets = [
+                    document.createElement("div"),
+                    document.createElement("div"),
+                ];
+                for (const target of targets) {
+                    pattern._performInjection(target, $(), source, {
+                        sourceMod,
+                        action: "content",
+                    });
+                }
+                const expected =
+                    sourceMod === "content" ? source[0].innerHTML : source[0].outerHTML;
+                expect(targets[0].innerHTML).toBe(expected);
+                expect(targets[1].innerHTML).toBe(expected);
+                expect(targets[0].firstChild).not.toBe(targets[1].firstChild);
+                targets[0].querySelector("strong").textContent = "Changed";
+                expect(targets[1].querySelector("strong").textContent).toBe("Safe");
+                expect(source[0].querySelector("strong").textContent).toBe("Safe");
+            }
+        );
+    });
+
     describe("7 - Functional tests", function () {
         describe("7.1 - extract/verifyConfig", function () {
             var $a, $target;
@@ -2346,6 +2458,43 @@ describe("pat-inject", function () {
         });
     });
 
+    describe("Sanitized error pages", () => {
+        it.each(["response", "fallback"])(
+            "sanitizes the %s before inserting its error fragment",
+            async (kind) => {
+                const html =
+                    '<section id="error-zone"><strong>Error</strong><img src="/bad" onerror="alert(1)"><script>alert(1)</script><a href="javascript:alert(1)">Link</a></section>';
+                document.head.innerHTML =
+                    '<meta name="pat-inject-status-404" content="/404#error-zone">';
+                document.body.innerHTML =
+                    '<a id="trigger"></a><div id="error-zone"></div>';
+                const originalFetch = global.fetch;
+                global.fetch = jest.fn().mockImplementation(mockFetch(html));
+                try {
+                    await pattern._onInjectError($("#trigger"), [], {
+                        jqxhr: {
+                            status: 404,
+                            responseText: kind === "response" ? html : "",
+                        },
+                    });
+                    const zone = document.querySelector("#error-zone");
+                    expect(zone.querySelector("strong").textContent).toBe("Error");
+                    expect(zone.querySelector("script")).toBeNull();
+                    expect(zone.querySelector("img").hasAttribute("onerror")).toBe(
+                        false
+                    );
+                    expect(zone.querySelector("a").hasAttribute("href")).toBe(false);
+                    expect(global.fetch).toHaveBeenCalledTimes(
+                        kind === "fallback" ? 1 : 0
+                    );
+                } finally {
+                    global.fetch = originalFetch;
+                    document.head.innerHTML = "";
+                }
+            }
+        );
+    });
+
     describe("11 - Test triggers", function () {
         afterEach(function () {
             document.body.innerHTML = "";