Add support for removing the 'secure' attribute on proxied cookies

[edmorley]

Our use case:

• When working on the UI of a product locally, it's useful to be able to point it at the stage/prod REST API so it can be tested with live data, and not just that in the local Vagrant instance etc
• In production the UI and API are on the same domain, so to avoid cross-domain issues locally we use webpack-dev-server's proxy mode (which makes use of http-proxy-middleware which itself uses node-http-proxy), to proxy requests from eg http://localhost:5000/api/* to https://prod-app.com/api/*.
• Production is served over HTTPS and so sets the secure cookie attribute.
• The local environment does not use HTTPS (it's something I'd like to explore in the future, it just makes integration with our full-stack Vagrant workflow more complicated).
• As such, the browser ignores the proxied cookie and doesn't associate it the HTTP localhost UI.

If there was an option to strip the secure attribute from the proxied cookie, we could use the workflow above.

Example response:

curl -i "http://localhost:5001/api/auth/login/" <SNIP>

HTTP/1.1 200 OK
...
set-cookie: sessionid=REDACTED; expires=Wed, 24-May-2017 11:35:14 GMT; httponly; Max-Age=1209600; Path=/; secure
set-cookie: csrftoken=REDACTED; expires=Wed, 09-May-2018 11:35:14 GMT; Max-Age=31449600; Path=/; secure

[nilem]

We got the same issue, and adding "--https" as an option of the npm start as solve the problem, as we now work on https://localhost.

[edmorley]

Yeah that is one option, but having to walk the user (who can be a external contributor to the project) through accepting the self-signed certificate in their browser is an extra barrier to entry. Also it doesn't help tools like curl which will use a different CA certificate store to the browser.

[murashki]

+1

[futurechan]

I tried this, but it didn't work:

const envProxy = proxy({
    target: envHost,
    changeOrigin: true,
    logLevel: 'debug',
    xfwd: true,
    cookieDomainRewrite: "localhost:3000",
    secure: false,
    headers: {
        'Content-Language': 'en',
        'Referer': envHost,
        'Origin': envHost
    },
    onProxyReq: function (proxyReq, req, res) {
    },
    onProxyRes: function (proxyRes, req, res) {

        res['set-cookie'] = proxyRes.headers['set-cookie']
            .map(sc => {
                return sc.split('; ')
                    .filter(v => v != 'secure')
                    .join('; ')
            })

        console.log('res[\'set-cookie\']', res['set-cookie'])
    }
})

The console shows the cookie secure flag has been removed, but the browser still receives the cookie with the secure flag set.

[sharkovich]

@futurechan You should assign modified set-cookie header to proxyRes.headers['set-cookie'] instead of res['set-cookie']. I've modified your code and works for me:

onProxyRes: (proxyRes, req, res) => {
  const sc = proxyRes.headers['set-cookie'];
  if (Array.isArray(sc)) {
    proxyRes.headers['set-cookie'] = sc.map(sc => {
      return sc.split(';')
        .filter(v => v.trim().toLowerCase() !== 'secure')
        .join('; ')
    });
  }
},

[futurechan]

@sharkovich awesome!

[almothafar]

For me, I'm using angular CLI with the proxy options, so the config is a JSON file in the project, providing function is not doable for me.

[minchao]

@almothafar Try use --proxy-config

ng serve --proxy-config proxy.conf.js