fix: add allow options to sandbox attribute

packages/angular/src/create-document.ts

@@ -7,8 +7,9 @@ export type EmbedCreateDocumentProps = {
   className?: string;
   host?: string;
   presignToken: string;
-  externalId?: string; // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
+  externalId?: string;
 
+  // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
   darkModeDisabled?: boolean | undefined;
@@ -20,9 +21,10 @@ export type EmbedCreateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
-  // prior to being added to the main props
+  };
 
+  // Additional props to be passed to the iframe, used for testing out features
+  // prior to being added to the main props
   additionalProps?: Record<string, string | number | boolean> | undefined;
   onDocumentCreated?: (data: {
     externalId: string;
@@ -35,7 +37,12 @@ import { CssVars } from "./css-vars";
 @Component({
   selector: "embed-create-document",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
+    <iframe
+      #__iframe
+      [class]="className"
+      [attr.src]="src"
+      [attr.sandbox]="sandbox"
+    ></iframe>
   `,
   styles: [
     `
@@ -82,6 +89,10 @@ export default class EmbedCreateDocument {
     srcUrl.hash = encodedOptions;
     return srcUrl.toString();
   }
+  get sandbox() {
+    // biome-ignore lint/suspicious/noExplicitAny: Mitosis types `sandbox` as a single token, but the attribute is space-separated.
+    return "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" as any;
+  }
   handleMessage(event: MessageEvent) {
     if (this.__iframe?.nativeElement?.contentWindow === event.source) {
       switch (event.data.type) {

packages/angular/src/create-envelope.ts

@@ -17,8 +17,9 @@ export type EmbedCreateEnvelopeProps = {
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
   darkModeDisabled?: boolean | undefined;
-  language?: string | undefined; // biome-ignore lint/suspicious/noExplicitAny: Hehe
+  language?: string | undefined;
 
+  // biome-ignore lint/suspicious/noExplicitAny: Hehe
   features?: DeepPartial<EnvelopeEditorSettings> & Record<string, any>;
   onEnvelopeCreated?: (data: {
     externalId: string | null;
@@ -32,7 +33,12 @@ import type { DeepPartial, EnvelopeEditorSettings } from "./features-type";
 @Component({
   selector: "embed-create-envelope",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
+    <iframe
+      #__iframe
+      [class]="className"
+      [attr.src]="src"
+      [attr.sandbox]="sandbox"
+    ></iframe>
   `,
   styles: [
     `
@@ -83,6 +89,10 @@ export default class EmbedCreateEnvelope {
     srcUrl.hash = encodedOptions;
     return srcUrl.toString();
   }
+  get sandbox() {
+    // biome-ignore lint/suspicious/noExplicitAny: Mitosis types `sandbox` as a single token, but the attribute is space-separated.
+    return "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" as any;
+  }
   handleMessage(event: MessageEvent) {
     if (this.__iframe?.nativeElement?.contentWindow === event.source) {
       switch (event.data.type) {

packages/angular/src/create-template.ts

@@ -7,8 +7,9 @@ export type EmbedCreateTemplateProps = {
   className?: string;
   host?: string;
   presignToken: string;
-  externalId?: string; // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
+  externalId?: string;
 
+  // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
   darkModeDisabled?: boolean | undefined;
@@ -20,9 +21,10 @@ export type EmbedCreateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
-  // prior to being added to the main props
+  };
 
+  // Additional props to be passed to the iframe, used for testing out features
+  // prior to being added to the main props
   additionalProps?: Record<string, string | number | boolean> | undefined;
   onTemplateCreated?: (data: {
     externalId: string;
@@ -35,7 +37,12 @@ import { CssVars } from "./css-vars";
 @Component({
   selector: "embed-create-template",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
+    <iframe
+      #__iframe
+      [class]="className"
+      [attr.src]="src"
+      [attr.sandbox]="sandbox"
+    ></iframe>
   `,
   styles: [
     `
@@ -82,6 +89,10 @@ export default class EmbedCreateTemplate {
     srcUrl.hash = encodedOptions;
     return srcUrl.toString();
   }
+  get sandbox() {
+    // biome-ignore lint/suspicious/noExplicitAny: Mitosis types `sandbox` as a single token, but the attribute is space-separated.
+    return "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" as any;
+  }
   handleMessage(event: MessageEvent) {
     if (this.__iframe?.nativeElement?.contentWindow === event.source) {
       switch (event.data.type) {

packages/angular/src/css-vars.ts

@@ -2,84 +2,57 @@ export type CssVars = {
   /** Base background color */
   background?: string | null;
   /** Base text color */
-
   foreground?: string | null;
   /** Muted/subtle background color */
-
   muted?: string | null;
   /** Muted/subtle text color */
-
   mutedForeground?: string | null;
   /** Popover/dropdown background color */
-
   popover?: string | null;
   /** Popover/dropdown text color */
-
   popoverForeground?: string | null;
   /** Card background color */
-
   card?: string | null;
   /** Card border color */
-
   cardBorder?: string | null;
   /** Card border tint/highlight color */
-
   cardBorderTint?: string | null;
   /** Card text color */
-
   cardForeground?: string | null;
   /** Field card background color */
-
   fieldCard?: string | null;
   /** Field card border color */
-
   fieldCardBorder?: string | null;
   /** Field card text color */
-
   fieldCardForeground?: string | null;
   /** Widget background color */
-
   widget?: string | null;
   /** Widget text color */
-
   widgetForeground?: string | null;
   /** Default border color */
-
   border?: string | null;
   /** Input field border color */
-
   input?: string | null;
   /** Primary action/button color */
-
   primary?: string | null;
   /** Primary action/button text color */
-
   primaryForeground?: string | null;
   /** Secondary action/button color */
-
   secondary?: string | null;
   /** Secondary action/button text color */
-
   secondaryForeground?: string | null;
   /** Accent/highlight color */
-
   accent?: string | null;
   /** Accent/highlight text color */
-
   accentForeground?: string | null;
   /** Destructive/danger action color */
-
   destructive?: string | null;
   /** Destructive/danger text color */
-
   destructiveForeground?: string | null;
   /** Focus ring color */
-
   ring?: string | null;
   /** Border radius size in REM units */
-
   radius?: string | null;
   /** Warning/alert color */
-
   warning?: string | null;
 }

packages/angular/src/direct-template.ts

@@ -7,18 +7,20 @@ export type EmbedDirectTemplateProps = {
   className?: string;
   host?: string;
   token: string;
-  externalId?: string; // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
+  externalId?: string;
 
+  // @src: /apps/web/src/app/embed/direct/[[...url]]/schema
   css?: string | undefined;
   cssVars?: (CssVars & Record<string, string>) | undefined;
   darkModeDisabled?: boolean | undefined;
   language?: string | undefined;
   email?: string | undefined;
   lockEmail?: boolean | undefined;
   name?: string | undefined;
-  lockName?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
-  // prior to being added to the main props
+  lockName?: boolean | undefined;
 
+  // Additional props to be passed to the iframe, used for testing out features
+  // prior to being added to the main props
   additionalProps?: Record<string, string | number | boolean> | undefined;
   onDocumentReady?: () => void;
   onDocumentCompleted?: (data: {
@@ -36,7 +38,12 @@ import { CssVars } from "./css-vars";
 @Component({
   selector: "embed-direct-template",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
+    <iframe
+      #__iframe
+      [class]="className"
+      [attr.src]="src"
+      [attr.sandbox]="sandbox"
+    ></iframe>
   `,
   styles: [
     `
@@ -89,32 +96,30 @@ export default class EmbedDirectTemplate {
       )
     );
     const srcUrl = new URL(`/embed/direct/${this.token}`, appHost);
-
     if (this.externalId) {
       srcUrl.searchParams.set("externalId", this.externalId);
     }
-
     return `${srcUrl}#${encodedOptions}`;
   }
+  get sandbox() {
+    // biome-ignore lint/suspicious/noExplicitAny: Mitosis types `sandbox` as a single token, but the attribute is space-separated.
+    return "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" as any;
+  }
   handleMessage(event: MessageEvent) {
     if (this.__iframe?.nativeElement?.contentWindow === event.source) {
       switch (event.data.action) {
         case "document-ready":
           this.onDocumentReady?.();
           break;
-
         case "document-completed":
           this.onDocumentCompleted?.(event.data.data);
           break;
-
         case "document-error":
           this.onDocumentError?.(event.data.data);
           break;
-
         case "field-signed":
           this.onFieldSigned?.();
           break;
-
         case "field-unsigned":
           this.onFieldUnsigned?.();
           break;

packages/angular/src/features-type.ts

@@ -1,9 +1,9 @@
 export type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T;
+
 /**
  * Envelope editor settings (features) for create/edit envelope embeds.
  * Matches ZEnvelopeEditorSettingsSchema from the app.
  */
-
 export type EnvelopeEditorSettings = {
   general: {
     allowConfigureEnvelopeTitle: boolean;
@@ -12,8 +12,8 @@ export type EnvelopeEditorSettings = {
     allowPreviewStep: boolean;
     minimizeLeftSidebar: boolean;
   };
-  /** If null, envelope settings will not be available to be seen/updated. */
 
+  /** If null, envelope settings will not be available to be seen/updated. */
   settings: {
     allowConfigureSignatureTypes: boolean;
     allowConfigureLanguage: boolean;
@@ -26,24 +26,24 @@ export type EnvelopeEditorSettings = {
     allowConfigureEmailReplyTo: boolean;
   } | null;
   actions: {
-    allowAttachments: boolean; // allowDistributing: boolean; // These are not available for embeds.
+    allowAttachments: boolean;
+    // allowDistributing: boolean; // These are not available for embeds.
     // allowDirectLink: boolean; // These are not available for embeds.
     // allowDuplication: boolean; // These are not available for embeds.
     // allowDownloadPDF: boolean; // These are not available for embeds.
     // allowDeletion: boolean; // These are not available for embeds.
-
   };
-  /** If null, no adjustments to envelope items will be allowed. */
 
+  /** If null, no adjustments to envelope items will be allowed. */
   envelopeItems: {
     allowConfigureTitle: boolean;
     allowConfigureOrder: boolean;
     allowUpload: boolean;
     allowDelete: boolean;
     allowReplace: boolean;
   } | null;
-  /** If null, recipients will not be configurable at all. */
 
+  /** If null, recipients will not be configurable at all. */
   recipients: {
     // allowAIDetection: boolean; // These aren't available for embeds.
     allowConfigureSigningOrder: boolean;
@@ -52,8 +52,9 @@ export type EnvelopeEditorSettings = {
     allowViewerRole: boolean;
     allowCCerRole: boolean;
     allowAssistantRole: boolean;
-  } | null; // fields: {
+  } | null;
+
+  // fields: {
   //   allowAIDetection: boolean; // These aren't available for embeds.
   // };
-
 }