Security with Laravel and VueJS in API mode

Hello,

I have already developed some applications in full Laravel and I'm trustful concerning security.

I discover VueJS for some months and I have some questions about security.

In Laravel (for the back) I have API protected by Sanctum (I can generate a token and then use this token in VueJS) and I have a middleware to add some security headers (CSP, ...).

But what about security using VueJS (for the front) to access to Laravel API ?

For example (but not only this example), what about CSRF ? With VueJS forms, I do not use any CSRF token and Laravel API accepts, is it normal ?

What could you advise me to have a good security with VueJS when using Laravel API ?

Thanks for your help ;).

Vincent

martinbean

4 years ago

Level 80

@vincent15000 If you’re using API authentication then it doesn’t matter what “front-end” you’re using, be it Vue.js or a native mobile app.

Your API endpoints should require authentication (usually a token), and the client should only be able to request that token via secure means (i.e. OAuth).

If you use Sanctum then this is the issue that Sanctum literally aims to solve. If you have a Vue front-end then you should be using the SPA-based authentication method whereby you get a retrieve a cookie via a CSRF-protected route. This cookie should then be attached to any API requests and the sanctum guard will use it for authentication. Cookies are by their nature restricted to domains, so other sites can’t use it to submit forms, therefore CSRF protected isn’t needed if your API routes only allow requests that include authentication.

1 like

vincent15000

4 years ago

Level 63

Thank you @martinbean, that's now a little clearer, but I don't have understood all.

To test the way it works, I have generated a token with Sanctum and then I have injected it as Bearer token in the headers of the VueJS requests with axios.

Is it all I have to do ?

For the front, for the moment I only added this token directly in the script in order to be used by axios. For a more practice application, if I have understood what you mean, I would have to create a cookie containing this Sanctum token and the front app would retrieve this cookie (the token) to inject it into axios.

And for a mobile app, the token could be saved directement on the smartphone in a local text file for example.

Could you tell me if I have understood ?

Thanks ;).

martinbean

4 years ago

Best Answer

Level 80

For the front, for the moment I only added this token directly in the script in order to be used by axios. For a more practice application, if I have understood what you mean, I would have to create a cookie containing this Sanctum token and the front app would retrieve this cookie (the token) to inject it into axios.

@vincent15000 You don’t need to manually create cookies. By making a request to the login endpoint, you would get a standard Laravel cookie back that the browser would save, and then also attach to outgoing Axios requests. Don‘t reinvent the wheel. Read the docs and use Sanctum how it was intended to be used.

And for a mobile app, the token could be saved directement on the smartphone in a local text file for example.

No. You don’t want to be saving tokens in plaintext anywhere on a client. Not in a browser. Not in localStorage. Not in text files on user’s smartphones. Again, read the docs: https://laravel.com/docs/8.x/sanctum#mobile-application-authentication

For a native mobile app, you’d save the token in some form of secure storage. For iOS apps, this would be the user’s keychain. I don’t know what Android uses for credential management but they’ll be something similar.

vincent15000

4 years ago

Level 63

Ok I think I have understood.

According to the doc, I need a form on the front (email / password for example) to generate a new token. And this token is bind to the device name. What should I understand ? That if I change the device (another smartphone for example) the token is no more valid ?

And then I inject this token in the axios headers : no problem.

But I imagine it could be another problem : you told me that the authentication could be via OAuth. However OAuth is possible only via Passport, isn't ? So do I need to implement both Passport and Sanctum in my app ? If I'm right, I need a csrf token or similar protection for this login form no ?

Sorry but it's difficult for me, I'm not sure of what to do, even with the doc.

vincent15000

4 years ago

Level 63

Oh I just found this, I didn't read the doc very well.

https://laravel.com/docs/8.x/sanctum#spa-authenticating

There's this route.

axios.get('/sanctum/csrf-cookie').then(response => {
    // Login...
});

Please or to participate in this conversation.