XSS跨站脚本攻击防护，前端过滤配置

知识分享

2026-09-18 22:40

13 阅读

XSS跨站脚本攻击的本质是攻击者把恶意脚本注入到网页里，让其他用户浏览时自动执行。
防护不能只靠后端转义，前端过滤和服务器层拦截同样重要。
这篇文章从零基础出发，带你用 Nginx 配置前端过滤规则，拦截可疑请求，并解释 406 状态码在防护中的作用。
读完你能独立完成配置，并验证拦截是否生效。

准备工作：确认环境和工具

开始前需要确认你有一台运行 Nginx 的服务器，并且有 root 或 sudo 权限。
本文以 Nginx 1.18 及以上版本为例，较低版本语法可能略有差异，建议以官方文档为准。

登录服务器，查看 Nginx 版本和配置目录：

nginx -v
ls /etc/nginx/

如果输出 conf.d 或 sites-available 目录，说明是常见的 Debian/Ubuntu 或 CentOS 风格。
宝塔面板用户可以在软件商店找到 Nginx，点击“配置修改”直接编辑。

另外，准备一个测试用的网站或接口，方便验证拦截效果。
不要直接在生产环境改配置，先备份：

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

XSS 攻击经常通过 URL 参数、POST 表单或 Cookie 注入脚本标签。
我们可以在 Nginx 里用 map 和 if 判断请求中是否包含可疑字符，命中则返回 406 状态码，直接拒绝请求。

在 http 块内添加一个 map，定义需要拦截的模式：

map $request_uri $xss_block {
    default 0;
    "~*"

预期返回 HTTP/1.1 406 Not Acceptable。
如果返回 200，说明规则未生效，检查 map 是否放在 http 块内，以及 if 是否在正确的 server 块中。

服务器层拦截能挡住大部分明显攻击，但前端过滤同样不能少。
前端过滤的核心原则是：永远不要信任用户输入，输出到页面前必须转义。

在 JavaScript 中，避免使用 innerHTML 直接插入用户内容，改用 textContent 或 innerText。
如果必须渲染 HTML，使用 DOMPurify 这类库进行净化：

import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(userInput);
element.innerHTML = clean;

对于表单提交，可以在前端做一层基础校验，比如检测输入中是否包含 <、>、" 等字符，但不要只依赖前端，因为攻击者可以绕过浏览器直接发请求。

避坑提醒：Nginx 的 if 指令在 location 块中有一些已知限制，尽量放在 server 块顶层。
另外，规则不要写得过于宽泛，比如直接拦截所有含 < 的请求，可能误伤正常业务，建议根据实际日志逐步调整。

配置完成后，需要从多个角度验证防护是否生效。