fix: support iframeProps option for CSP, fix Stackblitz

Author: antfu

packages/devtools-kit/src/_types/options.ts

@@ -47,6 +47,11 @@ export interface ModuleOptions {
    */
   disableAuthorization?: boolean
 
+  /**
+   * Props for the iframe element, useful for environment with stricter CSP
+   */
+  iframeProps?: Record<string, string | boolean>
+
   /**
    * Experimental features
    */

packages/devtools/src/module-main.ts

@@ -40,6 +40,9 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
 
   await nuxt.callHook('devtools:before')
 
+  if (options.iframeProps)
+    nuxt.options.runtimeConfig.app.iframeProps = options.iframeProps
+
   // Make unimport exposing more information, like the usage of each auto imported function
   nuxt.options.imports.collectMeta = true
 

packages/devtools/src/runtime/plugins/view/client.ts

@@ -128,9 +128,13 @@ export async function setupDevToolsClient({
       const initialUrl = CLIENT_PATH + state.value.route
       try {
         iframe = document.createElement('iframe')
+
+        // custom iframe props
+        Object.fromEntries(runtimeConfig.app.devtools?.iframeProps || {})
+        for (const [key, value] of Object.entries(runtimeConfig.app.devtools?.iframeProps || {}))
+          iframe.setAttribute(key, String(value))
+
         iframe.id = 'nuxt-devtools-iframe'
-        iframe.allow = 'cross-origin-isolated'
-        iframe.setAttribute('credentialless', 'true')
         iframe.src = initialUrl
         iframe.onload = async () => {
           try {