@whitesev/domutils 1.4.8 → 1.5.1

package/dist/index.esm.js

@@ -55,6 +55,46 @@ const DOMUtilsCommonUtils = {
     isShow(element) {
         return Boolean(element.getClientRects().length);
     },
+    /**
+     * 获取安全的html
+     */
+    getSafeHTML(text) {
+        // @ts-ignore
+        if (globalThis.trustedTypes) {
+            // @ts-ignore
+            const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+                createHTML: (html) => html,
+            });
+            return policy.createHTML(text);
+        }
+        else {
+            return text;
+        }
+    },
+    /**
+     * 在CSP策略下设置innerHTML
+     * @param $el 元素
+     * @param text 文本
+     */
+    setSafeHTML($el, text) {
+        // 创建 TrustedHTML 策略（需 CSP 允许）
+        try {
+            $el.innerHTML = text;
+        }
+        catch (error) {
+            // @ts-ignore
+            if (globalThis.trustedTypes) {
+                // @ts-ignore
+                const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+                    createHTML: (html) => html,
+                });
+                $el.innerHTML = policy.createHTML(text);
+            }
+            else {
+                throw new Error("trustedTypes is not defined");
+            }
+        }
+    },
     /**
      * 用于显示元素并获取它的高度宽度等其它属性
      * @param element
@@ -1033,7 +1073,7 @@ class DOMUtils extends DOMUtilsEvent {
         super(option);
     }
     /** 版本号 */
-    version = "2024.12.4";
+    version = "2025.3.2";
     attr(element, attrName, attrValue) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
@@ -1090,7 +1130,7 @@ class DOMUtils extends DOMUtilsEvent {
         let DOMUtilsContext = this;
         let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
         if (typeof property === "string") {
-            tempElement.innerHTML = property;
+            DOMUtilsContext.html(tempElement, property);
             return tempElement;
         }
         if (property == null) {
@@ -1101,6 +1141,10 @@ class DOMUtils extends DOMUtilsEvent {
         }
         Object.keys(property).forEach((key) => {
             let value = property[key];
+            if (key === "innerHTML") {
+                DOMUtilsContext.html(tempElement, value);
+                return;
+            }
             tempElement[key] = value;
         });
         Object.keys(attributes).forEach((key) => {
@@ -1269,7 +1313,7 @@ class DOMUtils extends DOMUtilsEvent {
                 html = html.innerHTML;
             }
             if ("innerHTML" in element) {
-                element.innerHTML = html;
+                DOMUtilsCommonUtils.setSafeHTML(element, html);
             }
         }
     }
@@ -1375,7 +1419,12 @@ class DOMUtils extends DOMUtilsEvent {
             return Reflect.get(element, propName);
         }
         else {
-            Reflect.set(element, propName, propValue);
+            if (element instanceof Element && propName === "innerHTML") {
+                DOMUtilsContext.html(element, propValue);
+            }
+            else {
+                Reflect.set(element, propName, propValue);
+            }
         }
     }
     /**
@@ -1591,7 +1640,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         function elementAppendChild(ele, text) {
             if (typeof content === "string") {
-                ele.insertAdjacentHTML("beforeend", text);
+                ele.insertAdjacentHTML("beforeend", DOMUtilsCommonUtils.getSafeHTML(text));
             }
             else {
                 ele.appendChild(text);
@@ -1637,7 +1686,7 @@ class DOMUtils extends DOMUtilsEvent {
             return;
         }
         if (typeof content === "string") {
-            element.insertAdjacentHTML("afterbegin", content);
+            element.insertAdjacentHTML("afterbegin", DOMUtilsCommonUtils.getSafeHTML(content));
         }
         else {
             let $firstChild = element.firstChild;
@@ -1674,7 +1723,7 @@ class DOMUtils extends DOMUtilsEvent {
             return;
         }
         if (typeof content === "string") {
-            element.insertAdjacentHTML("afterend", content);
+            element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
         }
         else {
             let $parent = element.parentElement;
@@ -1713,7 +1762,7 @@ class DOMUtils extends DOMUtilsEvent {
             return;
         }
         if (typeof content === "string") {
-            element.insertAdjacentHTML("beforebegin", content);
+            element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
         }
         else {
             let $parent = element.parentElement;
@@ -1773,7 +1822,7 @@ class DOMUtils extends DOMUtilsEvent {
             });
             return;
         }
-        element.innerHTML = "";
+        DOMUtilsContext.html(element, "");
     }
     /**
      * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1983,10 +2032,10 @@ class DOMUtils extends DOMUtilsEvent {
         if (typeof duration !== "number" || duration <= 0) {
             throw new TypeError("duration must be a positive number");
         }
-        if (typeof callback !== "function" && callback !== void 0) {
+        if (typeof callback !== "function" && callback !== undefined) {
             throw new TypeError("callback must be a function or null");
         }
-        if (typeof styles !== "object" || styles === void 0) {
+        if (typeof styles !== "object" || styles === undefined) {
             throw new TypeError("styles must be an object");
         }
         if (Object.keys(styles).length === 0) {
@@ -2045,7 +2094,7 @@ class DOMUtils extends DOMUtilsEvent {
         element = element;
         // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
         let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
-        wrapper.innerHTML = wrapperHTML;
+        DOMUtilsContext.html(wrapper, wrapperHTML);
         let wrapperFirstChild = wrapper.firstChild;
         // 将要包裹的元素插入目标元素前面
         let parentElement = element.parentElement;
@@ -2141,7 +2190,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         function parseHTMLByCreateDom() {
             let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
-            tempDIV.innerHTML = html;
+            DOMUtilsContext.html(tempDIV, html);
             if (isComplete) {
                 return tempDIV;
             }