CSRF attacks occur when an attacker tricks a user’s browser into making an unintended request. To counteract this threat, Laravel includes CSRF protection by default. The framework generates unique CSRF tokens for each user session, and these tokens are validated on the server side for specific types of requests.
Login Response (Laravel to Vue):
- After a successful login request from Vue to Laravel, Laravel responds with the CSRF token.
- Laravel may include the CSRF token in the initial HTML response or in the response headers.
Vue Storage:
- Vue typically stores the CSRF token in browser storage (e.g., localStorage or sessionStorage). This is usually done for easy access throughout the Vue application.
javascript// Example: Storing the CSRF token in localStorage
localStorage.setItem('csrf_token', csrfToken);
Subsequent Requests from Vue:
- For each subsequent API request made by Vue to Laravel, the CSRF token is included in the request headers.
- The CSRF token is usually sent in the
Authorizationheader with a key like'X-XSRF-TOKEN'.
javascript// Example: Including the CSRF token in API requests
const csrfToken = localStorage.getItem('csrf_token');
axios.post('/api/some-endpoint', data, {
headers: {
'X-XSRF-TOKEN': csrfToken,
},
});
CSRF Token Verification (Laravel):
- Laravel Sanctum includes the
VerifyCsrfTokenmiddleware, which automatically verifies the CSRF token on the server side for non-GET, PUT, POST, and DELETE requests. - The middleware checks if the CSRF token in the request headers (
'X-XSRF-TOKEN') matches the token stored in the session on the server side.
- Laravel Sanctum includes the
Response to Vue:
- Laravel processes the request and responds accordingly, whether it’s a successful response or an error.
By storing the CSRF token in browser storage and including it in the headers of subsequent requests, your Vue application ensures that Laravel can verify the authenticity of each API request, providing protection against CSRF attacks. This flow is a common practice when using Laravel Sanctum in combination with a Vue.js SPA.
When CSRF Token Validation Occurs
GET Requests:
- Generally, GET requests are used for retrieving data from the server.
- CSRF protection is not typically applied to GET requests because they are considered safe and idempotent.
PUT, POST, and DELETE Requests:
- PUT, POST, and DELETE requests are used to modify data on the server.
- These requests can have side effects, and CSRF protection is crucial to ensure that the request is coming from a legitimate source.
CSRF Token Validation:
- The
VerifyCsrfTokenmiddleware in Laravel is designed to validate the CSRF token for requests that are not of the GET method. - When you submit a form, make an API request, or perform other actions that result in PUT, POST, or DELETE requests, Laravel checks if the CSRF token in the request headers matches the token stored on the server side.
- The
Here’s an example of how CSRF token validation might look in the middleware:
// In the VerifyCsrfToken middleware
public function handle($request, Closure $next)
{
// CSRF validation is performed for non-GET requests
if ($request->isMethod('get')) {
return $next($request);
}
$this->validateCsrf($request);
return $next($request);
}
// Validate CSRF token
Ensuring Secure Requests
By validating CSRF tokens, Laravel ensures that requests modifying server data are legitimate. This practice significantly mitigates the risk of CSRF attacks, providing a secure environment for your web application.