Next.js静态导出页面如何为外部脚本配置Nonce适配CSP

针对你遇到的静态页面无法动态获取Nest.js生成的Nonce的问题，以下是几个可行的解决方案：

方案一：使用静态哈希替代Nonce（最简便） #

因为Next.js静态导出的内联脚本内容固定不变，你可以直接使用错误提示中给出的哈希值，将其加入CSP指令，无需动态生成Nonce。

操作步骤： #

1. 确认错误信息中的哈希值：sha256-YEW6xWPeqBjHBDOEAtquJ3uGKv7joqcD9CmwKxy2ZGc=
2. 在Nest.js的CSP配置中，将该哈希添加到script-src-elem指令中：

// Nest.js 中使用helmet配置CSP的示例
import { helmet } from 'helmet';

app.use(helmet.contentSecurityPolicy({
  directives: {
    'script-src-elem': [
      'example.com',
      'https://www.googletagmanager.com',
      "'sha256-YEW6xWPeqBjHBDOEAtquJ3uGKv7joqcD9CmwKxy2ZGc='"
    ],
    // 其他CSP指令...
  },
}));

这种方式无需修改静态页面，直接通过固定哈希放行指定内联脚本，安全性比unsafe-inline高，完美适配静态导出场景。

方案二：Nest.js代理静态资源并动态注入Nonce #

如果必须使用动态Nonce，可以让Nest.js作为静态页面的代理，每次请求时生成Nonce并注入到静态HTML中，同时同步设置CSP头。

操作步骤： #

1. Next.js构建时预留Nonce占位符：
   在Next.js的Script组件中，将nonce属性设为占位符（比如{{NONCE_VALUE}}）：

   // Next.js页面中的Script组件示例
   import Script from 'next/script';
   
   export default function Home() {
     return (
       <>
         <Script
           src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
           nonce="{{NONCE_VALUE}}"
         />
         {/* 内联脚本同样需要添加nonce属性 */}
         <Script nonce="{{NONCE_VALUE}}">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', 'GA_TRACKING_ID');
           `}
         </Script>
       </>
     );
   }
   

   执行静态导出后，静态HTML中会保留这个占位符。

2. Nest.js代理静态文件并注入Nonce：
   在Nest.js中创建控制器，负责读取静态HTML文件，生成随机Nonce，替换占位符，并设置CSP响应头：

   // Nest.js控制器示例
   import { Controller, Get, Res } from '@nestjs/common';
   import { Response } from 'express';
   import { readFileSync } from 'fs';
   import { join } from 'path';
   import { randomBytes } from 'crypto';
   
   @Controller()
   export class StaticController {
     @Get()
     serveStatic(@Res() res: Response) {
       // 生成安全随机Nonce
       const nonce = randomBytes(16).toString('hex');
       // 读取静态HTML文件（根据实际导出路径调整）
       const htmlPath = join(__dirname, '../static-exports', 'index.html');
       let htmlContent = readFileSync(htmlPath, 'utf8');
       // 全局替换占位符为实际Nonce
       htmlContent = htmlContent.replace(/{{NONCE_VALUE}}/g, nonce);
       // 设置CSP头，包含当前请求的Nonce
       res.setHeader(
         'Content-Security-Policy',
         `script-src-elem example.com https://www.googletagmanager.com 'nonce-${nonce}'`
       );
       // 返回修改后的HTML
       res.send(htmlContent);
     }
   }
   

   这种方式实现了每次请求使用不同的Nonce，安全性最高，同时适配静态导出的页面架构。

方案三：预生成多版本静态页面（备选） #

如果上述方案都无法实施，可以在Next.js构建时预生成多个带有不同固定Nonce的静态页面版本，Nest.js每次请求随机选择一个版本返回，并在CSP头中对应设置该版本的Nonce。

但这种方式的Nonce并非真正动态随机（每个版本的Nonce固定），安全性略低于方案二，仅作为应急备选。

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