Fix passing the correct nonce for iframely script and preload it (#2360)

Author: jpreynat

src/components/DocumentView/Embed.tsx

@@ -1,4 +1,5 @@
 import * as gitbookAPI from '@gitbook/api';
+import { headers } from 'next/headers';
 import Script from 'next/script';
 import ReactDOM from 'react-dom';
 
@@ -12,8 +13,9 @@ import { IntegrationBlock } from './Integration';
 
 export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
  const { block, context, ...otherProps } = props;
+ const nonce = headers().get('x-nonce') || undefined;
 
- ReactDOM.preconnect('https://cdn.iframe.ly');
+ ReactDOM.preload('https://cdn.iframe.ly/embed.js', { as: 'script', nonce });
 
  const { data: embed } = await (context.content
  ? api().spaces.getEmbedByUrlInSpace(context.content.spaceId, { url: block.data.url })
@@ -28,8 +30,7 @@ export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
  __html: embed.html,
  }}
  />
- {/* We load the iframely script to resize the embed iframes dynamically */}
- <Script src="https://cdn.iframe.ly/embed.js" defer async />
+ <Script src="https://cdn.iframe.ly/embed.js" nonce={nonce} />
  </>
  ) : embed.type === 'integration' ? (
  <IntegrationBlock