What is the risk of using api flow in browser?

[wenqi73]

There is a warning on the site:

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.

Could someone explain this risk in detail? What does "attack vectors" means?
Imo it makes no difference to use which way in the browser, on the contrary the CSRF attacks existed in browser(if not set SameSite header), in API flows session token can avoid this.

Now if I force use API Clients in browser(by modifying the krato's code to avoid error), what will be the risks?

[vinckr]

Hello @wenqi73

I recommend this article if you want to learn more about CSRF, SPA and potential attacks: http://codyaray.com/2020/08/vulnerable-csrf-attacks

The risk is not trivial:

CSRF is an attack that tricks the victim into submitting a malicious request. It inherits the identity and privileges of the victim to perform an undesired function on the victim’s behalf. For most sites, browser requests automatically include any credentials associated with the site, such as the user’s session cookie, IP address, Windows domain credentials, and so forth. Therefore, if the user is currently authenticated to the site, the site will have no way to distinguish between the forged request sent by the victim and a legitimate request sent by the victim.

Check out this blogpost for a less insecure implementation for SPAs:
https://www.ory.sh/login-spa-react-nextjs-authentication-example-api-open-source/