Merge pull request #4361 from serlo/sandbox-iframe-in-edusharing-rend…

…erer fix(plugin-edusharing): sandbox iframes to secure parent
serlo · Dec 18, 2024 · f39bef3 · f39bef3
2 parents f3e4897 + ee69fcb
commit f39bef3
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/packages/editor/src/plugins/edusharing-asset/renderer.tsx b/packages/editor/src/plugins/edusharing-asset/renderer.tsx
@@ -297,7 +297,7 @@ export function EdusharingAssetRenderer(props: {
     if (isLearningApp || isPdf) {
       return {
         embedType: isLearningApp ? 'learning-app' : isPdf ? 'pdf' : 'unknown',
-        htmlSnippet: `<iframe style="${cssReset} height: 100%; width: 100%;" src="${iframe.src}"></iframe>`,
+        htmlSnippet: `<iframe style="${cssReset} height: 100%; width: 100%;" src="${iframe.src}" sandbox="allow-scripts"></iframe>`,
         defineContainerHeight: true,
       }
     }
@@ -313,10 +313,6 @@ export function EdusharingAssetRenderer(props: {
   function renderEmbed() {
     if (embedHtml === null) return
 
-    // IframeResizer properties:
-    // - `srcDoc` -> Sets the iframe content
-    // - `checkOrigin={false}` -> Necessary when using srcDoc
-    // - Missing `sandbox` -> Should put no restrictions on what the iframe can do: A) Make iframe send the same cookies as the host. B) Allow it to execute scripts. Both important to be able to fetch video.
     return (
       <div
         className="z-15 max-w-full"
@@ -326,19 +322,24 @@ export function EdusharingAssetRenderer(props: {
         }}
         data-embed-type={embedType}
       >
+        {/* `srcDoc` -> Sets the iframe content */}
+        {/* `sandbox="allow-scripts"` -> Limit iframe access to parent context but allow scripts to execute */}
         {defineContainerHeight ? (
           <iframe
             srcDoc={embedHtml}
             style={{
               width: '100%',
               height: '100%',
             }}
+            sandbox="allow-scripts"
           />
         ) : (
           <MemoizedIframeResizer
+            // Necessary when using srcDoc
             checkOrigin={false}
             srcDoc={embedHtml}
             style={{ width: '100%' }}
+            sandbox="allow-scripts"
           />
         )}
       </div>