feat: nonce support (#1566)

Signed-off-by: Quentin Devos <4972091+Okhoshi@users.noreply.github.com>
Co-authored-by: AlexVarchuk <olexandr.varchuk@gmail.com>

README.md

@@ -243,6 +243,7 @@ You can use all of the following options with the standalone version of the <red
 * `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0.
 * `theme` - ReDoc theme. For details check [theme docs](#redoc-theme-object).
 * `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
+* `nonce` - if set, the provided value will be injected in every injected HTML element in the `nonce` attribute. Useful when using CSP, see https://webpack.js.org/guides/csp/.
 * `sideNavStyle` - can be specified in various ways:
   * **summary-only**: displays a summary in the sidebar navigation item. (**default**)
   * **path-only**: displays a path in the sidebar navigation item.

src/components/RedocStandalone.tsx

@@ -17,12 +17,20 @@ export interface RedocStandaloneProps {
   onLoaded?: (e?: Error) => any;
 }
 
+declare let __webpack_nonce__: string;
+
 export const RedocStandalone = function (props: RedocStandaloneProps) {
   const { spec, specUrl, options = {}, onLoaded } = props;
   const hideLoading = argValueToBoolean(options.hideLoading, false);
 
   const normalizedOpts = new RedocNormalizedOptions(options);
 
+  if (normalizedOpts.nonce !== undefined) {
+      try {
+        __webpack_nonce__ = normalizedOpts.nonce;
+      } catch { } // If we have exception, Webpack was not used to run this.
+  }
+
   return (
     <ErrorBoundary>
       <StoreBuilder spec={spec} specUrl={specUrl} options={options} onLoaded={onLoaded}>

src/services/RedocNormalizedOptions.ts

@@ -54,6 +54,7 @@ export interface RedocRawOptions {
   ignoreNamedSchemas?: string[] | string;
   hideSchemaPattern?: boolean;
   generatedPayloadSamplesMaxDepth?: number;
+  nonce?: string;
   hideFab?: boolean;
 }
 
@@ -251,6 +252,8 @@ export class RedocNormalizedOptions {
   generatedPayloadSamplesMaxDepth: number;
   hideFab: boolean;
 
+  nonce?: string;
+
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
     const hook = raw.theme && raw.theme.extensionsHook;
@@ -320,6 +323,7 @@ export class RedocNormalizedOptions {
       RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
         raw.generatedPayloadSamplesMaxDepth,
       );
+    this.nonce = raw.nonce;
     this.hideFab = argValueToBoolean(raw.hideFab);
   }
 }