http-headers - 如何将 HTTP 安全 header 添加到 Next.js 应用程序

Question

我是 Web 开发的新手，我正在尝试将 HTTP 安全 header 添加到我的 Next.js 应用程序中，但是如果我在 securityheader.com 中检查它似乎不起作用。

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

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

app
  .prepare()
  .then(() => {
    const server = express();
    server.use(helmet());
    server.use(helmet.xframe());
    server.use(helmet.hsts());

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

    server.listen(3000, err => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

我已经在寻找信息 4 天了，但我仍然没有找到任何示例，我无法弄清楚我到底做错了什么。

Answer 1

我找到了2个解决方案:

您可以使用 Jaga Apple 的 next-secure-headers可以找到 npm 包 here在 GitHub 上。这基本上是一个基于 TypeScript 的包装器，可以用于整个 App组件或个人 Page组件，通过在 Next.js 期间访问请求对象 getInitialProps生命周期，不幸的是也形成了这个 issue .您还需要了解一点 TypeScript 才能使用它，并且必须根据这些 Next.js instructions 安装 TypeScript ，或者这个 Next.js tutorial .

但是，如果您正在部署 Next.js，上述解决方案目前不起作用。项目至 Vercel (曾经是 Zeit/Now)，这是我个人更喜欢的，因为 Next.js 是为 Vercel 创建的。我为这种情况找到的解决方案是实现自定义 routes/headers now.json 中的配置，例如:

{
  ..., // <-- Other configuration options
  "routes": [
    {
      "src": "/.*",
      "headers": {
        "Content-Security-Policy": "default-src 'self'; img-src 'self' https://cdn.sanity.io; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'",
        "Feature-Policy": "'none'",
        "Referrer-Policy": "same-origin",
        "X-Content-Type-Options": "nosniff",
        "X-Frame-Options": "deny",
        "X-XSS-Protection": "1"
      },
      "continue": true
    }
  ]
}