Send X-CSRF-TOKEN in AJAX calls

Signed-off-by: yubiuser <github@yubiuser.dev>

Author: yubiuser

scripts/js/groups-clients.js

@@ -11,6 +11,7 @@
 "use strict";
 
 let table;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function reloadClientSuggestions() {
   $.ajax({
@@ -107,6 +108,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/clients",
       dataSrc: "clients",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups-domains.js

@@ -12,6 +12,7 @@
 
 let table;
 let GETDict = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   GETDict = utils.parseQueryString();
@@ -105,6 +106,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/domains",
       dataSrc: "domains",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups-lists.js

@@ -12,6 +12,7 @@
 
 let table;
 let GETDict = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   GETDict = utils.parseQueryString();
@@ -176,6 +177,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/lists",
       dataSrc: "lists",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups.js

@@ -10,6 +10,7 @@
 "use strict";
 
 let table;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function handleAjaxError(xhr, textStatus) {
   if (textStatus === "timeout") {
@@ -32,6 +33,7 @@ $(() => {
       error: handleAjaxError,
       dataSrc: "groups",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/messages.js

@@ -11,6 +11,7 @@
 
 let table;
 const toasts = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   const url = document.body.dataset.apiurl + "/info/messages";
@@ -19,6 +20,7 @@ $(() => {
       url,
       type: "GET",
       dataSrc: "messages",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/network.js

@@ -10,6 +10,7 @@
 "use strict";
 
 let tableApi;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 // How many IPs do we show at most per device?
 const MAXIPDISPLAY = 3;
@@ -217,6 +218,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/network/devices",
       type: "GET",
       dataType: "json",
+      headers: { "X-CSRF-TOKEN": csrfToken },
       data: {
         max_devices: 999,
         max_addresses: 25,

scripts/js/queries.js

@@ -9,6 +9,8 @@
 
 "use strict";
 
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+
 // These values are provided by the API
 // We initialize them as null and populate them during page init.
 let beginningOfTime = null; // seconds since epoch
@@ -592,6 +594,7 @@ $(() => {
       url: apiURL,
       error: handleAjaxError,
       dataSrc: "queries",
+      headers: { "X-CSRF-TOKEN": csrfToken },
       data(d) {
         if (cursor !== null) {
           d.cursor = cursor;

scripts/js/settings-api.js

@@ -14,6 +14,7 @@ let ownSessionID = null;
 let deleted = 0;
 let TOTPdata = null;
 let apppwSet = false;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function renderBool(data, type) {
   // Display and search content
@@ -36,6 +37,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/auth/sessions",
       type: "GET",
       dataSrc: "sessions",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[1, "asc"]],
     columns: [

scripts/js/settings-dhcp.js

@@ -11,6 +11,7 @@
 
 let dhcpLeaesTable = null;
 const toasts = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 // DHCP leases tooltips
 // Bootstrap 5 has no jQuery-plugin tooltip delegation, so lazily instantiate
@@ -50,6 +51,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/dhcp/leases",
       type: "GET",
       dataSrc: "leases",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[1, "asc"]],
     columns: [

scripts/js/settings-dns-records.js

@@ -8,6 +8,7 @@
 /* global utils: false, apiFailure:false, setConfigValues: false */
 
 "use strict";
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function hostsDomain(data) {
   // Split record in format IP NAME1 [NAME2 [NAME3 [NAME...]]]
@@ -82,6 +83,7 @@ function populateDataTable(endpoint) {
       url: document.body.dataset.apiurl + "/config/dns/" + endpoint,
       type: "GET",
       dataSrc: `config.dns.${endpoint}`,
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     autoWidth: false,
     columns,