元素
元素
工具
博客
问答

前端如何验证URL参数防止XSS注入？

宇文翌萌 阅读 58
安全

我在开发用户资料页面时遇到问题，用户通过URL参数传递nickName，但发现有人传入<script>alert(1)</script>导致页面被注入。我试过用正则匹配过滤标签：


const sanitized = nickname.replace(/<(/?script).*?>/gi, '');

但测试时发现如果参数是<script>alert(1)</script>依然能绕过过滤。有没有更可靠的参数验证方法？是否应该在前端做转义处理？

参数验证安全请求
我来解答 赞 7 收藏
二维码
手机扫码查看
反馈
2 条解答
设计师建杰
设计师建杰 Lv1
这问题我处理过很多次了，先说结论：前端做验证远远不够，必须在服务端做双重防护。

你那个正则匹配太简单了，XSS绕过方式太多了，比如用<这种HTML实体编码就能轻松绕过。我给你个更全面的方案：

1. 服务端先做严格校验，限制nickname只能包含字母数字和常见符号：
// Node.js示例

const sanitizeNickname = (name) => {

  return name.replace(/[^a-zA-Z0-9u4e00-u9fa5_- ]/g, '');

}


2. 前端展示时用textContent而不是innerHTML，或者用现成的库比如DOMPurify：
// 安全做法

element.textContent = nickname;



// 或者用DOMPurify

import DOMPurify from 'dompurify';

element.innerHTML = DOMPurify.sanitize(nickname);


重点强调下：XSS防护不能只靠前端，服务端必须做校验。前端防君子，服务端防小人。我们之前项目吃过亏，有人直接curl绕过前端提交恶意参数。

另外URL参数这种不可信输入，建议服务端直接拒绝非法的格式，返回400错误比尝试修复更安全。
点赞
2026-03-09 14:00
萌新.梦鑫
萌新.梦鑫 Lv1
防止XSS注入确实是个常见的安全问题，尤其是在处理URL参数的时候。你现在的正则过滤方法很容易被绕过，因为攻击者可以用各种编码方式来规避匹配。更可靠的方案是直接对用户输入的内容进行转义，而不是试图过滤掉恶意代码。

常见的解决方案是使用浏览器自带的 DOM API 来安全处理字符串。比如可以创建一个文本节点，这样会自动把特殊字符转义成 HTML 实体。下面是具体实现：

function escapeHtml(str) {

    const div = document.createElement('div');

    div.appendChild(document.createTextNode(str));

    return div.innerHTML;

}



const nicknameFromUrl = new URLSearchParams(window.location.search).get('nickName');

if (nicknameFromUrl) {

    const safeNickname = escapeHtml(nicknameFromUrl);

    document.getElementById('nickname').innerText = safeNickname;

}


这个方法的核心是利用 createTextNode 自动将特殊字符转义，比如 < 会被转成 &lt;，从而避免了任何HTML标签被执行。

另外要注意的是，前端防护只能作为辅助手段，真正的安全保障应该在后端做。无论前端怎么处理，后端都要对参数进行同样的转义或校验，不然还是会有风险。毕竟你没法保证用户一定会通过你的前端页面来访问接口，他们完全可以伪造请求。

还有一个建议是限制昵称的字符集，比如只允许字母、数字和常用符号，这样可以从源头上减少风险。可以用正则简单校验一下：

function isValidNickname(str) {

    return /^[a-zA-Z0-9_u4e00-u9fa5]+$/.test(str);

}



if (nicknameFromUrl && isValidNickname(nicknameFromUrl)) {

    // 安全处理后显示

} else {

    console.error('Invalid nickname');

}


最后提醒一句，安全问题不能偷懒，前后端都做好防护才是王道。
点赞 1
2026-02-18 12:13
相关推荐
元素
元素
工具
博客
问答
登录/注册