Laravel Jetstream with Sanctum CSRF token protection not working

Question

Recently I am researching about how to prevent malicious attack which is user personal access token get stolen. This can be happen on those SPAs website/ mobile apps which store the access token on local. For example if using laravel passport, we will return the bearer token to our user after login, then as long as we attached the access token in our API header authorization, system will treated as authenticated no matter who you are.

I found that Laravel Sanctum was offering some sort of CSRF protection into the authentication process, which seem like can prevent attacker intercept the authentication process. But after trying I found that it seem like not working as I expected.

I using VueJs as my front end and served as http://localhost:8080/ in my localhost.
For my backend is hosted as http://api.sanctum.test/

When login to system,
In order to pass Sanctum CSRF protection, we need to call sanctum/csrf-cookie as document stated. Below is my axios code

this.axios.get('http://api.sanctum.test/sanctum/csrf-cookie').then(() => {
        this.axios
        .post('http://api.sanctum.test/login', {
          "email": this.email, 
          "password": this.password
        })
        .then(response => (console.log(response.data)));
      });

Basically this is to set the csrf cookie, so when sending /login, it will automatic attach the CSRF-TOKEN into header. If the login request successfully, system will return access token to you, and you must save the plain token otherwise you cannot retrieve it again. Until this step, every things is working fine. I get my access token, if attach the access token into other post request, it will pass the 'auth:sanctum' middleware and user was authenticated.

But the question is, what is the extra protection for Sanctrum? For example

Route::group(['middleware' => ['auth:sanctum']], function() {
    Route::post('/user/{id}', function (Request $request, $id) {
        return response()->json(["id" => $id]);
    });
});

When testing in Postman, even the X-XSRF-TOKEN was removed from header, the request still able to pass the middleware as long as the header contain access token. Does this portion is exactly the same with Laravel passport personal access token? I though that in Sanctum every POST request must contain the X-XSRF-TOKEN to avoid CSRF attack, just like what Laravel performed in blade file? I spend a lot of time to study the official document, tutorial/ explanation, seem like everyone just care about how to get the access token, but did not mention about the next step. Am I misunderstand the usage of Sanctum?

Laravel Jetstream with Sanctum CSRF token protection not working

0 Answers