sellmate-design-system-react 2.2.0 → 3.0.0

package/dist/components/SCallout/SCallout.d.ts

@@ -5,7 +5,10 @@ export type SCalloutMessage = string | SCalloutMessage[];
 export interface SCalloutProps {
     /** 콜아웃 타입 (색상·아이콘·타이틀 결정) */
     type?: SCalloutType;
-    /** 표시할 메시지 목록 (배열 중첩으로 depth 표현) */
+    /**
+     * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
+     * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
+     */
     message?: SCalloutMessage[];
     /** message 대신 직접 본문을 넣을 때 */
     children?: ReactNode;
@@ -15,6 +18,7 @@ export interface SCalloutProps {
 /**
  * SCallout — sd-callout 포팅.
  * default/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
- * 색상은 `--cmp-callout-*` 토큰 참조. (원본의 innerHTML 주입은 안전상 제외 — 평문 렌더)
+ * 색상은 `--cmp-callout-*` 토큰 참조.
+ * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */
 export declare const SCallout: import("react").ForwardRefExoticComponent<SCalloutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SCallout/SCallout.js

@@ -15,6 +15,75 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
+};
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName;
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
+    }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
+    });
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
+
 // src/lib/color.ts
 var COLOR_KEYS = [
   "white",
@@ -2865,7 +2934,13 @@ function renderItems(message, depth = 1) {
           className: cn("flex items-start", isDepth2 && "pl-[32px]"),
           children: [
             /* @__PURE__ */ jsx("span", { className: "w-[24px] shrink-0 text-center", "aria-hidden": true, children: isDepth2 ? "\u2022" : "-" }),
-            /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 flex-1 break-words", children: m })
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "m-0 min-w-0 flex-1 break-words",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              }
+            )
           ]
         },
         `${depth}-${i}-${out.length}`