fix: add sandbox and CSP to playground preview iframe (#3489)

gavinbarron · Copilot · web-flow · commit 3bd07b92df30 · 2026-05-20T17:06:14.000Z
Closes #3488 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -228,6 +228,14 @@ export const withCodeEditor = makeDecorator({
     const loadEditorContent = () => {
       const storyElement = document.createElement('iframe');
 
+      // Security: sandbox the iframe to restrict capabilities.
+      // allow-same-origin is required for ES module loading; exfiltration is
+      // blocked by the CSP meta tag injected below.
+      storyElement.setAttribute(
+        'sandbox',
+        'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms'
+      );
+
       storyElement.addEventListener(
         'load',
         () => {
@@ -242,6 +250,18 @@ export const withCodeEditor = makeDecorator({
           const docContent = `
             <html>
               <head>
+                <meta http-equiv="Content-Security-Policy"
+                  content="default-src 'self';
+                    script-src 'self' 'unsafe-inline';
+                    style-src 'self' 'unsafe-inline';
+                    connect-src https://graph.microsoft.com https://graph.microsoft.us https://dod-graph.microsoft.us https://graph.microsoft.de https://microsoftgraph.chinacloudapi.cn https://canary.graph.microsoft.com https://login.microsoftonline.com https://cdn.graph.office.net 'self';
+                    img-src 'self' data: blob: https://*.microsoft.com https://*.microsoftonline.com https://*.sharepoint.com https://*.office.com https://*.office365.com https://*.windows.net;
+                    font-src 'self' https://static2.sharepointonline.com;
+                    frame-src https://login.microsoftonline.com 'self';
+                    form-action 'none';
+                    object-src 'none';
+                    base-uri 'self';"
+                />
                 <script type="module" src="${mgtScriptName}"></script>
                 <script type="module">
                   import { registerMgtComponents } from "${mgtScriptName}";
