Chrome private network blocks Hub DevTools database

[onmax]

Describe the bug
Chrome 123+ enforces Private Network Access, dev CORS handler at node_modules/@nuxthub/core/dist/runtime/cors.dev.js never emits Access-Control-Allow-Private-Network, so iframe from https://admin.hub.nuxt.com/embed/database hits http://localhost:3000/api/_hub/database/query and Chrome stops with Permission was denied for this request to access the "unknown" address space. Works in Firefox.

Steps to reproduce
Steps to reproduce the behavior:

1. pnpm dev with @nuxthub/core@0.9.0, devtools enabled on http://localhost:3000
2. Open Nuxt DevTools → Hub Database tab
3. Chrome stable 130+ network panel shows blocked preflight + error above

Expected behavior
Hub database tab should load in Chrome with zero flags because /api/_hub middleware should answer the OPTIONS with Access-Control-Allow-Private-Network: true per Chrome changelog (https://chromestatus.com/feature/4711521281703936, https://developer.chrome.com/blog/private-network-access-update-notes/#chrome-123).

[Yizack]

Note

Current work around is access directly to the admin from your browser
https://admin.hub.nuxt.com/embed/database?url=http://localhost:3000

---

Hello, I hope this comment can provide some info.

I think I've found a possible solution for this issue. I was testing and trying to find a solution, and I noticed that adding Access-Control-Allow-Private-Network: true header will not work as expected because the local network access permission is checked before the API response.

Then I read this article where it says if it runs inside an iframe it should include a local-network-access permission

Devtools embed the Nuxthub admin inside an iframe for example, the database view code below

core/src/utils/devtools.ts

Lines 7 to 16 in 714c67e

	hub.database && addCustomTab({
	category: 'server',
	name: 'hub-database',
	title: 'Hub Database',
	icon: 'i-lucide-database',
	view: {
	type: 'iframe',
	src: `https://admin.hub.nuxt.com/embed/database?url=${url}`
	}
	})

Sadly the addCustomTab util from @nuxt/devtools-kit does not accept an allow property so this should be added and fixed in @nuxt/devtools, specifically adding the prop in the ModuleIframeView type and handle custom allowed permissions in the IframeView.vue component.

I did myself a patch to see if this works, adding local-network-access * to the allow prop of the iframe and it worked.

Chrome will ask you to allow the permission like this

After allowing the permission, it shows the admin

---

I think after having the possibility to self-host the admin in the v1 release we won't need this but it's always good to know.

[RihanArfan]

We've fixed the issue in v0.9.1