NextJS 12 CORS安全问题求助：未加密源信任及子域信任

问题1：未加密源信任（接受HTTP Origin） #

核心原因 #

NextJS默认同源策略未生效，大概率是谷歌云托管环境（如Cloud Run、App Engine）未强制HTTPS，或是静态资源（比如/_next/data/下的文件）由CDN直接返回时，用了默认CORS头而非自定义配置规则。

解决方案 #

1. NextJS全局配置（next.config.js）

添加HTTPS源白名单、HSTS头，同时强制HTTP请求重定向到HTTPS：

module.exports = {
  // 配置全局响应头
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          // HSTS强制浏览器仅用HTTPS访问
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains; preload'
          },
          // 限制CORS允许的方法和头
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET, HEAD, POST, OPTIONS'
          },
          {
            key: 'Access-Control-Allow-Headers',
            value: 'Content-Type, Authorization'
          }
        ]
      }
    ];
  },
  // HTTP重定向到HTTPS
  async rewrites() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'header',
            key: 'X-Forwarded-Proto',
            value: 'http'
          }
        ],
        destination: 'https://yourdomain.com/:path*',
        permanent: true
      }
    ];
  },
  // CORS规则：仅允许可信HTTPS源
  async cors() {
    return {
      origin: (origin, callback) => {
        const allowedOrigins = ['https://mywebsite.com']; // 替换为你的HTTPS源
        // 允许同域直接访问（origin为null的场景）
        if (!origin || allowedOrigins.includes(origin)) {
          callback(null, true);
        } else {
          callback(new Error('Not allowed by CORS'));
        }
      },
      methods: ['GET', 'HEAD', 'POST', 'OPTIONS'],
      credentials: true
    };
  }
};

2. 谷歌云托管环境配置

• Cloud Run：进入服务设置，开启「强制HTTPS」选项，确保所有HTTP请求自动重定向到HTTPS。
• App Engine：修改app.yaml，添加secure: always和HTTP重定向规则：

handlers:
  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto
    headers:
      Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• CDN/负载均衡：若使用谷歌云CDN，在CDN配置中添加自定义响应头，覆盖默认的Access-Control-Allow-Origin，仅设置为你的HTTPS源。

问题2：信任所有子域改为可信白名单 #

解决方案 #

直接在next.config.js的cors.origin配置中，明确列出所有可信子域，禁止使用正则匹配所有子域（如/^https:\/\/.*\.mywebsite\.com$/），避免扩大攻击面：

async cors() {
  return {
    origin: (origin, callback) => {
      // 明确列出可信子域白名单
      const allowedOrigins = [
        'https://mywebsite.com',
        'https://app.mywebsite.com',
        'https://admin.mywebsite.com'
      ];
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    },
    // 其他配置不变
    methods: ['GET', 'HEAD', 'POST', 'OPTIONS'],
    credentials: true
  };
}

验证步骤 #

部署后，用浏览器开发者工具或curl命令检查响应头：

curl -H "Origin: http://mywebsite.com" -I https://yourdomain.com/_next/data/f_xdDDLA/dashboard.json

确认返回的Access-Control-Allow-Origin仅为你的HTTPS源，且HTTP Origin请求被拒绝或重定向到HTTPS。

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