Skip to content

Instantly share code, notes, and snippets.

@jeantimex

jeantimex/express-static-server-cros.js

Last active February 21, 2021 20:50
Show Gist options
  • Save jeantimex/40ae6ce9534c10294d793385bf9f0cf4 to your computer and use it in GitHub Desktop.
Save jeantimex/40ae6ce9534c10294d793385bf9f0cf4 to your computer and use it in GitHub Desktop.
Download ZIP
Express server with Cross-Origin-Opener-Policy
Raw
express-static-server-cros.js
const express = require('express');
const app = express();
// Setting up the public directory
app.use(express.static('public', {
setHeaders: (res) => {
res.set('Cross-Origin-Opener-Policy', 'same-origin');
res.set('Cross-Origin-Embedder-Policy', 'require-corp');
}
}));
app.listen(3000, () => console.log('listening on port 3000!'));
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mapbox Image Markers</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js" crossorigin></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
crossorigin
/>
</head>
<body>
<script>
async function run() {
const result = await performance.measureUserAgentSpecificMemory();
console.log(result);
}
run();
</script>
</body>
</html>
@jeantimex
Copy link
Author

performance.measureMemory is renamed to performance.measureUserAgentSpecificMemory and enabled by default in Chrome 89 for cross-origin isolated web pages.

When using Express to serve static html files, we need to make sure:

  • Set Cross-Origin-Opener-Policy to same-origin in response header
  • Set Cross-Origin-Embedder-Policy to require-corp in response header
  • Set crossorigin in 3rd-party JavaScript sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment