365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ContactForm component to use dynamic origin for API requests and ensure CSRF token is included in form submissions

Browse Source 
- Modified API fetch calls in the ContactForm to use window.location.origin for better compatibility across environments.
- Ensured CSRF token is appended to form data before submission for enhanced security.
This commit is contained in:
Richard Bergsma
2025-06-26 23:03:27 +02:00
parent 49fabddc96
commit e19dc8eb3e
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ContactForm.astro
View File

@@ -32,7 +32,7 @@
<script> <script>
async function fetchCsrfToken() { async function fetchCsrfToken() {
try { try {
const response = await fetch('/api/contact?csrf=true'); const response = await fetch(window.location.origin + '/api/contact?csrf=true');
const data = await response.json(); const data = await response.json();
const csrfTokenInput = document.getElementById('csrf_token'); const csrfTokenInput = document.getElementById('csrf_token');
if (csrfTokenInput) { if (csrfTokenInput) {
@@ -52,9 +52,13 @@ if (contactForm && feedbackDiv) {
contactForm.onsubmit = async function (e) { contactForm.onsubmit = async function (e) {
e.preventDefault(); e.preventDefault();
const formData = new FormData(this as HTMLFormElement); const formData = new FormData(this as HTMLFormElement);
const csrfTokenInput = document.getElementById('csrf_token') as HTMLInputElement | null;
if (csrfTokenInput) {
formData.append('csrf_token', csrfTokenInput.value);
}
let res, data; let res, data;
try { try {
res = await fetch('/api/contact', { method: 'POST', body: formData }); res = await fetch(window.location.origin + '/api/contact', { method: 'POST', body: formData });
data = await res.json(); data = await res.json();
console.log('Contact API response:', data); console.log('Contact API response:', data);
} catch (_err) { } catch (_err) {
@@ -97,7 +101,7 @@ if (manualReviewForm) {
const justification = manualJustification.value; const justification = manualJustification.value;
const token = manualToken.value; const token = manualToken.value;
const res = await fetch('/api/contact/manual-review', { const res = await fetch(window.location.origin + '/api/contact/manual-review', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, justification, token }), body: JSON.stringify({ email, justification, token }),