Mostly-SPA using server-side flow?

[jjlee]

Hi

I set up the server-side login flow, and then got auth in the SPA parts of my application working by means of this hack in my FE code - without using the client-side flow:

  res = await fetch(applicationBackendUrl.toString(), {
    method,
    redirect: "manual",
    body,
    headers,
  });
  if (res.type === "opaqueredirect") {
    window.location.replace(res.url);
    return;
  }

Is that a silly thing to do? If I don't mind the page reload in what is otherwise mostly an SPA, is there any security reason to not do this? Other than losing my application state, is there any non-security reason not to do this (I guess I'm thinking of giving myself a maintenance headache somehow)?

Very happy to find kratos :)

[vinckr]

hello @jjlee

Is that a silly thing to do?

Maybe not silly, but insecure! So the main reason to not use the API flows for browser applications is that CSRF protection is now missing - I think also some other (less critical) things as well.
CSRF protection is super important if you are on a browser!

Never use API flows to implement Browser applications! Using API flows in Single-Page-Apps as well as server-side apps opens up several potential attack vectors, including Login and other CSRF attacks.
See source

I think this is a good blogpost that goes over the different auth options that you have and their up/downsides: https://www.ory.sh/blog/auth-and-modern-software

[jjlee]

Thanks, just got back to this!

I'm not using the API flow though (nor the browser-based SPA flow) - instead I'm using only the server flow?

Mostly the app will do direct server endpoint hits via e.g. fetch instead of via page navigation (this is the SPA part).

There will be some page navigation though. One example is as in my example above: when Ory Kratos decides login is needed, which will prompt my application code to do an authentication page refresh via window.location.replace, losing any local page state. That loss of page state is my problem as a developer to deal with as far as app functionality and convenience goes - my focus here is rather security and maintainability.

In this setup, as I understand it, Ory Kratos is relying on server side flow CSRF tokens for CSRF protection to protect its authentication flows (via SameSite cookies and - at least for login - a form CSRF token). So, at least in my understanding, from Kratos' point of view, this hybrid SPA/server app I've described is a server side application and not an SPA?

This is certainly a hack and I should probably "just" implement what I need for the browser based flows, but I don't have a canned example for that, and I already have the server-side flow mechanism working together with my app!