Improved CSRF handling

This commit is contained in:
rainbow napkin 2025-05-04 17:52:55 -04:00
parent 2d5afc23d7
commit 1f00bacb6f
4 changed files with 74 additions and 8 deletions

View file

@ -105,11 +105,18 @@ class canopyUXUtils{
try{
const errors = body.errors;
errors.forEach((err)=>{
//Capitalize the first letter of the type
const type = `${err.type[0].toUpperCase()}${err.type.slice(1)}`
if(err.msg == "invalid csrf token"){
//reload CSRF token
utils.ajax.reloadCSRFToken();
//Display our error
new canopyUXUtils.popup(`<h3>${type} Error:</h3><p><br>${err.msg}</p>`);
new canopyUXUtils.popup(`<h3>CSRF Error:</h3><p><br>Bad CSRF token, try again!</p>`);
}else{
//Capitalize the first letter of the type
const type = `${err.type[0].toUpperCase()}${err.type.slice(1)}`
//Display our error
new canopyUXUtils.popup(`<h3>${type} Error:</h3><p><br>${err.msg}</p>`);
}
});
}catch(err){
console.error("Display Error Body:");
@ -1056,12 +1063,27 @@ class canopyAjaxUtils{
}
}
//Syntatic sugar
getCSRFToken(){
return document.querySelector("[name='csrf-token']").content;
}
async reloadCSRFToken(){
//Fetch a new token
var response = await fetch('/api/refreshToken',{
method: "GET"
});
if(response.ok){
//Get data from fetch
let data = await response.json()
//Inject new token into the page
document.querySelector("[name='csrf-token']").content = data.token;
}else{
utils.ux.displayResponseError(await response.json());
}
}
}
const utils = new canopyUtils()