Resource was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof)

[dipaksaraf]

I am developing an app with CORP, COEP, COOP & CSP. I am experiencing issue with blockage of resources which is resulting in error in browser "

Blocked Page
Your organization has blocked access to this page or website."

My stackblitz project URL is >> https://stackblitz.com/edit/sb1-ucn6krhd

I am getting following error in console

GET https://stackblitz.firebaseio.com/.lp?start=t&ser=11927614&cb=33&v=5
NS_ERROR_DOM_CORP_FAILED

The resource at “https://stackblitz.firebaseio.com/.lp?start=t&ser=11927614&cb=33&v=5” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

This is my vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [svelte()],
server: {
cors: true,
host: true,
hmr: {
clientPort: 5173,
host: '0.0.0.0',
},
headers: {
// Fix 1: Combined headers object
'Cross-Origin-Resource-Policy': 'cross-origin',
'Cross-Origin-Embedder-Policy': 'unsafe-none',
'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
'Content-Security-Policy': [
// // Fix 2: Enhanced CSP directives
"default-src 'self' blob:",
"script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://.clerk.accounts.dev https://sb1ucn6krhd-wrux--5173--7f809d15.local-corp.webcontainer.io",
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
"worker-src 'self' blob: https://.clerk.accounts.dev",
"connect-src 'self' https://.clerk.accounts.dev https://api.github.com https://sb1ucn6krhd-wrux--5173--7f809d15.local-corp.webcontainer.io",
"frame-src 'self' https://.clerk.accounts.dev https://github.com",
// Fix 3: Correct frame-ancestors syntax
"frame-ancestors 'self' https://sb1ucn6krhd-wrux--5173--7f809d15.local-corp.webcontainer.io https://stackblitz.com",
"img-src 'self' data: https://*.clerk.accounts.dev https://img.clerk.com",
// Fix 4: Add service worker policy
"service-worker-src 'self' blob:",
].join('; '),
'X-Content-Type-Options': 'nosniff',
},
fs: {
strict: true,
allow: ['.env', '..'],
},
port: 5173,
strictPort: true,
watch: {
usePolling: true,
interval: 1000,
},
},
envDir: '.',
base: '/',
preview: {
port: 4173,
strictPort: true,
host: true,
},
optimizeDeps: {
include: ['@clerk/clerk-js'],
esbuildOptions: {
target: 'esnext',
supported: {
'import-meta': true,
},
},
},
build: {
modulePreload: true,
target: 'esnext',
minify: 'esbuild',
rollupOptions: {
output: {
manualChunks: {
clerk: ['@clerk/clerk-js'],
},
},
},
},
});

Can you suggest what to add in the header policy pages which doesn't block my stackblitz webcontainer resources which is resulting in blocked page in browser preview. Additionally few file console error are showing "Could not find source file: ", but I can see them in editor and can very well edit and update them.

My stackblitz project URL is >> https://stackblitz.com/edit/sb1-ucn6krhd