From c75ac9cf70012e2d539b379aab2f0974d088db07 Mon Sep 17 00:00:00 2001
From: Quentin D <4972091+Okhoshi@users.noreply.github.com>
Date: Wed, 23 Mar 2022 17:02:30 +0100
Subject: [PATCH] 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                              | 1 +
 src/components/RedocStandalone.tsx     | 8 ++++++++
 src/services/RedocNormalizedOptions.ts | 4 ++++
 3 files changed, 13 insertions(+)

diff --git a/README.md b/README.md
index b02a5c97..bc5155a6 100644
--- a/README.md
+++ b/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.
diff --git a/src/components/RedocStandalone.tsx b/src/components/RedocStandalone.tsx
index c63a8385..fe3c67e2 100644
--- a/src/components/RedocStandalone.tsx
+++ b/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}>
diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts
index 9d1c9ac6..3d5c65e7 100644
--- a/src/services/RedocNormalizedOptions.ts
+++ b/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);
   }
 }