@jx3box/jx3box-editor 2.2.44 → 2.2.45

package/assets/js/xss.js

@@ -1,4 +1,7 @@
 import sanitizeHtml from "sanitize-html";
+import * as cheerio from "cheerio";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
 
 const FORBID = new Set(["script", "object", "embed", "applet", "base", "meta", "link"]);
 
@@ -8,16 +11,67 @@ const EXTRA_TAGS = [
     "table", "thead", "tbody", "tr", "th", "td",
     "blockquote", "pre", "code", "hr",
     "video", "source",
-    "iframe",
+    "iframe", "style",
+    "colgroup", "col",
 ];
 
+// 必须顶层的 at-rule（你说不需要动画，但 keyframes 也可能被编辑器/作者写进来，留着更稳）
+const TOP_LEVEL_AT = new Set(["keyframes", "-webkit-keyframes", "font-face"]);
+
+function stripDangerousCss(css) {
+    if (!css) return css;
+    return css
+        .replace(/@import\s+[^;]+;?/gi, "")
+        .replace(/url\s*\(\s*[^)]+\s*\)/gi, "")
+        .replace(/expression\s*\([^)]*\)/gi, "");
+}
+
+// 暴力把 style 内容 nest 到 .c-article
+function nestCssBrutally(cssText, scope = ".c-article") {
+    let css = stripDangerousCss(cssText || "");
+    if (!css.trim()) return css;
+
+    const root = postcss.parse(css, { parser: safeParser });
+
+    const top = [];
+    const rest = [];
+
+    (root.nodes || []).forEach((node) => {
+        if (node.type === "atrule" && TOP_LEVEL_AT.has(String(node.name).toLowerCase())) {
+            top.push(node.toString());
+        } else {
+            rest.push(node.toString());
+        }
+    });
+
+    const restCss = rest.join("\n").trim();
+    if (!restCss) return top.join("\n").trim();
+
+    return `${top.join("\n")}\n${scope}{\n${restCss}\n}`.trim();
+}
+
+function nestAllStyleTags(html, scope = ".c-article") {
+    const $ = cheerio.load(html, { decodeEntities: false });
+
+    $("style").each((_, el) => {
+        const oldCss = $(el).html() || "";
+        const newCss = nestCssBrutally(oldCss, scope);
+        $(el).text(newCss);
+    });
+
+    return $.html();
+}
+
 export default function sanitizeRichText(html) {
     if (!html) return html;
 
+    // 先把 <style> 内容暴力 nest 到 .c-article
+    html = nestAllStyleTags(html, ".c-article");
+
     const allowedTags = sanitizeHtml.defaults.allowedTags
         .concat(EXTRA_TAGS)
-        .filter((t, i, arr) => arr.indexOf(t) === i) // 去重
-        .filter(t => !FORBID.has(t));
+        .filter((t, i, arr) => arr.indexOf(t) === i)
+        .filter((t) => !FORBID.has(t));
 
     return sanitizeHtml(html, {
         disallowedTagsMode: "discard",
@@ -29,12 +83,16 @@ export default function sanitizeRichText(html) {
             img: ["src", "alt", "title", "width", "height", "class", "style", "loading", "decoding"],
             video: ["controls", "width", "height", "class", "style"],
             source: ["src", "type"],
-            iframe: ["src","width","height","frameborder","scrolling","allowfullscreen","sandbox","referrerpolicy","class","style"],
+            iframe: ["src", "width", "height", "frameborder", "scrolling", "allowfullscreen", "sandbox", "referrerpolicy", "class", "style"],
+            td: ["colspan", "rowspan", "align", "valign", "class", "style"],
+            th: ["colspan", "rowspan", "align", "valign", "class", "style"],
+            col: ["span", "width", "class", "style"],
+            style: ["type", "media"],
         },
 
         allowedSchemes: ["http", "https", "mailto", "tel"],
         allowProtocolRelative: true,
-        allowedSchemesByTag: { img: ["http", "https", "data"],iframe: ["http", "https"], },
+        allowedSchemesByTag: { img: ["http", "https", "data"], iframe: ["http", "https"] },
 
         transformTags: {
             "*": (tagName, attribs) => {
@@ -43,7 +101,7 @@ export default function sanitizeRichText(html) {
                 // 移除 on*
                 for (const k of Object.keys(out)) if (/^on/i.test(k)) delete out[k];
 
-                // style 禁 @import / url(
+                // style 属性：禁 @import / url(
                 if (typeof out.style === "string" && out.style) {
                     let s = out.style;
                     s = s.replace(/@import\s+[^;]+;?/gi, "");
@@ -69,4 +127,4 @@ export default function sanitizeRichText(html) {
             },
         },
     });
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "2.2.44",
+    "version": "2.2.45",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -52,6 +52,8 @@
         "katex": "^0.13.0",
         "lodash": "^4.17.15",
         "photoswipe": "^4.1.2",
+        "postcss": "^8.5.6",
+        "postcss-safe-parser": "^7.0.1",
         "prismjs": "^1.20.0",
         "sanitize-html": "^2.17.0",
         "sortablejs": "^1.15.0",