Set proper headers in UI projects for SnarkyJS

[jasongitmail]

The ideal solution is to set headers via middleware, rather than altering a dev server config, so that we can solve it for developers both for development via npm run dev and for production, since that would work with any host they decide to use.

• SvelteKit. Confirm using curl -I http://localhost:5173. Headers won't show in browser dev tools when npm run dev is run, for some reason. Or can do npm run build && npm run preview and they will appear in browser dev tools.

// src/hooks.server.js
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
  response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
  return response;
}

• next - via next.config.js. See https://nextjs.org/docs/api-reference/next.config.js/headers

// example, untested
module.exports = {
  async headers() {
    return [
      {
        source: '/*',
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
        ],
      },
    ]
  },
}

• NuxtJS

• Note in ui READMEs