Vue里用javascript:协议跳转会触发XSS警告怎么办？

设计师忠娟提问于 2026-03-01 10:48:20 阅读 9

安全

我在做一个动态链接渲染的功能，用户可以输入URL，但有些老数据里带的是 javascript:alert(1) 这种。我直接绑定到 <a :href="userUrl" rel="external nofollow" > 上，结果控制台报 XSS 风险，页面还被 CSP 拦了。试过用 URL 构造函数校验，但 javascript: 协议居然能通过？现在不知道该怎么安全地处理这种输入。

这是我的简化代码：

<template>
  <a :href="untrustedUrl" rel="external nofollow" >点击</a>
</template>

<script setup>
const untrustedUrl = 'javascript:alert("xss")';
</script>

我来解答赞 5 收藏

反馈

1 条解答

艳艳 ☘︎ Lv1

这个问题确实头疼，老项目迁移这种坑太常见了。URL构造函数只管语法不管安全，javascript:协议语法上是合法的，所以能过。

直接给你一个能用的方案，复制这个函数去过滤：

function sanitizeUrl(url) {

  if (!url) return '#';

  

  const trimmed = url.trim();

  const normalized = trimmed.toLowerCase();

  

  // 干掉 javascript: vbscript: data: 这些危险协议

  const dangerousProtocols = ['javascript:', 'vbscript:', 'data:text/html'];

  if (dangerousProtocols.some(p => normalized.startsWith(p))) {

    console.warn('检测到危险URL，已拦截:', url);

    return '#';

  }

  

  return trimmed;

}

然后你的组件改成这样：

这样处理后，危险链接会被替换成#，不会触发XSS警告也不会执行恶意代码。

如果你想更严格一点，可以用白名单机制，只允许http://、https://、mailto:这些安全协议，其他的全拦截。不过看你业务需求，有些项目可能还需要tel:或者相对路径，自己往白名单里加就行。

2026-03-01 11:13