XSS 转义怎么做：别再手动 replace 尖括号，四个上下文各有各的规则

name = `"><img src=x onerror=alert(1)>`

el.innerHTML = `<p>${name}</p>`;                    // ① 正文：标签直接生效
el.outerHTML = `<div title="${name}">`;             // ② 属性：引号被闭合，事件属性成立
el.innerHTML = `<script>var n = "${name}";</script>`; // ③ 脚本：<\/script> 就能跳出
el.innerHTML = `<a href="${url}">go</a>`;          // ④ URL：javascript: 无需尖括号

// ① 正文：走 textContent，永不解析 HTML
el.textContent = name;

// ② 属性：用 API 赋值，浏览器自动做上下文正确的编码
el.setAttribute("title", name);

// ③ 脚本：值不落在脚本里，落在 data-* 上由 JS 读取
el.dataset.name = name;                       // <div data-name="...">

// ④ URL：协议白名单，先判 scheme 再赋 href
const safe = /^https?:\/\//i.test(url) || url.startsWith("/") ? url : "#";
a.setAttribute("href", safe);

function escapeHtml(raw) {
  return String(raw)
    .replace(/&/g, "&")     // & 必须第一个，否则双重转义
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/\u0027/g, "&#39;");
}

// 属性值必须加引号，转义才有意义
el.setAttribute("title", escapeHtml(raw));
// 或模板里：<div title="${escapeHtml(raw)}"></div>

// ① 首选：JSON 放进不可执行的类型，</script> 无法闭合它
<script type="application/json" id="cfg">
  {"user": "张\"三</script><img src=x onerror=alert(1)>"}
</script>

// ② 次选：转义脚本上下文里的三个危险字符
function escapeJs(s) {
  return String(s)
    .replace(/\\/g, "\\\\")   // 反斜杠最先处理
    .replace(/"/g, "\\\"")
    .replace(/</g, "\\u003C")   // 关键：不让 </script> 提前闭合
    .replace(/>/g, "\\u003E")
    .replace(/&/g, "\\u0026");
}

import DOMPurify from "dompurify";

const clean = DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["p","br","b","i","em","strong","a","ul","ol","li","code","pre"],
  ALLOWED_ATTR: ["href","title"],
  FORBID_ATTR: ["style"],
  ALLOWED_URI_REGEXP: /^(?:https?:|mailto:|#|\/)/i
});

// 严格模式下默认剥掉 script、on*、javascript: —— 不要再自己 replace

el.innerHTML = html
  .replace(/<script.*?>.*?<\/script>/gis, "")   // 大小写绕过、嵌套绕过、img onerror 绕过
  .replace(/on\w+="[^"]*"/gi, "")             // 单引号属性、属性值含反引号都能绕
  .replace(/javascript:/gi, "");              // 大小写、实体、Tab 分割都能绕
// 结果：看起来干净了，实际可绕过；还会把正文里的字面文本一起删掉

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{随机串}' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';   /* 样式影响面小，暂可放宽 */
  img-src 'self' data: blob:;
  object-src 'none';
  base-uri 'none';
  frame-ancestors 'none';

/* 报告违规，便于逐步收紧而不打扰用户 */
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

innerHTML        直接写入，最常见入口
outerHTML        同上，还替换了整个节点
insertAdjacentHTML  与 innerHTML 同风险
document.write   页面已有内容会被整体重写
eval / new Function / setTimeout("字符串")  可执行字符串
e.literal = jsString        事件属性同样能执行

// 逐个确认：这些位置的入参来自用户吗？是 → 换成 textContent / setAttribute