Webpack-dev-server: Proxy should add a option to allow change Referer header

Created on 18 Oct 2017  路  3Comments  路  Source: webpack/webpack-dev-server

  • Operating System: Windows 10, Fall Creators Update
  • Node Version: v8.6.0
  • NPM Version: v5.3.0
  • webpack Version: v2.6.0
  • webpack-dev-server Version: v2.7.1
  • [ ] This is a bug
  • [x] This is a feature request
  • [ ] This is a modification request

Expected Behavior

webpack-dev-server will change the Referer header or give a option to do this

Actual Behavior

Referer: http://localhost:4000/ sent to the server, and server rejected the request.

For Features; What is the motivation and/or use-case for the feature?

Add a changeReferer just like changeOrigin

Some server will check csrftoken with Referer, if Referer: localhost is provided, the request will be rejected by the server.

Now I use this as a temp solution.

        bypass: (req, res) => {
          if (req.headers && req.headers.referer)
            req.headers.referer = req.headers.referer.replace('localhost:4000', 'THE TARGET SITE')
        }

Most helpful comment

For anyone who might run into csrf issues:
Here is how I handled it:

const fs = require('fs');
module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://example.com',
        ws: true,
        changeOrigin: true,
        bypass: (req, res) => {
          if (req.headers && req.headers.referer) {
            url = new URL(req.headers.referer);
            url.host = 'example.com';
            url.port = '';
            req.headers.referer = url.href;
          }
        },
        cookieDomainRewrite: '',
      },
    },
    http2: true,
    https: {
      key: fs.readFileSync('./cert/key.pem'),
      cert: fs.readFileSync('./cert/cert.pem'),
    },
  },
};

All 3 comments

@Jack-Works thanks for creating a proper issue, and for checking in. Those configuration options are passed directly to http-proxy-middleware. webpack-dev-server doesn't control the options available, so you'll have to create an issue with that project to request that option.

@Jack-Works Did you manage to find a proper solution for this?

For anyone who might run into csrf issues:
Here is how I handled it:

const fs = require('fs');
module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://example.com',
        ws: true,
        changeOrigin: true,
        bypass: (req, res) => {
          if (req.headers && req.headers.referer) {
            url = new URL(req.headers.referer);
            url.host = 'example.com';
            url.port = '';
            req.headers.referer = url.href;
          }
        },
        cookieDomainRewrite: '',
      },
    },
    http2: true,
    https: {
      key: fs.readFileSync('./cert/key.pem'),
      cert: fs.readFileSync('./cert/cert.pem'),
    },
  },
};
Was this page helpful?
0 / 5 - 0 ratings