Adding custom headers to "react-scripts start"

[sdavids]

Is your proposal related to a problem?

I would like to be able to set custom HTTP headers when using npm start, i.e. react-scripts start.

Currently our proxy provides CSP HTTP Headers.

During local development one might introduce CSP problems which only show up once a production build has been deployed.

The following would be helpful during development:

if (process.env.NODE_ENV === 'development') {
  window.addEventListener('securitypolicyviolation', console.error.bind(console));
}

Describe the solution you'd like

Webpack provides devServer.headers which could be exposed in some way.

Describe alternatives you've considered

We could add a meta element to our public/index.html.

Additional context

#4861

[darin-sai]

Using the meta element is great for CSP, but if you want to experiment with Content-Security-Policy-Report-Only, you cannot use a meta tag.

[Adriaaaaan]

This is pretty annoying :( I need the ability to set "Cross-origin-Embedder-Policy" and "Cross-origin-Opener-Policy" in order to use sharedarraybuffer from web assembly. This means we can't use CRA and will have to eject/go elsewhere

[mihaip]

As a workaround, I've used the ability to configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually) to instead a custom middleware that adds headers.

Specifically, I created a src/setupProxy.js file with the following contents, and things appear to work well:

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

[jobergum]

Thanks for this @mihaip!

[kudorgyozo]

As a workaround, I've used the ability to configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually) to instead a custom middleware that adds headers.

Specifically, I created a src/setupProxy.js file with the following contents, and things appear to work well:

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

Where did you put this?

[mihaip]

@kudorgyozo it goes in src/setupProxy.js. You can see an example in my repo: https://github.com/mihaip/infinite-mac/blob/main/src/setupProxy.js

[MatayoshiMariano]

It's not working for me, you just need to add that piece of code to "src/setupProxy.js"?

[mifozski]

@MatayoshiMariano you also need to install http-proxy-middleware in order for it to pick up src/setupProxy.js

[nicky132]

@MatayoshiMariano you also need to install http-proxy-middleware in order for it to pick up src/setupProxy.js
//src/setupProxy.js
require('http-proxy-middleware');
module.exports = (app) => {
app.use((_, res, next) => {
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
next();
});
};

like this? but still not working,not work in react SPA application

[mifozski]

@nicky132 you can just install http-proxy-middleware as a dev dependency (e.g npm i --save-dev http-proxy-middleware) and it should work. No need to require it in the setupProxy.js.

[AmitShimon198]

this is working on dev but not on production build

[felipehv]

@AmitShimon198 what service are you using for production deployments?
You need to configure you app production server (CDN, static files server like nginx or apache, among others) with those headers to be sent.

[mykhailo-kabanenko]

As a workaround, I've used the ability to configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually) to instead a custom middleware that adds headers.

Specifically, I created a src/setupProxy.js file with the following contents, and things appear to work well:

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

can enyone suggest how to create condition if wasm set headers else just next()? i tried to log requests - they are all the same

[felipehv]

As a workaround, I've used the ability to configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually) to instead a custom middleware that adds headers.
Specifically, I created a src/setupProxy.js file with the following contents, and things appear to work well:

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

can enyone suggest how to create condition if wasm set headers else just next()? i tried to log requests - they are all the same

Hi @mykhailo-kabanenko , you always have to call next() to continue with your request, but only once.
therefore if you need to decide wether to send headers or not you should do the following

module.exports = function (app) {
    app.use(function (req, res, next) {
        if (condition) {
           res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
           res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
        }
        next();
    });
};

Please tell me if I understood your question well.