元素
元素
工具
博客
问答

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

宇文翌萌 阅读 12
安全

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


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

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

参数验证安全请求
我来解答 赞 1 收藏
二维码
手机扫码查看
反馈
1 条解答
萌新.梦鑫
萌新.梦鑫 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');

}


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