如何安全处理window.location.pathname以通过Veracode XSS检测？

我通过window.location.pathname生成页面面包屑，功能正常，但Veracode检测提示输入不可信。我试过用正则替换非字母数字字符：

untrustedData.replace(/[^A-Za-z0-9]/g, '');

但Veracode仍报漏洞，我的实现代码大致如下：

const breadcrumbsElement = document.querySelector('#breadcrumbs');
const pathNames = window.location.pathname.split('/');

const sanitiseString = (string) => string.replace(/[^A-Za-z0-9]/g, '');

const addCrumb = (sanitisedRoute, element) => {
  const newCrumb = document.createElement('a');
  newCrumb.href = `/consumer/${sanitisedRoute}`;
  newCrumb.innerText = sanitisedRoute;
  element.appendChild(newCrumb);
};

pathNames.forEach((route) => {
  addCrumb(sanitiseString(route), breadcrumbsElement);
});

Veracode的错误信息：

Flaw Id: 12
Description: This call to href() contains a cross-site scripting (XSS) flaw. The application populates the HTTP response with untrusted input, allowing an attacker to embed malicious content, such as Javascript code, which will be executed in the context of the victim's browser. XSS vulnerabilities are commonly exploited to steal or manipulate cookies, modify presentation of content, and compromise confidential information, with new attack vectors being discovered on a regular basis.
Remediation: Use contextual escaping on all untrusted data before using it to construct any portion of an HTTP response. The escaping method should be chosen based on the specific use case of the untrusted data, otherwise it may not protect fully against the attack. For example, if the data is being written to the body of an HTML page, use HTML entity escaping; if the data is being written to an attribute, use attribute escaping; etc. Both the OWASP Java Encoder library and the Microsoft AntiXSS library provide contextual escaping methods.

Veracode特别针对element.appendChild()和newCrumb.href = \baseUrl${untrustedData}``报错。

我的问题：该如何正确净化window.location.pathname数据？是否有更可靠的方式获取当前路径名，或是这属于Veracode的误报？

1. 为什么当前过滤无效？ #

你的正则仅保留字母数字，但Veracode关注的是上下文安全：

• 对于href属性，需要的是URL安全编码，而非简单的字符过滤
• 静态扫描工具会判定“直接使用路径片段”存在风险，即便你做了字符过滤，它无法确认你覆盖了所有上下文场景

2. 正确的净化与修复方式 #

针对href属性：使用URL编码处理路径片段

构造链接时，对路径片段进行URL编码，确保特殊字符被正确转义，同时保留合法路径字符：

const sanitiseRouteForHref = (route) => {
  // 编码后保留斜杠（如果业务允许路径层级），否则可去掉replace
  return encodeURIComponent(route).replace(/%2F/g, '/');
};

针对文本内容：使用textContent替代innerText

textContent纯粹处理文本，不会解析任何HTML，比innerText更符合安全规范：

newCrumb.textContent = safeRoute;

增加验证：只允许合法的路径片段

在净化前先验证路径格式，过滤不符合业务预期的片段：

const isValidRoute = (route) => {
  // 可根据业务需求调整允许的字符，比如添加连字符、下划线
  return /^[A-Za-z0-9-_]*$/.test(route);
};

过滤空路径片段

split('/')会产生空字符串（比如路径开头/结尾的斜杠），直接过滤掉避免无效面包屑：

const pathNames = window.location.pathname.split('/').filter(Boolean);

3. 是否属于Veracode误报？ #

有可能，但更大概率是你的净化逻辑不符合静态扫描的规则预期。静态工具依赖明确的上下文安全处理逻辑，按照OWASP的上下文转义规范调整后，通常可以通过检测。

优化后的完整代码 #

const breadcrumbsElement = document.querySelector('#breadcrumbs');
const pathNames = window.location.pathname.split('/').filter(Boolean);

const isValidRoute = (route) => /^[A-Za-z0-9-_]*$/.test(route);
const sanitiseRouteForHref = (route) => encodeURIComponent(route).replace(/%2F/g, '/');

const addCrumb = (safeRoute, element) => {
  const newCrumb = document.createElement('a');
  newCrumb.href = `/consumer/${safeRoute}`;
  newCrumb.textContent = safeRoute;
  element.appendChild(newCrumb);
};

pathNames.forEach((route) => {
  if (isValidRoute(route)) {
    const safeRoute = sanitiseRouteForHref(route);
    addCrumb(safeRoute, breadcrumbsElement);
  }
});

内容的提问来源于stack exchange，提问作者CavemanDan