Search code examples
javascriptsecurityvue.jscsrfnuxt.js

Can this be a strategy to defend csrf? (double submit cookie)

used framework: nuxt.js + spring boot(api)

  1. Invoke once api to generate random values and set httpOnly cookie(e.g. key=csrfToken) when the page is first accessed.
  2. The api response is also stored in vuex. (the response also has token body. with Set-Cookie header.)
  3. When request using axios, If there is the "csrfToken" cookie, add custom header(e.g. key=CSRF_TOKEN_HEADER) to the request.
  4. In the server, if csrfToken cookies are delivered, look up the custom header values to compare them to see if they are the same.

I know that $store is not secure in itself. However, I think CSRF is defensible because $store is not accessible from outside sites.

Please let me know if there is anything wrong with me.

Solution

  • When request using axios, If there is the "csrfToken" cookie, add custom header(e.g. key=CSRF_TOKEN_HEADER) to the request.

    Since the cookie is httpOnly, you wouldn't be able to tell if there was or not.

    A CSRF attack works by tricking the user into making a request that they didn't intend to make.

    The traditional way to do this is to have a form on an attacking website which has the action sent to the website being attacked. When that form is submitted, the request comes from the user's browser and has all the user's cookies for the target website included.

    The defence against this is to require that the request includes information that the attacking site cannot know. The CSRF token.

    Since the attacking site can't read that token from the user's cookies or the site's session store (depending on where it was stored) or from anywhere else, they can't include it in the form data.

    But you aren't using a regular form submission. You are using JavaScript to make the request.

    This comes with a built-in defence: The Same Origin Policy and Preflight Requests.

    All you need do is force the request to be preflighted (e.g. by setting the Content-Type request header to application/json and including a JSON payload in the body).

    This will force a request from the attacking site to make a preflight request. Your server won't have the attacker whitelisted. The browser will therefore never make the attacking request.

    If the attacker tries to make a non-preflighted request, it won't have the JSON payload, so your server can reject it as malformed.