feat: add iframe block allow permissions configuration #1260

Author: Hufe921

docs/en/guide/schema.md

@@ -177,6 +177,8 @@ interface IElement {
     iframeBlock?: {
       src?: string;
       srcdoc?: string;
+      sandbox?: string[];
+      allow?: string[];
     };
     videoBlock?: {
       src: string;

docs/guide/schema.md

@@ -177,6 +177,8 @@ interface IElement {
     iframeBlock?: {
       src?: string;
       srcdoc?: string;
+      sandbox?: string[];
+      allow?: string[];
     };
     videoBlock?: {
       src: string;

src/editor/core/draw/particle/block/modules/IFrameBlock.ts

@@ -2,6 +2,8 @@ import { IRowElement } from '../../../../../interface/Row'
 
 export class IFrameBlock {
   public static readonly sandbox = ['allow-scripts', 'allow-same-origin']
+  public static readonly allow = ['fullscreen']
+
   private element: IRowElement
 
   constructor(element: IRowElement) {
@@ -22,17 +24,21 @@ export class IFrameBlock {
   }
 
   public render(blockItemContainer: HTMLDivElement) {
-    const block = this.element.block!
+    const { iframeBlock } = this.element.block || {}
     const iframe = document.createElement('iframe')
     iframe.setAttribute('data-id', this.element.id!)
-    iframe.sandbox.add(...IFrameBlock.sandbox)
+    iframe.sandbox.add(...(iframeBlock?.sandbox || IFrameBlock.sandbox))
+    iframe.setAttribute(
+      'allow',
+      [iframeBlock?.allow || IFrameBlock.allow].join(' ')
+    )
     iframe.style.border = 'none'
     iframe.style.width = '100%'
     iframe.style.height = '100%'
-    if (block.iframeBlock?.src) {
-      iframe.src = block.iframeBlock.src
-    } else if (block.iframeBlock?.srcdoc) {
-      iframe.srcdoc = block.iframeBlock.srcdoc
+    if (iframeBlock?.src) {
+      iframe.src = iframeBlock.src
+    } else if (iframeBlock?.srcdoc) {
+      iframe.srcdoc = iframeBlock.srcdoc
     }
     blockItemContainer.append(iframe)
     // 重新定义iframe上属性

src/editor/interface/Block.ts

@@ -3,6 +3,8 @@ import { BlockType } from '../dataset/enum/Block'
 export interface IIFrameBlock {
   src?: string
   srcdoc?: string
+  sandbox?: string[]
+  allow?: string[]
 }
 
 export interface IVideoBlock {

src/editor/utils/element.ts

@@ -1298,10 +1298,12 @@ export function createDomFromElementList(
             clipboardDom.append(video)
           }
         } else if (element.block?.type === BlockType.IFRAME) {
-          const { src, srcdoc } = element.block.iframeBlock || {}
+          const { src, srcdoc, sandbox, allow } =
+            element.block.iframeBlock || {}
           if (src || srcdoc) {
             const iframe = document.createElement('iframe')
-            iframe.sandbox.add(...IFrameBlock.sandbox)
+            iframe.sandbox.add(...(sandbox || IFrameBlock.sandbox))
+            iframe.setAttribute('allow', [allow || IFrameBlock.allow].join(' '))
             iframe.style.display = 'block'
             iframe.style.border = 'none'
             if (src) {