Laravel, Vue, Axios and CSRF

Hi All

Im a bit confused here.

I have a contact us page on my website which contains a form displayed through a Vue component. It uses Axios to post the form data to a POST route which submits the form etc.

It looks to me like no CSRF check is being made when submitting the form through AXIOS. I know this because (I am testing for security) have removed any reference to the CSRF token on the page and Vue component, and the form still submits!

Shouldn't it produce an error of some kind? Doesn't seem very safe to me.

Thanks

Mitch

rodrigo.pedra

5 years ago

Level 56

If your app uses session (which is the default), Laravel will set a cookie named XSRF-TOKEN on each request.

This cookie is the encrypted CSRF token

Axios will automatically detect this cookie and send it on XHR requests as a X-XSRF-TOKEN header.

Reference: https://github.com/axios/axios

search for XSRF-TOKEN

Laravel will check for that header, decrypt its content, and verify CSRF protection on that.

Reference: https://laravel.com/docs/8.x/csrf#csrf-tokens-javascript

finlamit

5 years ago

Level 1

Brilliant, thanks for your response. So what you are saying is that I am safe to continue as I am and that CSRF protection is already in place?

1 like

rodrigo.pedra

5 years ago

Level 56

As long as that route is in the ./routes/web.php (which uses the web middleware group by default), or is in a file that uses the web middleware group, then the VerifyCsrfToken middleware is verified for each non-GET request.

To clear it up:

Route is in the web middleware group (the default for routes defined in ./routes/web.php)
Or route have the VerifyCsrfToken middleware applied to it directly,
And route uses a HTTP verb different than HEAD, GET, or OPTIONS,

Then it will get CSRF protection by default.

To check if your route is in the web middleware group run:

php artisan route:list

And check the route's middleware stack listed in the output.

Please or to participate in this conversation.