如何针对特定域名启用/禁用Helmet的crossOriginEmbedderPolicy？

核心问题说明 #

Cross-Origin-Embedder-Policy（COEP）启用后（如设为require-corp）会限制所有跨域资源加载，但Helmet 5.x的内置配置无法直接在该选项内设置域名白名单——因为COEP本身的HTTP头语法不支持域名匹配逻辑，只能通过条件式动态设置响应头实现针对特定域名的策略禁用。

可行实现方案 #

方案1：NodeJS自定义服务器中动态控制COEP #

如果使用NodeJS托管NextJS应用，可在服务器中间件中根据请求来源判断，决定是否启用COEP：

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

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

// 定义需要禁用COEP的目标域名白名单
const allowedDomains = ['target-domain.com', 'sub.target-domain.com'];

nextApp.prepare().then(() => {
  // 全局初始化Helmet，默认关闭COEP
  app.use(helmet({
    crossOriginEmbedderPolicy: false,
  }));

  // 中间件：根据请求来源动态启用COEP
  app.use((req, res, next) => {
    let enableCoep = true;
    const referer = req.get('Referer');
    
    if (referer) {
      const refererDomain = new URL(referer).hostname;
      if (allowedDomains.includes(refererDomain)) {
        enableCoep = false;
      }
    }

    // 对非白名单域名启用COEP
    if (enableCoep) {
      res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
    }
    next();
  });

  // 处理NextJS路由
  app.all('*', (req, res) => handle(req, res));

  app.listen(3000, () => {
    console.log('> Ready on http://localhost:3000');
  });
});

方案2：NextJS中间件（13+版本）实现路由级控制 #

若使用NextJS 13+的App Router或Page Router，可在middleware.ts中直接针对请求动态设置响应头：

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

// 目标域名白名单
const allowedDomains = ['target-domain.com', 'sub.target-domain.com'];

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const referer = request.headers.get('referer');
  
  let enableCoep = true;
  if (referer) {
    const refererDomain = new URL(referer).hostname;
    if (allowedDomains.includes(refererDomain)) {
      enableCoep = false;
    }
  }

  if (enableCoep) {
    response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
  } else {
    // 移除可能存在的全局COEP头
    response.headers.delete('Cross-Origin-Embedder-Policy');
  }

  return response;
}

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

之前方案无效的原因 #

1. COEP本身的HTTP头语法没有域名白名单配置项，无法通过Helmet的crossOriginEmbedderPolicy直接实现域名过滤；
2. 早期讨论的方案多针对Helmet旧版本，且未结合NextJS/NodeJS的中间件动态控制逻辑，仅依赖Helmet内置配置无法满足需求。

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