Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy on dev server #3909

Closed
chaosprint opened this issue Jun 22, 2021 · 9 comments

Comments

@chaosprint
Copy link

chaosprint commented Jun 22, 2021

Clear and concise description of the problem

Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers are necessary to support SharedArrayBuffer, as is explained in this article.

But so far, on Vite.js website and docs, there is no description of that, which would be a pain.

Here (https://vitejs.dev/config/#server-https) in docs, no examples are given.

server.https
Type: boolean | https.ServerOptions

Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.

The value can also be an options object passed to https.createServer().

Usually in node.js it is set like this:

response.writeHead(200, { "Content-Type": mimeType ,
  "Cross-Origin-Opener-Policy": "same-origin",
  "Cross-Origin-Embedder-Policy": "require-corp" });

But it seems that in vite there is no way to do it?

@chaosprint
Copy link
Author

Well, I build this plugin. It works for my purpose but may require further testing.
https://github.com/chaosprint/vite-plugin-cross-origin-isolation

@lynellf
Copy link

lynellf commented Jul 10, 2021

Well, I build this plugin. It works for my purpose but may require further testing.
https://github.com/chaosprint/vite-plugin-cross-origin-isolation

Worked for me. Awesome lib. Thanks!

@Alexufo
Copy link

Alexufo commented Jul 20, 2021

Any headers should be configured like in serve https://github.com/vercel/serve-handler#headers-array

@chaosprint
Copy link
Author

Any headers should be configured like in serve https://github.com/vercel/serve-handler#headers-array

Thanks for the info. I know that Firebase or Netlify all have own ways to set it, but in this issue thread I am referring to the vitejs local dev server. This header settings should become default for testing SAB locally.

@Alexufo
Copy link

Alexufo commented Jul 26, 2021

@chaosprint thank you for reply. I developing frontpage for our wasm lib in vite and it require special headers for it. I I suppose it should be in core for wasm supporting. Wasm become more popular

@ssc-hrep3
Copy link

To add custom headers, you can add the following snippet inline to the vite.config.ts file. The code is based on the plugin of @chaosprint. Thank you for that!

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'configure-response-headers',
      configureServer: server => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader('Test-Header', 'A random value');
          next();
        });
      }
    }
  ]
});

@TranquilMarmot
Copy link

Going off of what @ssc-hrep3 here's what I have now in my vite.config.ts file!

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});

@delebash
Copy link

This works for the vite dev server but how to you enable this for vite preview?

@bluwy
Copy link
Member

bluwy commented Mar 12, 2022

This can now be supported through the server.headers option since #5580

@bluwy bluwy closed this as completed Mar 12, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Mar 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants