@builder.io/react 8.2.1 → 8.2.2

package/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={{

package/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>

package/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!),