前端 XSS 防御与上下文编码：URL Percent Encoding 与 HTML Entity 实体转义边界

一、问题概述：URL 编码无法替代 XSS 防御的常见误区

一种危险的误区是认为“全量 URL 编码能代替 XSS 转义”。例如，当恶意攻击者传入 javascript:alert(1) 作为链接时，即便对其进行全量 encodeURI 编码，当代码被插入到 <a href="..."> 并被用户点击时，浏览器渲染引擎依然会解包并执行 javascript: 伪协议中的恶意脚本。URL 编码的目的是遵守 URI 语法，而不是净化 XSS 攻击载荷。

二、最小复现：伪协议注入与属性边界打破

下面的 HTML 示例展示了单纯依赖 URL 编码在不同的 DOM 输出 Sink 下失效的情况：

<!-- 漏洞 1：伪协议注入 (URL 编码合法，但在 href Sink 中被执行) -->
<a href="javascript:alert(document.cookie)">点击领取礼品</a>

<!-- 漏洞 2：HTML 属性上下文打破 (缺少 HTML 实体转义) -->
<input type="text" value="https://example.com?a=1" onfocus="alert(1)">

三、根因分析：URL 解析、协议策略与输出上下文是三件事

HTML 文本和属性需要由模板系统做上下文转义；URL Sink 还必须校验解析后的协议。对完整 URL 再调用 encodeURI 不能移除 javascript:，手工把 & 变成 & 后再赋给 DOM 属性反而会改变真实查询字符串。若使用 Vue 的 :href 属性绑定，应传入经过协议校验的普通 URL 字符串，让框架负责属性层转义。

四、推荐方案：用 URL 解析器做协议白名单，再交给框架绑定

1. 用 new URL(raw, trustedBase) 解析后检查 url.protocol，通用链接只允许 http: 与 https:。2. 内部链接只接受单斜杠开头，并确认解析后仍与可信 Base 同源，避免 //evil.example 和反斜杠变体。3. 在 Vue/Nuxt 中使用 :href，不要拼接 HTML 或使用 v-html。DOMPurify 适用于确实要渲染的富文本 HTML，不是 URL 协议校验器。

五、完整代码：适用于 Vue :href 的协议安全 URL 函数

函数返回普通 URL 字符串或 null，不做 HTML 实体替换。组件应仅在结果非空时渲染链接，并通过属性绑定交给 Vue。

function safeHref(raw: string, trustedBase: string): string | null {
  const value = raw.trim();
  const isRootRelative = /^\/(?![\\/])/.test(value);
  const isAbsolute = /^[a-z][a-z\d+.-]*:/i.test(value);
  if (!isRootRelative && !isAbsolute) return null;

  try {
    const base = new URL(trustedBase);
    const url = new URL(value, base);
    if (url.protocol !== "http:" && url.protocol !== "https:") return null;

    if (isRootRelative) {
      if (url.origin !== base.origin) return null;
      return url.pathname + url.search + url.hash;
    }
    return url.href;
  } catch {
    return null;
  }
}

const base = "https://jsonutils.com";
console.log(safeHref("javascript:alert(1)", base)); // null
console.log(safeHref("//evil.example/path", base)); // null
console.log(safeHref("/articles/example?a=1&b=2", base)); // 保留真实 & 字符
console.log(safeHref("https://example.com/search?q=hello", base));

六、常见错误方案

误以为 encodeURI 能自动防范所有 XSS 攻击；直接使用 v-html 渲染未经协议校验的动态 URL 字符串；在 JS 上下文中直接拼接未经 Unicode 编码的 URL 参数。

七、边界条件：data:text/html 协议与 SVG 内部的 Script 标签

data:image/svg+xml 和 data:text/html 格式的 URL 均能包含可执行的 XSS 脚本；在协议白名单中必须严格禁止 data: 协议用于通用链接。

八、如何验证 XSS 防御安全性

单元测试覆盖大小写和空白变体的 javascript:、data:、vbscript:、协议相对 URL、反斜杠、控制字符、正常 HTTPS 与内部相对路径；组件测试应确认最终 DOM 属性值正确且没有使用 v-html，再配合 CSP 与浏览器 XSS 测试。

九、FAQ

问：为什么 encodeURI('javascript:alert(1)') 仍不安全？答：因为 encodeURI 保留了字母与括号，生成的字符串依然是合法的 javascript: 伪协议，在 href 中会被浏览器执行。

问：Vue / React 模板会自动防止 href XSS 吗？答：不会！框架自带的转义只防范 HTML 标签/属性打破，无法感知 href='javascript:' 协议安全，必须手动校验协议。

问：HTML 实体转义和 URL 编码可以互相替代吗？答：不能！HTML 实体转义用于解析 HTML 文本/属性，URL 编码用于解析 URI 组件，必须按上下文使用。

十、总结

URL 编码用于维持 URI 语法完整性，不能替代 XSS 安全防御。将动态 URL 渲染至 DOM 时，必须实施“协议白名单校验 + 上下文相关实体编码”的双层防护。