Next.js中如何清理请求URL防范XSS漏洞？附扫描问题验证

问题背景 #

我们对Next.js应用执行了安全漏洞扫描，检测到XSS漏洞，具体扫描结果如下：

GET /../\"> HTTP/1.0
Host:xxx.xxx.xx.x:3000

HTTP/1.1 308 Permanent Redirect
location: /../\">/
Refresh: 0;url=/../\">/
Date: TUE, 30 Jan 2024 02:36:50 GMT
Connection: close
/../\">/

修复建议为对请求URL进行清理操作。我认为问题根源是访问包含脚本字符的URL（如http://localhost:3000/../">），该理解是否正确？应如何进行漏洞修复？

根源理解确认 #

你的理解完全正确。这个XSS漏洞的核心在于：当请求包含"、>这类恶意字符的URL时，Next.js返回的308重定向响应直接将未转义的恶意URL写入location和Refresh响应头中。若浏览器或自定义客户端在处理这些响应头时存在解析逻辑漏洞，恶意字符会被当作HTML/JavaScript代码执行，从而触发XSS攻击。同时URL中的../还存在路径遍历风险，需一并处理。

修复方案 #

针对Next.js应用，可通过以下几种方式完成漏洞修复：

1. 自定义中间件（Middleware）统一清理请求URL

在项目根目录创建middleware.ts（或.js），对所有请求的URL进行规范化和恶意字符过滤：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  
  // 转义危险字符，同时移除路径遍历的相对路径
  const sanitizedPathname = pathname
    .replace(/[<>\"\'\\]/g, encodeURIComponent)
    .replace(/\/\.\//g, '/');
  
  // 路径被修改时，重定向到清理后的安全路径
  if (sanitizedPathname !== pathname) {
    const safeUrl = new URL(sanitizedPathname, request.url);
    return NextResponse.redirect(safeUrl, { status: 301 });
  }
  
  return NextResponse.next();
}

// 匹配所有路径
export const config = {
  matcher: '/:path*',
};

2. 通过Next.js配置拦截恶意路径

在next.config.js中配置重定向规则，直接拦截包含危险字符的请求：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'path',
            value: '(.*)[<>\"\'\\\\](.*)',
          },
        ],
        destination: '/', // 重定向到首页或其他安全默认路径
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

注：这种方式适合快速拦截，精细处理建议使用中间件方案。

3. 自定义重定向逻辑中手动转义URL

如果应用存在自定义API路由或重定向逻辑，需确保响应头中的URL经过URL编码：

// 示例：自定义API路由中的安全重定向
export default function handler(req, res) {
  const targetUrl = req.url;
  // 对URL进行编码后再设置响应头
  const sanitizedUrl = encodeURI(targetUrl);
  res.setHeader('Location', sanitizedUrl);
  res.setHeader('Refresh', `0;url=${sanitizedUrl}`);
  res.status(308).end();
}

额外注意事项 #

• 修复后需重新用扫描工具验证，同时手动构造恶意URL测试拦截效果；
• 优先升级Next.js到最新稳定版，部分旧版本存在此类未默认处理的安全缺陷；
• 路径遍历防护：../这类相对路径可能导致攻击者访问应用外资源，修复时需同步处理。

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