@whitesev/pops 1.9.7 → 2.0.0

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 {

package/src/utils/PopsSafeUtils.ts

@@ -0,0 +1,22 @@
+export const PopsSafeUtils = {
+	/**
+	 * 设置安全的html
+	 */
+	setSafeHTML($el: Element, text: string) {
+		// 创建 TrustedHTML 策略（需 CSP 允许）
+		try {
+			$el.innerHTML = text;
+		} catch (error) {
+			// @ts-ignore
+			if (globalThis.trustedTypes) {
+				// @ts-ignore
+				const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+					createHTML: (html: string) => html,
+				});
+				$el.innerHTML = policy.createHTML(text);
+			} else {
+				throw new Error("trustedTypes is not defined");
+			}
+		}
+	},
+};