From d501cb21f7f38ad72357fb34b6d8563108ed4f5e Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Wed, 7 May 2025 12:31:32 +0800
Subject: [PATCH] feat(plugin-block-iframe): add permissions policy options and
 descriptions in schema settings (#6824)

* feat(plugin-block-iframe): add permissions policy options and descriptions in schema settings

* feat: allow clear
---
 packages/core/client/src/locale/en-US.json    |   3 +-
 packages/core/client/src/locale/zh-CN.json    |  12 +-
 .../src/client/schemaSettings.tsx             | 112 +++++++++++++++++-
 3 files changed, 123 insertions(+), 4 deletions(-)

diff --git a/packages/core/client/src/locale/en-US.json b/packages/core/client/src/locale/en-US.json
index d0867f786e..e70a39d23f 100644
--- a/packages/core/client/src/locale/en-US.json
+++ b/packages/core/client/src/locale/en-US.json
@@ -886,5 +886,6 @@
   "Are you sure you want to hide this tab?": "Are you sure you want to hide this tab?",
   "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.",
   "No pages yet, please configure first": "No pages yet, please configure first",
-  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode"
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode",
+  "Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.": "Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request."
 }
diff --git a/packages/core/client/src/locale/zh-CN.json b/packages/core/client/src/locale/zh-CN.json
index 4da8259285..a2e99fbf65 100644
--- a/packages/core/client/src/locale/zh-CN.json
+++ b/packages/core/client/src/locale/zh-CN.json
@@ -1084,5 +1084,15 @@
   "Are you sure you want to hide this tab?": "你确定要隐藏该标签页吗？",
   "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "隐藏后，该标签将不再显示在标签栏中。要想再次显示它，你需要到路由管理页面进行设置。",
   "No pages yet, please configure first": "暂无页面，请先配置",
-  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "点击右上角的“界面配置”图标，进入界面配置模式"
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "点击右上角的“界面配置”图标，进入界面配置模式",
+  "Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.": "用于为 <iframe> 指定其权限策略。该策略根据请求的来源规定 <iframe> 可以使用哪些特性（例如，访问麦克风、摄像头、电池、web 共享等）。",
+  "Controls whether the current document is allowed to autoplay media requested through the HTMLMediaElement interface. When this policy is disabled and there were no user gestures, the Promise returned by HTMLMediaElement.play() will reject with a NotAllowedError DOMException. The autoplay attribute on <audio> and <video> elements will be ignored.": "控制是否允许当前文档自动播放媒体。这种控制是通过接口 HTMLMediaElement 来实现。当这种规则被禁用，而且没有用户操作的时候，HTMLMediaElement.play() 返回的 Promise 会拒绝并抛出一个 DOMException 异常。<audio> 和 <video> 上的 autoplay 属性会被忽略。",
+  "Controls whether the current document is allowed to use video input devices. When this policy is disabled, the Promise returned by getUserMedia() will reject with a NotAllowedError DOMException.": "控制是否允许当前文档使用视频输入设备。当这种规则被禁用时，MediaDevices.getUserMedia() 返回的 Promise 会拒绝并抛出 NotAllowedError DOMException 异常。",
+  "Controls whether the current document is allowed to set document.domain. When this policy is disabled, attempting to set document.domain will fail and cause a SecurityError DOMException to be thrown.": "控制是否允许当前文档设置 document.domain。当这种规则被禁用时，尝试设置 document.domain 会失败并抛出 SecurityError DOMException 异常。",
+  "Controls whether the current document is allowed to use the Encrypted Media Extensions API (EME). When this policy is disabled, the Promise returned by Navigator.requestMediaKeySystemAccess() will reject with a SecurityError DOMException.": "控制是否允许当前文档使用 Encrypted Media Extension API（EME）。当这种规则被禁用时，Navigator.requestMediaKeySystemAccess() 返回的 Promise 会拒绝并抛出 DOMException 异常。",
+  "Controls whether the current document is allowed to use Element.requestFullscreen(). When this policy is disabled, the returned Promise rejects with a TypeError.": "控制是否允许当前文档使用 Element.requestFullScreen()。当这种规则被禁用时，返回的 Promise 会拒绝并抛出 TypeError。",
+  "Controls whether the current document is allowed to use the Geolocation Interface. When this policy is disabled, calls to getCurrentPosition() and watchPosition() will cause those functions callbacks to be invoked with a GeolocationPositionError code of PERMISSION_DENIED.": "控制是否允许当前文档使用 Geolocation 接口。当这种规则被禁用时，调用 getCurrentPosition() 和 watchPosition() 会返回包含 PERMISSION_DENIED 的 PositionError。",
+  "Controls whether the current document is allowed to use audio input devices. When this policy is disabled, the Promise returned by MediaDevices.getUserMedia() will reject with a NotAllowedError DOMException.": "控制是否允许当前文档使用音频输入设备。当这种规则被禁用时，MediaDevices.getUserMedia() 返回的 Promise 会拒绝并抛出错误 NotAllowedError。",
+  "Controls whether the current document is allowed to use the Web MIDI API. When this policy is disabled, the Promise returned by Navigator.requestMIDIAccess() will reject with a SecurityError DOMException.": "控制是否允许当前文档使用 Web MIDI API。当这种规则被禁用时，Navigator.requestMIDIAccess() 返回的 Promise 会拒绝并抛出错误 DOMException。",
+  "Controls whether the current document is allowed to use the Payment Request API. When this policy is enabled, the PaymentRequest() constructor will throw a SecurityError DOMException.": "控制是否允许当前文档使用 Payment Request API。当这种规则被启用时，构造函数 PaymentRequest() 会抛出错误 SecurityError。"
 }
diff --git a/packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.tsx b/packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.tsx
index 1124cba449..e0b6b07dfa 100644
--- a/packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.tsx
+++ b/packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.tsx
@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
 import {
@@ -20,6 +21,7 @@ import {
   useURLAndHTMLSchema,
   useVariableOptions,
 } from '@nocobase/client';
+import { Select, Tooltip } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,6 +41,84 @@ const getVariableComponentWithScope = (Com) => {
   };
 };
 
+const AllowOptionsHelp = ({ type }) => {
+  const { t, i18n } = useTranslation();
+  const typeToDescription = {
+    autoplay: t(
+      'Controls whether the current document is allowed to autoplay media requested through the HTMLMediaElement interface. When this policy is disabled and there were no user gestures, the Promise returned by HTMLMediaElement.play() will reject with a NotAllowedError DOMException. The autoplay attribute on <audio> and <video> elements will be ignored.',
+    ),
+    camera: t(
+      'Controls whether the current document is allowed to use video input devices. When this policy is disabled, the Promise returned by getUserMedia() will reject with a NotAllowedError DOMException.',
+    ),
+    'document-domain': t(
+      'Controls whether the current document is allowed to set document.domain. When this policy is disabled, attempting to set document.domain will fail and cause a SecurityError DOMException to be thrown.',
+    ),
+    'encrypted-media': t(
+      'Controls whether the current document is allowed to use the Encrypted Media Extensions API (EME). When this policy is disabled, the Promise returned by Navigator.requestMediaKeySystemAccess() will reject with a SecurityError DOMException.',
+    ),
+    fullscreen: t(
+      'Controls whether the current document is allowed to use Element.requestFullscreen(). When this policy is disabled, the returned Promise rejects with a TypeError.',
+    ),
+    geolocation: t(
+      'Controls whether the current document is allowed to use the Geolocation Interface. When this policy is disabled, calls to getCurrentPosition() and watchPosition() will cause those functions callbacks to be invoked with a GeolocationPositionError code of PERMISSION_DENIED.',
+    ),
+    microphone: t(
+      'Controls whether the current document is allowed to use audio input devices. When this policy is disabled, the Promise returned by MediaDevices.getUserMedia() will reject with a NotAllowedError DOMException.',
+    ),
+    midi: t(
+      'Controls whether the current document is allowed to use the Web MIDI API. When this policy is disabled, the Promise returned by Navigator.requestMIDIAccess() will reject with a SecurityError DOMException.',
+    ),
+    payment: t(
+      'Controls whether the current document is allowed to use the Payment Request API. When this policy is enabled, the PaymentRequest() constructor will throw a SecurityError DOMException.',
+    ),
+  };
+
+  const description = typeToDescription[type];
+
+  return (
+    <span>
+      {type}{' '}
+      <Tooltip
+        zIndex={9999}
+        title={
+          <span>
+            {description}{' '}
+            <a
+              href={`https://developer.mozilla.org/${
+                i18n.language === 'zh-CN' ? 'zh-CN' : 'en-US'
+              }/docs/Web/HTTP/Reference/Headers/Permissions-Policy/${type}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <LinkOutlined />
+            </a>
+          </span>
+        }
+      >
+        <QuestionCircleOutlined />
+      </Tooltip>
+    </span>
+  );
+};
+
+const AllowDescription = () => {
+  const { t, i18n } = useTranslation();
+  const helpURL =
+    i18n.language === 'zh-CN'
+      ? 'https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/iframe#allow'
+      : 'https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#allow';
+  return (
+    <span>
+      {t(
+        'Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.',
+      )}{' '}
+      <a href={helpURL} target="_blank" rel="noreferrer">
+        <LinkOutlined />
+      </a>
+    </span>
+  );
+};
+
 const commonOptions: any = {
   items: [
     {
@@ -50,7 +130,7 @@ const commonOptions: any = {
         const { t, i18n } = useTranslation();
         const { dn } = useDesignable();
         const api = useAPIClient();
-        const { mode, url, params, htmlId, height = '60vh', engine } = fieldSchema['x-component-props'] || {};
+        const { mode, url, params, htmlId, height = '60vh', engine, allow } = fieldSchema['x-component-props'] || {};
         const saveHtml = async (html: string) => {
           const options = {
             values: { html },
@@ -66,13 +146,14 @@ const commonOptions: any = {
           }
         };
         const { urlSchema, paramsSchema } = useURLAndHTMLSchema();
-        const submitHandler = async ({ mode, url, html, height, params, engine }) => {
+        const submitHandler = async ({ mode, url, html, height, params, engine, allow }) => {
           const componentProps = fieldSchema['x-component-props'] || {};
           componentProps['mode'] = mode;
           componentProps['height'] = height;
           componentProps['engine'] = engine || 'string';
           componentProps['params'] = params;
           componentProps['url'] = url;
+          componentProps['allow'] = allow;
           if (mode === 'html') {
             const data = await saveHtml(html);
             componentProps['htmlId'] = data.id;
@@ -114,6 +195,7 @@ const commonOptions: any = {
               height,
               engine,
               params,
+              allow,
             };
             if (htmlId) {
               // eslint-disable-next-line no-unsafe-optional-chaining
@@ -141,6 +223,31 @@ const commonOptions: any = {
                 ...urlSchema,
                 required: true,
               },
+              allow: {
+                title: 'Allow',
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': (props) => {
+                  return (
+                    <Select
+                      {...props}
+                      allowClear
+                      options={[
+                        { value: 'autoplay', label: <AllowOptionsHelp type="autoplay" /> },
+                        { value: 'camera', label: <AllowOptionsHelp type="camera" /> },
+                        { value: 'document-domain', label: <AllowOptionsHelp type="document-domain" /> },
+                        { value: 'encrypted-media', label: <AllowOptionsHelp type="encrypted-media" /> },
+                        { value: 'fullscreen', label: <AllowOptionsHelp type="fullscreen" /> },
+                        { value: 'geolocation', label: <AllowOptionsHelp type="geolocation" /> },
+                        { value: 'microphone', label: <AllowOptionsHelp type="microphone" /> },
+                        { value: 'midi', label: <AllowOptionsHelp type="midi" /> },
+                        { value: 'payment', label: <AllowOptionsHelp type="payment" /> },
+                      ]}
+                    />
+                  );
+                },
+                description: <AllowDescription />,
+              },
               params: paramsSchema,
               engine: {
                 title: '{{t("Template engine")}}',
@@ -193,6 +300,7 @@ const commonOptions: any = {
           } as ISchema,
           onSubmit: submitHandler,
           noRecord: true,
+          width: 600,
         };
       },
     },