Application Server and Hosting PrivMX Web Endpoint Assets

To ensure the proper functionality and security of our library, it is essential to configure your server with specific HTTP headers on the page containing the scripts and the scripts themselves (e.g., those located in public/primx-assets/).

Set the following headers:

• Cross-Origin-Embedder-Policy: require-corp
• Cross-Origin-Opener-Policy: same-origin

These headers are crucial for maintaining a secure execution environment, as they help prevent potential cross-origin attacks and ensure that resources are only shared with origins that comply with the same security policies. Implementing these headers will enable seamless integration and optimal performance of our library in your application.

Setting Up Headers in Different Environments

Vite

To configure these headers in a Vite project for specific routes (such as the page containing the scripts and the scripts themselves), you need to set up a middleware in the Vite configuration file:

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    {
      name: 'configure-response-headers',
      configureServer: server => {
        server.middlewares.use((req, res, next) => {
          // Apply headers only to relevant paths
          if (req.url.startsWith('/primx-assets') || req.url === '/your-page') {
            res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
            res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
          }
          next();
        });
      },
    },
  ],
});