@whitesev/pops 1.9.7 → 2.0.1

package/src/components/rightClickMenu/index.ts

@@ -4,6 +4,7 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
 import type { PopsIcon } from "../../types/icon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { rightClickMenuConfig as PopsRightClickMenuConfig } from "./config";
 import type {
@@ -37,9 +38,15 @@ export class PopsRightClickMenu {
 		]);
 
 		if (config.style != null) {
-			let cssNode = document.createElement("style");
-			cssNode.setAttribute("type", "text/css");
-			cssNode.innerHTML = config.style;
+			let cssNode = popsDOMUtils.createElement(
+				"style",
+				{
+					innerHTML: config.style,
+				},
+				{
+					type: "text/css",
+				}
+			);
 			$shadowRoot.appendChild(cssNode);
 		}
 
@@ -447,7 +454,7 @@ export class PopsRightClickMenu {
 					/* 插入文字 */
 					menuLiElement.insertAdjacentHTML(
 						"beforeend",
-						`<span>${item.text}</span>`
+						PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`)
 					);
 					/* 如果存在子数据，显示 */
 					if (item.item && Array.isArray(item.item)) {

package/src/components/searchSuggestion/index.ts

@@ -5,6 +5,7 @@ import { popsUtils } from "../../utils/PopsUtils";
 import type { PopsSearchSuggestionDetails } from "./indexType";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
 import { GlobalConfig } from "../../GlobalConfig";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 
 export class PopsSearchSuggestion {
 	constructor(details: PopsSearchSuggestionDetails) {
@@ -35,8 +36,15 @@ export class PopsSearchSuggestion {
 
 		if (config.style != null) {
 			let cssNode = document.createElement("style");
-			cssNode.setAttribute("type", "text/css");
-			cssNode.innerHTML = config.style;
+			popsDOMUtils.createElement(
+				"style",
+				{
+					innerHTML: config.style,
+				},
+				{
+					type: "text/css",
+				}
+			);
 			$shadowRoot.appendChild(cssNode);
 		}
 
@@ -515,7 +523,7 @@ export class PopsSearchSuggestion {
 			 * 清空所有的搜索结果
 			 */
 			clearAllSearchItemLi() {
-				SearchSuggestion.$el.$hintULContainer.innerHTML = "";
+				PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
 			},
 			/**
 			 * 更新搜索建议框的位置(top、left)
@@ -610,7 +618,8 @@ export class PopsSearchSuggestion {
 			 * 动态更新CSS
 			 */
 			updateDynamicCSS() {
-				this.$el.$dynamicCSS.innerHTML = this.getDynamicCSS();
+				let cssText = this.getDynamicCSS();
+				PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
 			},
 			/**
 			 * 更新页面显示的搜索结果

package/src/components/tooltip/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsTooltipConfig } from "./config";
 import type { PopsToolTipDetails } from "./indexType";
@@ -127,7 +128,7 @@ export class ToolTip {
 		if (text == null) {
 			text = this.getContent();
 		}
-		this.$el.$content.innerHTML = text;
+		PopsSafeUtils.setSafeHTML(this.$el.$content, text);
 	}
 	/**
 	 * 获取z-index

package/src/utils/PopsDOMUtils.ts

@@ -11,6 +11,7 @@ import type {
 	PopsDOMUtilsEventListenerOptionsAttribute,
 } from "../types/PopsDOMUtilsEventType";
 import { popsUtils } from "./PopsUtils";
+import { PopsSafeUtils } from "./PopsSafeUtils";
 
 class PopsDOMUtilsEvent {
 	/**
@@ -1636,7 +1637,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	): HTMLElementTagNameMap[K] {
 		let tempElement = PopsCore.document.createElement(tagName);
 		if (typeof property === "string") {
-			tempElement.innerHTML = property;
+			PopsSafeUtils.setSafeHTML(tempElement, property);
 			return tempElement;
 		}
 		if (property == null) {
@@ -1647,7 +1648,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		}
 		Object.keys(property).forEach((key) => {
 			let value = property[key];
-			(tempElement as any)[key] = value;
+			if (key === "innerHTML") {
+				PopsSafeUtils.setSafeHTML(tempElement, value);
+				return;
+			}
+			// @ts-ignore
+			tempElement[key] = value;
 		});
 		Object.keys(attributes).forEach((key) => {
 			let value = attributes[key];
@@ -1899,7 +1905,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		}
 		function parseHTMLByCreateDom() {
 			let tempDIV = PopsCore.document.createElement("div");
-			tempDIV.innerHTML = html;
+			PopsSafeUtils.setSafeHTML(tempDIV, html);
 			if (isComplete) {
 				return tempDIV;
 			} else {
@@ -1938,7 +1944,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		}
 		function elementAppendChild(ele: HTMLElement, text: HTMLElement | string) {
 			if (typeof content === "string") {
-				ele.insertAdjacentHTML("beforeend", text as string);
+				ele.insertAdjacentHTML(
+					"beforeend",
+					PopsSafeUtils.getSafeHTML(text as string)
+				);
 			} else {
 				ele.appendChild(text as HTMLElement);
 			}
@@ -2072,7 +2081,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 			return;
 		}
 		if (typeof content === "string") {
-			element.insertAdjacentHTML("beforebegin", content);
+			element.insertAdjacentHTML(
+				"beforebegin",
+				PopsSafeUtils.getSafeHTML(content)
+			);
 		} else {
 			element!.parentElement!.insertBefore(content, element);
 		}
@@ -2097,7 +2109,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 			return;
 		}
 		if (typeof content === "string") {
-			element.insertAdjacentHTML("afterend", content);
+			element.insertAdjacentHTML(
+				"afterend",
+				PopsSafeUtils.getSafeHTML(content)
+			);
 		} else {
 			element!.parentElement!.insertBefore(content, element.nextSibling);
 		}

package/src/utils/PopsSafeUtils.ts

@@ -0,0 +1,24 @@
+export const PopsSafeUtils = {
+	/**
+	 * 获取安全的html
+	 */
+	getSafeHTML(text: string) {
+		// @ts-ignore
+		if (globalThis.trustedTypes) {
+			// @ts-ignore
+			const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+				createHTML: (html: string) => html,
+			});
+			return policy.createHTML(text);
+		} else {
+			return text;
+		}
+	},
+	/**
+	 * 设置安全的html
+	 */
+	setSafeHTML($el: Element, text: string) {
+		// 创建 TrustedHTML 策略（需 CSP 允许）
+		$el.innerHTML = this.getSafeHTML(text);
+	},
+};