1

We're developing a react app with a python flask backend. Normally it all works fine, but when placing it behind a server with client side certificate requirement it almost works. It works fine in Chrome, not in Firefox.

The certificate is sent when entering the URL in the browser, it's not sent when making request from react.

  1. The main request finishes fine, the page is displayed.
  2. When loading the page makes a request to the backend, /backend/version.
  3. That request fails, with nginx saying 

<html>
<head><title>400 No required SSL certificate was sent</title></head>
<body bgcolor="white">
<center><h1>400 Bad Request</h1></center>
<center>No required SSL certificate was sent</center>
<hr><center>nginx/1.10.3</center>
</body>
</html>
  1. When I open devtools and paste the same url, it works fine. The client side certificate is sent by the browser.

How we make the request:

const fetchVersion = () => (dispatch, getState) => {
  return dispatch({
  [CALL_API]: {
    endpoint: `${API_ROOT}/version`,
    method: 'GET',
    headers: {
      "Authorization": authHeader(),
    },
    types: [FETCH_VERSION_REQUEST,
      {
        type: FETCH_VERSION_SUCCESS,
        payload: (action, state, res) => {
          const contentType = res.headers.get('Content-Type');
          if (contentType && ~contentType.indexOf('json')) {
            return res.json().then(json => json.response);
          }
        },
      },
      {
      type: FETCH_VERSION_FAILURE,
      meta: (action, state, res) => checkIfInvalidToken(action, state, res, dispatch),
    }
    ],
  },
});
};

What's missing? Why doesn't Firefox attach the certificate to the request like Chrome does?

dutt
  • 7,909
  • 11
  • 52
  • 85
  • seems like this one to me https://stackoverflow.com/questions/24005354/ssl-client-certificate-not-loaded-on-ajax-call-from-firefox ? – Tarun Lalwani Nov 06 '17 at 22:22

1 Answers1

1

You might try to see if the problem is resolved by explicitly specify [CALL_API].credentials value to include

According to the documentation the default value is omit but firefox need include always send cookies, even for cross-origin calls.

Regarding the example in your question, the code could become something like: 

  [CALL_API]: {
    endpoint: `${API_ROOT}/version`,
    credentials: 'include',
    method: 'GET',
    headers: {
      "Authorization": authHeader(),
    },
...and so on

In a laboratory with purely experimental purpose I think I have reproduced a similar behavior you reported both with Chrome and Firefox and in this lab the credentials: 'include' solves the problem: video available here.

Franco Rondini
  • 10,841
  • 8
  • 51
  • 77