3

I've been developping a website using express(NodeJS) for the backend and React for the frontend. I've come accross the issue where my application won't work on Firefox due to this error "ReferenceError: SharedArrayBuffer is not defined". After having searched a bit online, it appears it has to do with CORS. I saw that on Chrome there is a warning about the use of SharedArrayBuffer as well.

So I read that I need to set those headers ̀Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp

But I am not sure on how to do that. On my backend I've been using the cors package to set my cors headers and options as such

const corsOptions = {
  origin: process.env.CLIENT_URL,
  credentials: true,
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}
app.use(cors(corsOptions));

I've also tried using this method but it doesn't appear to work either :

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  res.setHeader('Cross-origin-Embedder-Policy', 'require-corp');
  res.setHeader('Cross-origin-Opener-Policy','same-origin');
  next();
});

Am I totally missing something/misunderstanding? It is my first time developping a web application and I am kind of lost at this point. Any help would be grately appreciated.

Thank you

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Baroud
  • 31
  • 1
  • 2

3 Answers3

2

try to process options request in your custom middleware

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  res.setHeader('Cross-origin-Embedder-Policy', 'require-corp');
  res.setHeader('Cross-origin-Opener-Policy','same-origin');

  if (req.method === 'OPTIONS') {
    res.sendStatus(200)
  } else {
    next()
  }
});
Alan Millirud
  • 1,049
  • 7
  • 14
2

Not sure what causes this, but for me using a different route worked

Cross-origin isolation using node / express

app.use(function(req, res, next) {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});


app.get('/', async (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});
// does **not** work, no cors headers in response

app.get('/app', async (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});
// does work, cors headers in response as expected
Fritz Mehler
  • 39
  • 1
  • 4
1

The Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy must be set on the client website (client.example.com), i.e. the one consuming the backend resources.

The backend (api.example.com) should be setup to allow for CORS (for example using the cors package as you are) from the client's origin.

Access-Control-Allow-Origin: client.example.com

If you are embedding images or link from the backend, then you would need to add the crossorigin="anonymous" attribute.

<img src="api.example.com/image.png" crossorigin="anonymous" alt="" />

If you are embedding an iframe, then the target of the iframe would need to add the Cross-Origin-Resource-Policy: cross-origin and Cross-Origin-Embedder-Policy: require-corp headers on the backend (api.example.com) to allow other websites to embed from that resource. Note that this means anyone would be able to embed from your backend.

Note that I am not sure how this relates to the SharedArrayBuffer exception you are seeing.

Kevin Farrugia
  • 6,431
  • 4
  • 38
  • 61