Директива csrf
Директива csrf в шаблонизаторе Blade генерирует скрытое поле ввода с именем '_token', содержащим CSRF-токен текущей сессии. Этот токен автоматически проверяется Laravel при отправке любых POST, PUT, PATCH или DELETE запросов. Если токен отсутствует или не совпадает с сессионным, запрос будет отклонён с ошибкой 419 Page Expired. Директива не принимает никаких параметров и используется исключительно в формах для обеспечения безопасности.
Синтаксис
@csrf
Пример
Давайте создадим форму для отправки данных с использованием директивы csrf:
<form method="POST" action="/submit">
@csrf
<input type="text" name="name" placeholder="Enter name">
<input type="email" name="email" placeholder="Enter email">
<button type="submit">Submit</button>
</form>
Результат выполнения кода:
<form method="POST" action="/submit">
<input type="hidden" name="_token" value="b5f3d7a9e1c8f4a6d2e3f5g7h8i9j0k1">
<input type="text" name="name" placeholder="Enter name">
<input type="email" name="email" placeholder="Enter email">
<button type="submit">Submit</button>
</form>
Пример
Давайте добавим директиву csrf в форму для удаления записи с использованием метода DELETE:
<form method="POST" action="/article/5">
@csrf
@method('DELETE')
<p>Are you sure you want to delete this article?</p>
<button type="submit">Delete</button>
</form>
Результат выполнения кода:
<form method="POST" action="/article/5">
<input type="hidden" name="_token" value="c7d9f1a3e5b8d2c4f6g8h0i2j4k6l8m0">
<input type="hidden" name="_method" value="DELETE">
<p>Are you sure you want to delete this article?</p>
<button type="submit">Delete</button>
</form>
Пример
Давайте создадим форму входа, которая использует директиву csrf для защиты от атак:
<form method="POST" action="/login">
@csrf
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" value="{{ old('email') }}">
@error('email')
<span class="error">{{ $message }}</span>
@enderror
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password">
@error('password')
<span class="error">{{ $message }}</span>
@enderror
</div>
<button type="submit">Login</button>
</form>
Результат выполнения кода:
<form method="POST" action="/login">
<input type="hidden" name="_token" value="d8f0a2b4c6e8g1h3j5l7n9p1r3t5v7x9">
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" value="">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password">
</div>
<button type="submit">Login</button>
</form>
Пример
Давайте используем директиву csrf в AJAX-форме для отправки данных без перезагрузки страницы:
<form id="ajaxForm" method="POST" action="/api/submit">
@csrf
<input type="text" name="title" placeholder="Article title">
<textarea name="content" placeholder="Article content"></textarea>
<button type="submit">Submit via AJAX</button>
</form>
<script>
document.getElementById('ajaxForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const token = document.querySelector('input[name="_token"]').value;
fetch(this.action, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': token
},
body: formData
})
.then(response => response.json())
.then(data => console.log(data));
});
</script>
Результат выполнения кода:
<form id="ajaxForm" method="POST" action="/api/submit">
<input type="hidden" name="_token" value="e9g1i3k5m7o9q2s4u6w8y0a2c4e6g8i0">
<input type="text" name="title" placeholder="Article title">
<textarea name="content" placeholder="Article content"></textarea>
<button type="submit">Submit via AJAX</button>
</form>
<script>
document.getElementById('ajaxForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const token = document.querySelector('input[name="_token"]').value;
fetch(this.action, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': token
},
body: formData
})
.then(response => response.json())
.then(data => console.log(data));
});
</script>
