构建 Next.js 应用时的安全保障与风险防范措施

在 Web 应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js 作为一款备受欢迎的 React 框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。

一、Next.js 安全问题概述

尽管 Next.js 为构建安全应用提供了坚实的基础，但在开发过程中仍有许多需要注意的安全问题和最佳实践，确保应用对常见漏洞具有足够的防御能力。

二、服务器端渲染（SSR）与静态站点生成（SSG）的安全策略

2.1 SSR 安全要点

在使用服务器端渲染时，有几项关键措施需要注意：

数据净化：始终对用户输入进行清洗，防止注入类攻击。由于 SSR 同时面临服务器端和客户端的注入风险，因此建议使用诸如 DOMPurify 之类的工具。例如：
```
import DOMPurify from "dompurify";

const sanitizedData = DOMPurify.sanitize(userInput);
```
敏感数据保护：确保在服务器渲染生成的 HTML 中不暴露敏感信息，如 API 密钥或用户详细信息。只将必要的数据发送到客户端：
```
export async function getServerSideProps(context) {
  const data = await fetchData();
  return {
    props: {
      data: filterSensitiveData(data),
    },
  };
}
```

防止跨站脚本攻击（XSS）：因为服务器生成 HTML 时需要处理动态内容，所以一定要确保所有内容都经过转义。例如：

const sanitizedData = escapeHTML(userInput);

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function (match) {
    return {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#39;",
    }[match];
  });
}

安全的 API 调用：利用服务器端环境变量存放 API 密钥等敏感信息，避免泄露给客户端代码：
```
const apiKey = process.env.API_KEY;
const response = await fetch(`https://api.example.com/data?apiKey=${apiKey}`);
```

CSRF 防护：通过 CSRF 令牌保护 SSR 路由免受跨站请求伪造攻击。例如：

import csrf from "csurf";

const csrfProtection = csrf({ cookie: true });

export default function handler(req, res) {
  csrfProtection(req, res, () => {
    // 此处放置 API 逻辑
  });
}

2.2 SSG 安全注意事项

在静态站点生成时，以下措施尤为重要：

数据净化：在构建时对所有用户生成的内容进行清洗，确保嵌入静态 HTML 的数据是安全的。

import DOMPurify from "dompurify";

export async function getStaticProps() {
  const data = await fetchData();
  const sanitizedData = DOMPurify.sanitize(data);

  return {
    props: {
      sanitizedData,
    },
  };
}

内容安全策略（CSP）：为防范 XSS 和其它注入攻击，必须配置一套严格的 CSP 策略。这对于缓存并直接提供静态内容的站点尤为关键：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "default-src 'self'; script-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },
};

静态文件的安全管理：确保敏感文件不会对外公开，通过重写或重定向来控制文件访问：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: "/private-file",
        destination: "/404",
        permanent: false,
      },
    ];
  },
};

环境变量管理：确保环境变量不会暴露给客户端，通过 getStaticProps 或 getStaticPaths 安全地在构建过程中加载数据。

export async function getStaticProps() {
  const apiKey = process.env.API_KEY;
  const data = await fetchData(apiKey);

  return {
    props: {
      data,
    },
  };
}

不可变与可缓存内容：保证静态资源和生成页面具有不可变性和良好的缓存策略，防止内容篡改。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          },
        ],
      },
    ];
  },
};

三、常规安全最佳实践

设置安全头部：利用 Helmet.js 等库来添加 HTTP 安全头部，增强安全防护。

import helmet from "helmet";

export default function handler(req, res) {
  helmet()(req, res, () => {
    // 此处处理 API 请求
  });
}

依赖管理：定期更新第三方依赖以修补已知安全漏洞。
```
npm outdated
npm update
```
漏洞审计：使用 npm audit 等工具扫描依赖，及时发现和修复安全问题。
```
npm audit
```

四、跨站脚本攻击（XSS）的防范措施

XSS 攻击允许攻击者在其他用户的页面中注入恶意脚本，Next.js 通过以下措施来降低这种风险：

JSX 自动转义：React 与 Next.js 默认会将动态数据当作纯文本处理，从而自动防范 XSS。

const message = "<script>alert('XSS');</script>";
return <div>{message}</div>; // 最终输出为 &lt;script&gt;alert('XSS');&lt;/script&gt;

谨慎使用 dangerouslySetInnerHTML：在必须直接注入 HTML 的情况下，务必先进行数据净化。

import DOMPurify from "dompurify";

const rawHTML = "<p>这是一段<strong>加粗</strong>文本。</p>";
const sanitizedHTML = DOMPurify.sanitize(rawHTML);

return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;

双重净化用户输入：无论在客户端还是服务器端，都必须对用户输入进行清洗。

import DOMPurify from "dompurify";

const handleUserInput = (input) => {
  return DOMPurify.sanitize(input);
};

const userComment = handleUserInput(userInput);
return <div>{userComment}</div>;

服务器端数据验证：在 SSR 渲染过程中，同样需要验证并净化传输到客户端的数据。

import DOMPurify from "dompurify";

export async function getServerSideProps(context) {
  const data = await fetchData();
  const sanitizedData = DOMPurify.sanitize(data);

  return {
    props: {
      data: sanitizedData,
    },
  };
}

配置严格的内容安全策略（CSP）：通过 CSP 限制脚本加载来源，从而进一步降低 XSS 攻击风险。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "default-src 'self'; script-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },
};

避免客户端模板注入：确保模板中使用的数据已经过安全编码，避免通过字符串拼接构造 HTML。
```
const userInput = "<script>alert('XSS');</script>";
return <div>{userInput}</div>; // 自动转义后的安全输出
```

保护 API 接口：对 API 接收到的数据进行验证和净化，防止恶意数据影响服务器渲染页面。

import DOMPurify from "dompurify";

export default function handler(req, res) {
  const sanitizedData = DOMPurify.sanitize(req.body.data);
  // 处理净化后的数据
  res.status(200).json({ data: sanitizedData });
}

使用专门的 XSS 防护库：例如 xss、DOMPurify、sanitize-html 等都是常用工具。

import sanitizeHtml from "sanitize-html";

const cleanHtml = sanitizeHtml(dirtyHtml, {
  allowedTags: ["b", "i", "em", "strong", "a"],
  allowedAttributes: {
    a: ["href"],
  },
});
return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;

输入验证与编码：对所有输入进行校验和编码，确保应用只呈现安全内容。

const validateInput = (input) => {
  // 自定义验证逻辑
  return input.replace(/<script.*?>.*?<\/script>/gi, "");
};

const safeInput = validateInput(userInput);
return <div>{safeInput}</div>;

持续监控与修补：定期监控应用，更新依赖和补丁以防范新发现的漏洞。
```
npm audit
npm update
```

通过上述措施，你可以有效抵御 XSS 攻击，保障用户访问体验和数据安全。

五、防范跨站请求伪造（CSRF）攻击

CSRF 攻击通过诱导用户执行非预期操作来威胁已认证的会话。为防范此类攻击，应采取如下措施：

使用 CSRF 令牌：为每个请求生成独一无二且不可预测的令牌，确保请求来源合法。

配置 CSRF 中间件：例如，可以使用 csurf 和 cookie-parser 库来实现中间件保护：

// pages/api/csrf.js
import csrf from "csurf";
import cookieParser from "cookie-parser";
import { NextApiRequest, NextApiResponse } from "next";

const csrfProtection = csrf({ cookie: true });

export default function handler(req, res) {
  cookieParser()(req, res, () => {
    csrfProtection(req, res, () => {
      res.status(200).json({ csrfToken: req.csrfToken() });
    });
  });
}

在表单或 API 请求中使用 CSRF 令牌：在前端加载令牌后，将其附加到表单或请求头中：

import { useEffect, useState } from "react";

export default function MyForm() {
  const [csrfToken, setCsrfToken] = useState("");

  useEffect(() => {
    const fetchCsrfToken = async () => {
      const res = await fetch("/api/csrf");
      const data = await res.json();
      setCsrfToken(data.csrfToken);
    };
    fetchCsrfToken();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "CSRF-Token": csrfToken,
      },
      body: JSON.stringify({ data: "example" }),
    });
    const result = await res.json();
    console.log(result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="csrfToken" value={csrfToken} />
      <button type="submit">提交</button>
    </form>
  );
}

配置安全 Cookie：确保与 CSRF 防护相关的 Cookie 具备 HttpOnly、Secure 以及 SameSite（严格或宽松）属性。

res.setHeader(
  "Set-Cookie",
  cookie.serialize("token", token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    maxAge: 3600,
    sameSite: "strict",
    path: "/",
  }),
);

验证请求来源：通过检查 Origin 和 Referrer 头信息来确保请求确实来自受信任的域名。

function validateRequest(req) {
  const origin = req.headers.origin;
  const referrer = req.headers.referer;
  const allowedOrigins = ["https://yourdomain.com"];

  if (
    !allowedOrigins.includes(origin) ||
    !allowedOrigins.includes(referrer)
  ) {
    throw new Error("无效的来源或引用");
  }
}

export default function handler(req, res) {
  try {
    validateRequest(req);
    // 处理合法请求
    res.status(200).json({ message: "请求合法" });
  } catch (error) {
    res.status(403).json({ message: "禁止访问" });
  }
}

保护敏感路由：确保只有经过认证和授权的用户才能访问那些涉及数据修改或敏感操作的接口。

import { getSession } from "next-auth/client";

export default async function handler(req, res) {
  const session = await getSession({ req });

  if (!session) {
    return res.status(401).json({ message: "未授权" });
  }

  // 处理经过授权的请求
  res.status(200).json({ message: "已授权" });
}

在自定义服务器中应用 CSRF 中间件：如果使用自定义服务器（如 Express），可全局应用该中间件：

const express = require("express");
const next = require("next");
const csrf = require("csurf");
const cookieParser = require("cookie-parser");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const csrfProtection = csrf({ cookie: true });

app.prepare().then(() => {
  const server = express();

  server.use(cookieParser());
  server.use(csrfProtection);

  server.get("/api/csrf", (req, res) => {
    res.json({ csrfToken: req.csrfToken() });
  });

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("> 服务器已启动，访问 http://localhost:3000");
  });
});

总之，采用 CSRF 令牌、配置安全 Cookie、验证请求来源以及对敏感路由进行保护，是防范跨站请求伪造攻击的有效手段。

六、认证与授权

在构建安全应用时，完善的认证和授权机制是必不可少的。以下是 Next.js 中实现认证和授权的一些建议：

6.1 用户认证

用户认证用于验证用户身份。在 Next.js 中，可以通过 NextAuth.js 等库来实现。例如：

安装 NextAuth.js：
```
npm install next-auth
```

配置认证：在 pages/api/auth/[...nextauth].js 中设置认证提供商和回调函数。

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // 可添加其他认证方式
  ],
  database: process.env.DATABASE_URL,
  session: {
    jwt: true,
  },
  callbacks: {
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
});

在组件中使用认证：通过检测用户会话来保护页面或组件。

import { useSession, signIn, signOut } from "next-auth/client";

export default function MyComponent() {
  const [session, loading] = useSession();

  if (loading) return <p>加载中...</p>;
  if (!session) return <button onClick={() => signIn()}>登录</button>;

  return (
    <>
      <p>欢迎您, {session.user.name}</p>
      <button onClick={() => signOut()}>退出</button>
    </>
  );
}

6.2 用户授权

授权确保只有具备特定权限的用户才能访问某些资源或执行特定操作。

基于角色的访问控制（RBAC）：为用户定义角色，并在数据库中保存对应权限。
```
const roles = {
  admin: "admin",
  user: "user",
};
```

保护 API 路由：在 API 中根据用户角色判断是否允许访问。

import { getSession } from "next-auth/client";

export default async function handler(req, res) {
  const session = await getSession({ req });

  if (!session || session.user.role !== "admin") {
    return res.status(403).json({ message: "禁止访问" });
  }

  // 处理经过授权的请求
  res.status(200).json({ message: "访问成功" });
}

保护页面：可使用高阶组件（HOC）或自定义 hook 根据用户角色进行页面权限控制。

import { useSession } from "next-auth/client";
import { useRouter } from "next/router";
import { useEffect } from "react";

const withAuth = (WrappedComponent, role) => {
  return (props) => {
    const [session, loading] = useSession();
    const router = useRouter();

    useEffect(() => {
      if (!loading) {
        if (!session) {
          router.push("/api/auth/signin");
        } else if (session.user.role !== role) {
          router.push("/unauthorized");
        }
      }
    }, [session, loading]);

    if (loading || !session || session.user.role !== role) {
      return <p>加载中...</p>;
    }

    return <WrappedComponent {...props} />;
  };
};

export default withAuth;

使用该高阶组件保护页面：

import withAuth from "../path/to/withAuth";

const AdminPage = () => {
  return <p>欢迎管理员</p>;
};

export default withAuth(AdminPage, "admin");

其他建议：始终采用 HTTPS、设置 HttpOnly 与 Secure 属性的 Cookie、实施多重认证（MFA）、定期审核用户角色以及记录审计日志，以便追踪和分析可疑活动。

七、内容安全策略（CSP）的配置

CSP 利用 HTTP 头部控制允许加载的资源类型，是防范 XSS 和数据注入的重要手段。

7.1 理解 CSP 头部

通过设置 Content-Security-Policy 头部，可以限定内容加载的来源。例如：

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;

default-src 'self'：默认仅允许同源内容加载。
script-src 'self' https://apis.google.com：脚本仅允许同源和指定 API 来源。
style-src 'self' 'unsafe-inline'：样式允许同源和内联样式（尽量避免 'unsafe-inline'）。
img-src 'self' data:：图片来源限制为同源或 data URI。

7.2 在 Next.js 中配置 CSP

通过 next.config.js 添加 CSP 头部：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value:
              "default-src 'self'; script-src 'self' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;",
          },
        ],
      },
    ];
  },
};

在自定义服务器中设置 CSP（例如使用 Express）：

const express = require("express");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use((req, res, next) => {
    res.setHeader(
      "Content-Security-Policy",
      "default-src 'self'; script-src 'self' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;",
    );
    next();
  });

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("> 服务器已启动，访问 http://localhost:3000");
  });
});

7.3 CSP 的最佳实践

使用 nonce 或哈希：尽量避免 'unsafe-inline'，可以采用动态生成的 nonce 或预设的哈希值来允许特定内联脚本或样式。
避免使用通配符：不要轻易使用 *，以免放宽安全限制。
报告违规行为：通过 report-uri 或 report-to 指令获取 CSP 违规报告，及时发现和解决问题。
逐步收紧策略：可以从较宽松的策略开始，然后逐步收紧以覆盖所有必要的资源来源。
测试与监控：定期使用工具（如 Google 的 CSP Evaluator）测试 CSP 配置，并监控违规报告。

例如，一个较为全面的 CSP 配置如下：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value:
              "default-src 'self'; script-src 'self' https://apis.google.com 'nonce-<randomNonce>'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://api.example.com; font-src 'self' https://fonts.gstatic.com; frame-src 'self' https://www.youtube.com; object-src 'none'; base-uri 'self'; form-action 'self'; report-uri /csp-violation-report-endpoint;",
          },
        ],
      },
    ];
  },
};

八、访问速率限制

为防止暴力破解、DDoS 攻击或资源滥用，实现请求速率限制是一种有效的防护手段。

8.1 速率限制原理

速率限制控制某个用户在一定时间内发出的请求数量，常见的策略有固定窗口、滑动窗口和令牌桶算法等。

8.2 在 Next.js 中实现速率限制

可以借助 Express 中间件和 express-rate-limit 包来实现，例如：

安装依赖：
```
npm install express express-rate-limit
```

设置自定义服务器并配置中间件：

// server.js
const express = require("express");
const next = require("next");
const rateLimit = require("express-rate-limit");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

// 定义速率限制规则：15 分钟内每个 IP 最多 100 次请求
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100,
  message: "来自该 IP 的请求过多，请15分钟后重试",
});

app.prepare().then(() => {
  const server = express();

  // 为所有请求应用速率限制
  server.use(limiter);

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("> 服务器已启动，访问 http://localhost:3000");
  });
});

运行服务器：通过 node server.js 启动服务，并测试是否在超出限制后返回 429 状态码。

8.3 高级速率限制方案

对于分布式系统，可以使用 Redis 作为存储后端来追踪请求数：

安装 Redis 相关依赖：
```
npm install redis rate-limit-redis
```

修改服务器配置：

// server.js
const express = require("express");
const next = require("next");
const rateLimit = require("express-rate-limit");
const RedisStore = require("rate-limit-redis");
const Redis = require("ioredis");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const redisClient = new Redis();

const limiter = rateLimit({
  store: new RedisStore({
    client: redisClient,
  }),
  windowMs: 15 * 60 * 1000,
  max: 100,
  message: "来自该 IP 的请求过多，请15分钟后重试",
});

app.prepare().then(() => {
  const server = express();

  server.use(limiter);

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log("> 服务器已启动，访问 http://localhost:3000");
  });
});

采用速率限制可以有效防止恶意攻击、暴力破解等行为，同时建议针对不同的用户角色、接口进行更细粒度的控制，并配合监控和告警机制。

九、其他安全措施

安全头部设置：使用 Helmet.js 设置各种 HTTP 头部，增强应用安全。

import helmet from "helmet";

export default function handler(req, res) {
  helmet()(req, res, () => {
    // 处理 API 请求
  });
}

依赖管理：定期更新依赖包并利用工具（如 npm audit）检查安全漏洞。
```
npm outdated
npm update
npm audit
```
环境变量管理：
- 将敏感信息存放于 .env 文件（如 .env.local、.env.production），并确保这些文件不被提交到版本控制。
- 使用 process.env.VARIABLE_NAME 获取变量，开发时可利用 dotenv 加载环境变量。
- 部署时确保环境变量安全配置，并定期轮换 API 密钥或其它机密信息。

静态文件访问控制：确保敏感的静态文件不对外开放访问，可通过配置 rewrites 来控制。

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "/:path*", // 匹配所有 API 路由
      },
    ];
  },
};

通过上述安全策略和最佳实践，你可以构建出既高效又能有效防御常见网络攻击的 Next.js 应用，保障用户数据安全及应用稳定运行。

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。