Fix CSRF token syntax in JavaScript

- Use Twig {{ csrf_token() }} and {{ csrf_hash() }} helpers
- Remove invalid PHP syntax from JS
- Add getCsrfData() helper function
This commit is contained in:
Vladimir Tomashevskiy 2026-02-08 15:29:25 +00:00
parent 85a920b49a
commit f6aebd8b66
1 changed files with 13 additions and 29 deletions

View File

@ -227,42 +227,30 @@
{% block scripts %} {% block scripts %}
{{ parent() }} {{ parent() }}
<script> <script>
function updateCsrfToken() { function getCsrfData() {
// Обновляем CSRF токен в форме подзадач return {
fetch('/') token: '{{ csrf_token() }}',
.then(response => response.text()) hash: '{{ csrf_hash() }}'
.then(html => { };
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newToken = doc.querySelector('input[name="<?= csrf_token() ?>"]');
const newHash = doc.querySelector('input[name="<?= csrf_hash() ?>"]');
if (newToken && newHash) {
document.querySelectorAll('.subtask-form input[name="<?= csrf_token() ?>"]').forEach(input => {
input.value = newToken.value;
});
document.querySelectorAll('.subtask-form input[name="<?= csrf_hash() ?>"]').forEach(input => {
input.value = newHash.value;
});
}
});
} }
function addSubtask(event, taskId) { function addSubtask(event, taskId) {
event.preventDefault(); event.preventDefault();
const form = event.target; const form = event.target;
const formData = new FormData(form);
const input = form.querySelector('input[name="title"]'); const input = form.querySelector('input[name="title"]');
const title = input.value.trim(); const title = input.value.trim();
if (!title) return; if (!title) return;
const csrf = getCsrfData();
fetch(`/tasks/${taskId}/subtasks`, { fetch(`/tasks/${taskId}/subtasks`, {
method: 'POST', method: 'POST',
headers: { headers: {
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded',
}, },
body: formData body: `title=${encodeURIComponent(title)}&${csrf.token}=${csrf.hash}`
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -311,9 +299,7 @@ function updateSubtasksCount() {
} }
function toggleSubtask(taskId, subtaskId) { function toggleSubtask(taskId, subtaskId) {
// Получаем актуальный CSRF токен из формы const csrf = getCsrfData();
const csrfToken = document.querySelector('input[name="<?= csrf_token() ?>"]').value;
const csrfHash = document.querySelector('input[name="<?= csrf_hash() ?>"]').value;
fetch(`/tasks/${taskId}/subtasks/${subtaskId}/toggle`, { fetch(`/tasks/${taskId}/subtasks/${subtaskId}/toggle`, {
method: 'POST', method: 'POST',
@ -321,7 +307,7 @@ function toggleSubtask(taskId, subtaskId) {
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
}, },
body: `<?= csrf_token() ?>=${csrfToken}&<?= csrf_hash() ?>=${csrfHash}` body: `${csrf.token}=${csrf.hash}`
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -342,9 +328,7 @@ function toggleSubtask(taskId, subtaskId) {
function deleteSubtask(taskId, subtaskId) { function deleteSubtask(taskId, subtaskId) {
if (!confirm('Удалить подзадачу?')) return; if (!confirm('Удалить подзадачу?')) return;
// Получаем актуальный CSRF токен из формы const csrf = getCsrfData();
const csrfToken = document.querySelector('input[name="<?= csrf_token() ?>"]').value;
const csrfHash = document.querySelector('input[name="<?= csrf_hash() ?>"]').value;
fetch(`/tasks/${taskId}/subtasks/${subtaskId}/delete`, { fetch(`/tasks/${taskId}/subtasks/${subtaskId}/delete`, {
method: 'POST', method: 'POST',
@ -352,7 +336,7 @@ function deleteSubtask(taskId, subtaskId) {
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
}, },
body: `<?= csrf_token() ?>=${csrfToken}&<?= csrf_hash() ?>=${csrfHash}` body: `${csrf.token}=${csrf.hash}`
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {