From 02ee1dd9890b902d5ce6df39f4ee519fd9f3cf7a Mon Sep 17 00:00:00 2001
From: Rihan Arfan <me@file.properties>
Date: Thu, 20 Nov 2025 09:49:28 +0000
Subject: [PATCH] feat: support passing additional permissions to the iframe

---
 docs/content/2.module/0.guide.md                  | 15 +++++++++++++++
 docs/content/2.module/1.utils-kit.md              | 15 +++++++++++++++
 packages/devtools-kit/src/_types/custom-tabs.ts   |  7 +++++++
 .../devtools/client/components/IframeView.vue     |  2 +-
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/content/2.module/0.guide.md b/docs/content/2.module/0.guide.md
index 4c588734a2..54961c1c78 100644
--- a/docs/content/2.module/0.guide.md
+++ b/docs/content/2.module/0.guide.md
@@ -59,6 +59,21 @@ nuxt.hook('devtools:customTabs', (tabs) => {
 })
 ```
 
+### Iframe Permissions
+
+By default, iframes have `clipboard-write` and `clipboard-read` permissions enabled. You can add additional permissions using the `permissions` option:
+
+```ts
+const view: ModuleIframeView = {
+  type: 'iframe',
+  src: '/url-to-your-module-view',
+  // Additional permissions to allow in the iframe
+  permissions: ['camera', 'microphone', 'geolocation'],
+}
+```
+
+These permissions will be merged with the default ones and set on the iframe's `allow` attribute.
+
 Learn more about [DevTools Utility Kit](/module/utils-kit).
 
 ## Lazy Service Launching
diff --git a/docs/content/2.module/1.utils-kit.md b/docs/content/2.module/1.utils-kit.md
index d5b626b7b5..e18adf4476 100644
--- a/docs/content/2.module/1.utils-kit.md
+++ b/docs/content/2.module/1.utils-kit.md
@@ -39,6 +39,21 @@ addCustomTab(() => ({
 }))
 ```
 
+The iframe view supports the following options:
+
+- `src`: URL of the iframe
+- `persistent`: Whether to persist the iframe instance when switching tabs (default: `true`)
+- `permissions`: Additional permissions to allow in the iframe (merged with default `clipboard-write` and `clipboard-read`)
+
+```ts
+const view: ModuleIframeView = {
+  type: 'iframe',
+  src: '/url-to-your-module-view',
+  persistent: true,
+  permissions: ['camera', 'microphone'],
+}
+```
+
 ### `refreshCustomTabs()`
 
 A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs.
diff --git a/packages/devtools-kit/src/_types/custom-tabs.ts b/packages/devtools-kit/src/_types/custom-tabs.ts
index 5ed71ad131..e1fd8b312a 100644
--- a/packages/devtools-kit/src/_types/custom-tabs.ts
+++ b/packages/devtools-kit/src/_types/custom-tabs.ts
@@ -68,6 +68,13 @@ export interface ModuleIframeView {
    * @default true
    */
   persistent?: boolean
+  /**
+   * Additional permissions to allow in the iframe
+   * These will be merged with the default permissions (clipboard-write, clipboard-read)
+   *
+   * @example ['camera', 'microphone', 'geolocation']
+   */
+  permissions?: string[]
 }
 
 export interface ModuleVNodeView {
diff --git a/packages/devtools/client/components/IframeView.vue b/packages/devtools/client/components/IframeView.vue
index 1ad1513238..b9d87d6951 100644
--- a/packages/devtools/client/components/IframeView.vue
+++ b/packages/devtools/client/components/IframeView.vue
@@ -23,7 +23,7 @@ const box = reactive(useElementBounding(anchor))
 onMounted(() => {
   const view = props.tab.view as ModuleIframeView
   const isPersistent = view.persistent !== false
-  const allowedPermissions = ['clipboard-write', 'clipboard-read']
+  const allowedPermissions = ['clipboard-write', 'clipboard-read', ...(view.permissions || [])]
 
   if (iframeCacheMap.get(key.value) && isPersistent) {
     iframeEl.value = iframeCacheMap.get(key.value)!