feat: ENG-8920 Add support for CSP nonce attribute in Gen 1 SDK (#4080)

## Description

- Add support for CSP `nonce` attribute in Gen 1 SDK

_Loom_
https://www.loom.com/share/34f7db2b1b884afb94443ca2daa97b0f

Author: midhunadarvin

.changeset/purple-kings-report.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/react": patch
+---
+
+feat: add `nonce` support for Content Security Policy

packages/react/src/blocks/PersonalizationContainer.tsx

@@ -106,6 +106,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
             </template>
           ))}
           <script
+            nonce={builderStore.context.nonce}
             id={`variants-script-${props.builderBlock?.id}`}
             dangerouslySetInnerHTML={{
               __html: getPersonalizationScript(
@@ -123,6 +124,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
           />
         </div>
         <script
+          nonce={builderStore.context.nonce}
           dangerouslySetInnerHTML={{
             __html: `
          window.__hydrated = window.__hydrated || {};
@@ -194,6 +196,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
         )}
       </div>
       <script
+        nonce={builderStore.context.nonce}
         dangerouslySetInnerHTML={{
           __html: `
          window.__hydrated = window.__hydrated || {};

packages/react/src/blocks/Router.tsx

@@ -262,7 +262,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
           return (
             <div className="builder-router" data-model={model}>
               {/* TODO: move to emotion */}
-              <style>{`
+              <style nonce={state.context.nonce}>{`
                 @keyframes builderLoadingSpinner {
                   0% {
                     transform: rotate(0deg);
@@ -297,6 +297,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
                 options={{
                   key: Builder.isEditing ? undefined : this.model + ':' + url, // TODO: other custom targets specify if should refetch components on change
                 }}
+                nonce={state.context.nonce}
               >
                 {/* TODO: builder blocks option for loading stuff */}
                 {/* TODO: input for builder blocks for this */}

packages/react/src/blocks/Symbol.tsx

@@ -172,6 +172,7 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                   hydrate={state.state?._hydrate}
                   builderBlock={this.props.builderBlock}
                   dataOnly={this.props.dataOnly}
+                  nonce={state.context.nonce}
                 >
                   {/* TODO: builder blocks option for loading stuff */}
                   {this.props.children}

packages/react/src/components/builder-component.component.tsx

@@ -298,6 +298,11 @@ export interface BuilderComponentProps {
    * Pass a list of custom components to register with Builder.io.
    */
   customComponents?: Array<RegisteredComponent>;
+
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 }
 
 export interface BuilderComponentState {
@@ -439,6 +444,7 @@ export class BuilderComponent extends React.Component<
       context: {
         ...props.context,
         apiKey: this.props.apiKey || builder.apiKey,
+        nonce: this.props.nonce,
       },
       state: Object.assign(this.rootState, {
         ...(this.inlinedContent && this.inlinedContent.data && this.inlinedContent.data.state),
@@ -1097,6 +1103,7 @@ export class BuilderComponent extends React.Component<
                       }
                       contentError={this.props.contentError}
                       modelName={this.name || 'page'}
+                      nonce={this.props.nonce}
                     >
                       {(data, loading, fullData) => {
                         if (this.props.dataOnly) {
@@ -1191,6 +1198,7 @@ export class BuilderComponent extends React.Component<
                           >
                             {!codegen && this.getCss(data) && (
                               <style
+                                nonce={this.props.nonce}
                                 ref={ref => (this.styleRef = ref)}
                                 className="builder-custom-styles"
                                 dangerouslySetInnerHTML={{

packages/react/src/components/builder-content.component.tsx

@@ -50,6 +50,10 @@ export type BuilderContentProps<ContentType> = {
    * Required if `inline` is set to `true`.
    */
   content?: Content;
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 } & ({ model: string } | { modelName: string }); // model and modelName are aliases of the same thing¸
 
 /**
@@ -314,7 +318,7 @@ export class BuilderContent<ContentType extends object = any> extends React.Comp
     const useData: any = this.data;
     const TagName = this.props.dataOnly ? NoWrap : 'div';
     return (
-      <VariantsProvider initialContent={useData}>
+      <VariantsProvider initialContent={useData} nonce={this.props.nonce}>
         {(variants, renderScript) => {
           return (
             <React.Fragment>

packages/react/src/components/variants-provider.component.tsx

@@ -99,9 +99,10 @@ const variantsScript = (variantsString: string, contentId: string) =>
 interface VariantsProviderProps {
   initialContent: BuilderContent;
   children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+  nonce?: string;
 }
 
-export const VariantsProvider = ({ initialContent, children }: VariantsProviderProps) => {
+export const VariantsProvider = ({ initialContent, children, nonce }: VariantsProviderProps) => {
   if (Builder.isBrowser && !builder.canTrack) {
     return children([initialContent]);
   }
@@ -126,6 +127,7 @@ export const VariantsProvider = ({ initialContent, children }: VariantsProviderP
     );
     const renderScript = () => (
       <script
+        nonce={nonce}
         id={`variants-script-${initialContent.id}`}
         dangerouslySetInnerHTML={{
           __html: variantsScript(variantsJson, initialContent.id!),