Add opt out option allowDynamicStyling for CSP enforcers (#261)

* add readme * accept allowDynamicStyling * changeset * Update packages/explorer/src/EmbeddedExplorer.ts Co-authored-by: Trevor Scheer <[email protected]> * Update packages/sandbox/src/EmbeddedSandbox.ts Co-authored-by: Trevor Scheer <[email protected]> --------- Co-authored-by: Trevor Scheer <[email protected]>
apollographql · Jun 15, 2023 · 7212121 · 7212121
1 parent 3c6301a
commit 7212121
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/.changeset/quick-points-drop.md b/.changeset/quick-points-drop.md
@@ -0,0 +1,6 @@
+---
+'@apollo/explorer': minor
+'@apollo/sandbox': minor
+---
+
+Allow opting out of adding dynamic styles to the iframe rendered by Embedded Explorer / Sandbox
diff --git a/packages/explorer/README.md b/packages/explorer/README.md
@@ -74,6 +74,16 @@ me {
 
 }
 
+...
+// style the iframe for your site
+<style>
+  iframe {
+    height: 100%;
+    width: 100%;
+    border: none;
+  }
+</style>
+<div id="embeddableExplorer" />
 ```
 
 ### Examples from the raw cdn hosted umd file

diff --git a/packages/explorer/src/EmbeddedExplorer.ts b/packages/explorer/src/EmbeddedExplorer.ts
@@ -72,6 +72,14 @@ export interface BaseEmbeddableExplorerOptions {
     accountId: string;
     inviteToken: string;
   };
+
+  /**
+   * optional. defaults to true.
+   * If false, the `width: 100%` and `height: 100%` are not applied to the iframe dynamically.
+   * You might pass false here if you enforce a Content Security Policy that disallows dynamic
+   * style injection.
+   */
+  allowDynamicStyles?: boolean;
 }
 
 interface EmbeddableExplorerOptionsWithSchema
@@ -153,11 +161,13 @@ export class EmbeddedExplorer {
     iframeElement.src = this.embeddedExplorerURL;
 
     iframeElement.id = IFRAME_DOM_ID(this.uniqueEmbedInstanceId);
-    iframeElement.setAttribute(
-      'style',
-      'height: 100%; width: 100%; border: none;'
-    );
-
+    // default to `true` (`true` and `undefined` both ok)
+    if (this.options.allowDynamicStyles !== false) {
+      iframeElement.setAttribute(
+        'style',
+        'height: 100%; width: 100%; border: none;'
+      );
+    }
     element?.appendChild(iframeElement);
 
     // inject the Apollo favicon if there is not one on this page

diff --git a/packages/sandbox/README.md b/packages/sandbox/README.md
@@ -43,6 +43,14 @@ function App() {
 
 }
 ...
+// style the iframe for your site
+<style>
+  iframe {
+    height: 100%;
+    width: 100%;
+    border: none;
+  }
+</style>
 <div id="embeddableSandbox" />
 
 ```

diff --git a/packages/sandbox/src/EmbeddedSandbox.ts b/packages/sandbox/src/EmbeddedSandbox.ts
@@ -72,6 +72,13 @@ export interface EmbeddableSandboxOptions {
    * If false, the endpoint box at the top of sandbox will be `initialEndpoint` permanently
    */
   endpointIsEditable?: boolean;
+  /**
+   * optional. defaults to true.
+   * If false, the `width: 100%` and `height: 100%` are not applied to the iframe dynamically.
+   * You might pass false here if you enforce a Content Security Policy that disallows dynamic
+   * style injection.
+   */
+  allowDynamicStyles?: boolean;
 }
 
 type InternalEmbeddableSandboxOptions = EmbeddableSandboxOptions & {
@@ -180,10 +187,13 @@ export class EmbeddedSandbox {
     )}?${queryString}`;
 
     iframeElement.id = IFRAME_DOM_ID(this.uniqueEmbedInstanceId);
-    iframeElement.setAttribute(
-      'style',
-      'height: 100%; width: 100%; border: none;'
-    );
+    // default to `true` (`true` and `undefined` both ok)
+    if (this.options.allowDynamicStyles !== false) {
+      iframeElement.setAttribute(
+        'style',
+        'height: 100%; width: 100%; border: none;'
+      );
+    }
 
     element?.appendChild(iframeElement);