feat: support security.nonce for add nonce attribute on script tag (#3725)

* feat: support security.nonce for add nonce attribute on script tag

* chore: add test case

* docs: change changeset

* feat: update nonce docs

Author: zllkjc

.changeset/weak-weeks-mate.md

@@ -0,0 +1,15 @@
+---
+'@modern-js/builder-webpack-provider': patch
+'@modern-js/builder-rspack-provider': patch
+'@modern-js/builder-shared': patch
+'@modern-js/runtime': patch
+'@modern-js/app-tools': patch
+'@modern-js/prod-server': patch
+'@modern-js/builder': patch
+'@modern-js/types': patch
+'@modern-js/utils': patch
+'@modern-js/server-core': patch
+---
+
+feat: support security.nonce for add nonce attribute on script tag
+feat: 支持 security.nonce 配置，为 script 标签添加 nonce 属性

packages/builder/builder-rspack-provider/src/config/defaults.ts

@@ -22,6 +22,7 @@ export const createDefaultConfig = () =>
     output: getDefaultOutputConfig(),
     tools: {},
     security: {
+      nonce: '',
       // sri: false
     },
     performance: {

packages/builder/builder-rspack-provider/src/types/config/security.ts

@@ -1,5 +1,16 @@
-// TODO
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SecurityConfig {}
+// Todo support security.sri configuration
+/**
+ * Currently, rspack does not support the security.sri configuration.
+ * But it should because it's a shared configuration.
+ */
+// import type { SharedSecurityConfig } from '@modern-js/builder-shared';
+
+// export type SecurityConfig = SharedSecurityConfig;
+
+// export type NormalizedSecurityConfig = Required<SecurityConfig>;
+
+export interface SecurityConfig {
+  nonce?: string;
+}
 
 export type NormalizedSecurityConfig = Required<SecurityConfig>;

packages/builder/builder-rspack-provider/tests/plugins/html.test.ts

@@ -19,6 +19,26 @@ describe('plugins/html', () => {
     expect(bundlerConfigs[0]).toMatchSnapshot();
   });
 
+  it('should register nonce plugin when using security.nonce', async () => {
+    const builder = await createBuilder({
+      plugins: [builderPluginEntry(), builderPluginHtml()],
+      entry: {
+        main: './src/main.ts',
+      },
+      builderConfig: {
+        security: {
+          nonce: 'test-nonce',
+        },
+      },
+    });
+
+    const {
+      origin: { bundlerConfigs },
+    } = await builder.inspectConfig();
+
+    expect(matchPlugin(bundlerConfigs[0], 'HtmlNoncePlugin')).toBeDefined();
+  });
+
   it('should register crossorigin plugin when using html.crossorigin', async () => {
     const builder = await createBuilder({
       plugins: [builderPluginEntry(), builderPluginHtml()],

packages/builder/builder-shared/src/plugins/HtmlNoncePlugin.ts

@@ -0,0 +1,42 @@
+import type HtmlWebpackPlugin from 'html-webpack-plugin';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+
+type NonceOptions = {
+  nonce: string;
+  HtmlPlugin: typeof HtmlWebpackPlugin;
+};
+
+export class HtmlNoncePlugin implements WebpackPluginInstance {
+  readonly name: string;
+
+  readonly nonce: string;
+
+  readonly HtmlPlugin: typeof HtmlWebpackPlugin;
+
+  constructor(options: NonceOptions) {
+    const { nonce } = options;
+    this.name = 'HtmlNoncePlugin';
+    this.nonce = nonce;
+    this.HtmlPlugin = options.HtmlPlugin;
+  }
+
+  apply(compiler: Compiler): void {
+    if (!this.nonce) {
+      return;
+    }
+
+    compiler.hooks.compilation.tap(this.name, compilation => {
+      this.HtmlPlugin.getHooks(compilation).alterAssetTags.tapPromise(
+        this.name,
+        async alterAssetTags => {
+          const {
+            assetTags: { scripts },
+          } = alterAssetTags;
+
+          scripts.forEach(script => (script.attributes.nonce = this.nonce));
+          return alterAssetTags;
+        },
+      );
+    });
+  }
+}

packages/builder/builder-shared/src/plugins/index.ts

@@ -2,6 +2,7 @@ export { AutoSetRootFontSizePlugin } from './AutoSetRootFontSizePlugin';
 export { HtmlTagsPlugin } from './HtmlTagsPlugin';
 export type { HtmlTagsPluginOptions } from './HtmlTagsPlugin';
 export { HtmlCrossOriginPlugin } from './HtmlCrossOriginPlugin';
+export { HtmlNoncePlugin } from './HtmlNoncePlugin';
 export { HtmlAppIconPlugin } from './HtmlAppIconPlugin';
 export { HtmlFaviconUrlPlugin, type FaviconUrls } from './HtmlFaviconUrlPlugin';
 export { InlineChunkHtmlPlugin } from './InlineChunkHtmlPlugin';

packages/builder/builder-shared/src/types/config/security.ts

@@ -10,4 +10,10 @@ export interface SharedSecurityConfig {
    * verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
    */
   sri?: SriOptions | boolean;
+
+  /**
+   * Adding an nonce attribute to sub-resources introduced by HTML allows the browser to
+   * verify the nonce of the introduced resource, thus preventing xss.
+   */
+  nonce?: string;
 }

packages/builder/builder-webpack-provider/src/config/defaults.ts

@@ -27,7 +27,7 @@ export const createDefaultConfig = () =>
       define: {},
     },
     output: getDefaultOutputConfig(),
-    security: { sri: false, checkSyntax: false },
+    security: { sri: false, checkSyntax: false, nonce: '' },
     experiments: {
       lazyCompilation: false,
     },

packages/builder/builder-webpack-provider/tests/plugins/html.test.ts

@@ -50,6 +50,22 @@ describe('plugins/html', () => {
     expect(await builder.matchWebpackPlugin('HtmlWebpackPlugin')).toBeFalsy();
   });
 
+  it('should register nonce plugin when using security.nonce', async () => {
+    const builder = await createStubBuilder({
+      plugins: [builderPluginEntry(), builderPluginHtml()],
+      entry: {
+        main: './src/main.ts',
+      },
+      builderConfig: {
+        security: {
+          nonce: 'test-nonce',
+        },
+      },
+    });
+
+    expect(await builder.matchWebpackPlugin('HtmlNoncePlugin')).toBeTruthy();
+  });
+
   it('should register crossorigin plugin when using html.crossorigin', async () => {
     const builder = await createStubBuilder({
       plugins: [builderPluginEntry(), builderPluginHtml()],

packages/builder/builder/src/plugins/html.ts

@@ -205,6 +205,20 @@ export const builderPluginHtml = (): DefaultBuilderPlugin => ({
           }),
         );
 
+        if (config.security) {
+          const { nonce } = config.security;
+
+          if (nonce) {
+            const { HtmlNoncePlugin } = await import(
+              '@modern-js/builder-shared'
+            );
+
+            chain
+              .plugin(CHAIN_ID.PLUGIN.HTML_NONCE)
+              .use(HtmlNoncePlugin, [{ nonce, HtmlPlugin }]);
+          }
+        }
+
         if (config.html) {
           const { appIcon, crossorigin } = config.html;