如何在Next.js中解除CSP对Google AdSense等服务的拦截

你的CSP配置仅覆盖了script-src指令，但Google AdSense、Analytics这类服务还会涉及图片、iframe、样式、网络请求等多类资源，必须补充对应指令才能正常加载。以下是调整后的完整配置：

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.google.com *.doubleclick.net *.googleadservices.com *.googlesyndication.com *.googletagmanager.com *.google-analytics.com *.gstatic.com;
  img-src 'self' data: *.google.com *.doubleclick.net *.googlesyndication.com *.googleadservices.com *.gstatic.com;
  frame-src 'self' *.doubleclick.net *.googlesyndication.com;
  style-src 'self' 'unsafe-inline' *.google.com;
  connect-src 'self' *.google-analytics.com *.analytics.google.com *.googletagmanager.com;
`;

关键补充说明： #

• *.gstatic.com：Google静态资源分发域名，AdSense的脚本、图标等资源会从此加载，之前的配置遗漏了该域名。
• img-src：允许广告图片、标识的加载路径，添加data:是为了兼容部分使用base64格式的广告图片。
• frame-src：AdSense通过iframe嵌入广告内容，必须允许对应域名才能正常渲染。
• style-src：广告会包含内联样式，保留'unsafe-inline'的同时补充Google的样式域名，避免样式加载失败。
• connect-src：支持Google Analytics、Tag Manager的网络请求，确保数据上报功能正常。

修改后，将配置在next.config.js的headers中正确引用，示例如下：

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
          },
        ],
      },
    ];
  },
};

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