I am working on a Django backend. The backend is deployed on Render, and I am testing email validation logic by sending OTP but for that i need to send "csrftoken" for the POST request.
At first the cookie was not getting set in cookies in firefox (but was getting set it chrome), since it was asking for the cookie to have partitioned attribute set, since django does not yet support it, i had to include a custom middleware to do it.
Now currently for some reason i am not able to read the csrftoken.
views.py:
@ensure_csrf_cookie
def register(request):
if request.method == "POST":
......
elif request.method == "GET":
return JsonResponse({"message": "GET request handled"}, status=200)
prod.py:
from mon import *
CSRF_TRUSTED_ORIGINS = [
"http://127.0.0.1:8001",
"http://localhost:8001",
"/",
]
CSRF_COOKIE_SAMESITE = "None"
CSRF_COOKIE_SECURE = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
"http://127.0.0.1:8001",
"http://localhost:8001",
"/",
]
SESSION_COOKIE_SAMESITE = "None"
SESSION_COOKIE_SECURE = True
HTML page i am making requests from URL: [http://127.0.0.1:8001/live.html]
......
<script>
function getCookie(name) {
let cookieValue = null;
console.log(document.cookie);
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
fetch("/", { // Initial GET request
method: "GET",
credentials: "include",
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// const csrftoken = response.headers.get("X-CSRFToken");
const csrftoken = getCookie("csrftoken");
console.log(csrftoken);
if (!csrftoken) {
console.error("CSRF token not found in headers!");
document.getElementById("errorMessage").textContent = "CSRF token not found. Please refresh the page.";
return;
}
console.log("CSRF Token from header:", csrftoken);
........
browser chrome
On browser page i am getting CSRF token not found. Please refresh the page.
live.html:169
live.html:199 null
live.html:202 CSRF token not found in headers!
cookie is getting set in chrome.
it has HttpOnly unchecked, Secure checked, SameSite None, Partition Key Site set to "http://127.0.0.1", Cross Site is checked.
browser firefox
On browser page i am getting "CSRF token not found. Please refresh the page."
This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
live.html
A meta tag attempting to declare the character encoding declaration was found too late, and the encoding was guessed from content instead. The meta tag needs to be moved to the start of the head part of the document. live.html:147:1
<empty string> live.html:169:21
null live.html:199:21
CSRF token not found in headers! live.html:202:25
<anonymous> http://127.0.0.1:8001/live.html:202
cookie is not getting set.
I tried providing an HTTPS environment by hosting my HTML page on github pages but the outcome was same as above.
Question:
- Why is document.cookie returning null when the CSRF token is clearly visible in DevTools?
- How can I correctly extract the CSRF token and send it in the request so that Django accepts it?
- Is there any additional security setting that prevents JavaScript from accessing cookies?
Would appreciate any insights.