From bb83d4eb8fffcb01d3945c6ef16ff83b1f2d2e55 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 11 Sep 2023 19:10:50 +0200
Subject: [PATCH 01/13] Use fetch helpers instead of fetch

---
 .eslintrc.yaml                                |  5 ++-
 web_src/js/components/DashboardRepoList.vue   |  5 ++-
 web_src/js/components/DiffCommitSelector.vue  |  3 +-
 .../js/components/RepoBranchTagSelector.vue   |  4 +-
 web_src/js/features/common-global.js          |  3 +-
 web_src/js/features/common-issue-list.js      |  5 ++-
 web_src/js/features/comp/ImagePaste.js        |  9 +----
 web_src/js/features/comp/ReactionSelector.js  | 14 ++-----
 web_src/js/features/copycontent.js            |  3 +-
 web_src/js/features/install.js                |  3 +-
 web_src/js/features/pull-view-file.js         |  9 ++---
 web_src/js/features/repo-diff-commit.js       |  3 +-
 web_src/js/features/repo-issue-list.js        | 14 ++-----
 web_src/js/features/repo-migrate.js           |  9 ++---
 web_src/js/features/user-auth-webauthn.js     | 38 +++++++------------
 web_src/js/modules/fetch.js                   |  3 +-
 16 files changed, 52 insertions(+), 78 deletions(-)

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 846823abc7744..c9ea481af4bff 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -46,6 +46,9 @@ overrides:
   - files: ["*.config.*"]
     rules:
       import/no-unused-modules: [0]
+  - files: ["web_src/js/modules/fetch.js", "web_src/js/standalone/**/*"]
+    rules:
+      no-restricted-syntax: [2, WithStatement, ForInStatement, LabeledStatement, SequenceExpression]
 
 rules:
   "@eslint-community/eslint-comments/disable-enable-pair": [2]
@@ -420,7 +423,7 @@ rules:
   no-restricted-exports: [0]
   no-restricted-globals: [2, addEventListener, blur, close, closed, confirm, defaultStatus, defaultstatus, error, event, external, find, focus, frameElement, frames, history, innerHeight, innerWidth, isFinite, isNaN, length, location, locationbar, menubar, moveBy, moveTo, name, onblur, onerror, onfocus, onload, onresize, onunload, open, opener, opera, outerHeight, outerWidth, pageXOffset, pageYOffset, parent, print, removeEventListener, resizeBy, resizeTo, screen, screenLeft, screenTop, screenX, screenY, scroll, scrollbars, scrollBy, scrollTo, scrollX, scrollY, self, status, statusbar, stop, toolbar, top, __dirname, __filename]
   no-restricted-imports: [0]
-  no-restricted-syntax: [2, WithStatement, ForInStatement, LabeledStatement, SequenceExpression]
+  no-restricted-syntax: [2, WithStatement, ForInStatement, LabeledStatement, SequenceExpression, {selector: "CallExpression[callee.name='fetch']", message: "use modules/fetch.js instead"}]
   no-return-assign: [0]
   no-script-url: [2]
   no-self-assign: [2, {props: true}]
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 5b8075f07a067..5ff51168cbd9f 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -2,6 +2,7 @@
 import {createApp, nextTick} from 'vue';
 import $ from 'jquery';
 import {SvgIcon} from '../svg.js';
+import {GET} from '../modules/fetch.js';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
@@ -233,11 +234,11 @@ const sfc = {
       try {
         if (!this.reposTotalCount) {
           const totalCountSearchURL = `${this.subUrl}/repo/search?count_only=1&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`;
-          response = await fetch(totalCountSearchURL);
+          response = await GET(totalCountSearchURL);
           this.reposTotalCount = response.headers.get('X-Total-Count');
         }
 
-        response = await fetch(searchedURL);
+        response = await GET(searchedURL);
         json = await response.json();
       } catch {
         if (searchedURL === this.searchURL) {
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 48dc9d72ff4af..3f7100d201db4 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -1,5 +1,6 @@
 <script>
 import {SvgIcon} from '../svg.js';
+import {GET} from '../modules/fetch.js';
 
 export default {
   components: {SvgIcon},
@@ -123,7 +124,7 @@ export default {
     },
     /** Load the commits to show in this dropdown */
     async fetchCommits() {
-      const resp = await fetch(`${this.issueLink}/commits/list`);
+      const resp = await GET(`${this.issueLink}/commits/list`);
       const results = await resp.json();
       this.commits.push(...results.commits.map((x) => {
         x.hovered = false;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index b64b66d181323..f194605e91ed3 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -4,6 +4,7 @@ import $ from 'jquery';
 import {SvgIcon} from '../svg.js';
 import {pathEscapeSegments} from '../utils/url.js';
 import {showErrorToast} from '../modules/toast.js';
+import {GET} from '../modules/fetch.js';
 
 const sfc = {
   components: {SvgIcon},
@@ -191,8 +192,7 @@ const sfc = {
       this.isLoading = true;
       try {
         // the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
-        const reqUrl = `${this.repoLink}/${this.mode}/list`;
-        const resp = await fetch(reqUrl);
+        const resp = await GET(`${this.repoLink}/${this.mode}/list`);
         const {results} = await resp.json();
         for (const result of results) {
           let selected = false;
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index b30e21d0c0847..f72a6fc3a655f 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -11,6 +11,7 @@ import {htmlEscape} from 'escape-goat';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
+import {request} from '../modules/fetch.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 
@@ -81,7 +82,7 @@ function fetchActionDoRedirect(redirect) {
 
 async function fetchActionDoRequest(actionElem, url, opt) {
   try {
-    const resp = await fetch(url, opt);
+    const resp = await request(url, opt);
     if (resp.status === 200) {
       let {redirect} = await resp.json();
       redirect = redirect || actionElem.getAttribute('data-redirect');
diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js
index ecada11988cf5..3a28cf900ca5c 100644
--- a/web_src/js/features/common-issue-list.js
+++ b/web_src/js/features/common-issue-list.js
@@ -1,7 +1,8 @@
 import $ from 'jquery';
 import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js';
-const {appSubUrl} = window.config;
+import {GET} from '../modules/fetch.js';
 
+const {appSubUrl} = window.config;
 const reIssueIndex = /^(\d+)$/; // eg: "123"
 const reIssueSharpIndex = /^#(\d+)$/; // eg: "#123"
 const reIssueOwnerRepoIndex = /^([-.\w]+)\/([-.\w]+)#(\d+)$/;  // eg: "{owner}/{repo}#{index}"
@@ -54,7 +55,7 @@ export function initCommonIssueListQuickGoto() {
     // try to check whether the parsed goto link is valid
     let targetUrl = parseIssueListQuickGotoLink(repoLink, searchText);
     if (targetUrl) {
-      const res = await fetch(`${targetUrl}/info`);
+      const res = await GET(`${targetUrl}/info`);
       if (res.status !== 200) targetUrl = '';
     }
 
diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index dc335495a310f..cae42f3d5f7c7 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -1,16 +1,11 @@
 import $ from 'jquery';
-
-const {csrfToken} = window.config;
+import {POST} from '../../modules/fetch.js';
 
 async function uploadFile(file, uploadUrl) {
   const formData = new FormData();
   formData.append('file', file, file.name);
 
-  const res = await fetch(uploadUrl, {
-    method: 'POST',
-    headers: {'X-Csrf-Token': csrfToken},
-    body: formData,
-  });
+  const res = await POST(uploadUrl, {data: formData});
   return await res.json();
 }
 
diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js
index 336634a582fe2..76834f8844076 100644
--- a/web_src/js/features/comp/ReactionSelector.js
+++ b/web_src/js/features/comp/ReactionSelector.js
@@ -1,6 +1,5 @@
 import $ from 'jquery';
-
-const {csrfToken} = window.config;
+import {POST} from '../../modules/fetch.js';
 
 export function initCompReactionSelector($parent) {
   $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
@@ -12,15 +11,8 @@ export function initCompReactionSelector($parent) {
     const reactionContent = $(this).attr('data-reaction-content');
     const hasReacted = $(this).closest('.ui.segment.reactions').find(`a[data-reaction-content="${reactionContent}"]`).attr('data-has-reacted') === 'true';
 
-    const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        _csrf: csrfToken,
-        content: reactionContent,
-      }),
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
     });
 
     const data = await res.json();
diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js
index c1419a524bb5b..3d3b2a697ecbf 100644
--- a/web_src/js/features/copycontent.js
+++ b/web_src/js/features/copycontent.js
@@ -1,6 +1,7 @@
 import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {convertImage} from '../utils.js';
+import {GET} from '../modules/fetch.js';
 
 const {i18n} = window.config;
 
@@ -20,7 +21,7 @@ export function initCopyContent() {
     if (link) {
       btn.classList.add('is-loading', 'small-loading-icon');
       try {
-        const res = await fetch(link, {credentials: 'include', redirect: 'follow'});
+        const res = await GET(link, {credentials: 'include', redirect: 'follow'});
         const contentType = res.headers.get('content-type');
 
         if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) {
diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js
index 23122ca4c3834..9fda7f7d27f52 100644
--- a/web_src/js/features/install.js
+++ b/web_src/js/features/install.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {hideElem, showElem} from '../utils/dom.js';
+import {GET} from '../modules/fetch.js';
 
 export function initInstall() {
   const $page = $('.page-content.install');
@@ -111,7 +112,7 @@ function initPostInstall() {
   const targetUrl = el.getAttribute('href');
   let tid = setInterval(async () => {
     try {
-      const resp = await fetch(targetUrl);
+      const resp = await GET(targetUrl);
       if (tid && resp.status === 200) {
         clearInterval(tid);
         tid = null;
diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index 90ea805160781..86b65f68cfb76 100644
--- a/web_src/js/features/pull-view-file.js
+++ b/web_src/js/features/pull-view-file.js
@@ -1,7 +1,8 @@
 import {diffTreeStore} from '../modules/stores.js';
 import {setFileFolding} from './file-fold.js';
+import {POST} from '../modules/fetch.js';
 
-const {csrfToken, pageData} = window.config;
+const {pageData} = window.config;
 const prReview = pageData.prReview || {};
 const viewedStyleClass = 'viewed-file-checked-form';
 const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all "Viewed" checkbox forms can be found
@@ -68,11 +69,7 @@ export function initViewedCheckboxListenerFor() {
       const data = {files};
       const headCommitSHA = form.getAttribute('data-headcommit');
       if (headCommitSHA) data.headCommitSHA = headCommitSHA;
-      fetch(form.getAttribute('data-link'), {
-        method: 'POST',
-        headers: {'X-Csrf-Token': csrfToken},
-        body: JSON.stringify(data),
-      });
+      POST(form.getAttribute('data-link'), {data});
 
       // Fold the file accordingly
       const parentBox = form.closest('.diff-file-header');
diff --git a/web_src/js/features/repo-diff-commit.js b/web_src/js/features/repo-diff-commit.js
index bc591fa37d5f0..3d4f0f677ae15 100644
--- a/web_src/js/features/repo-diff-commit.js
+++ b/web_src/js/features/repo-diff-commit.js
@@ -1,9 +1,10 @@
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
+import {GET} from '../modules/fetch.js';
 
 async function loadBranchesAndTags(area, loadingButton) {
   loadingButton.classList.add('disabled');
   try {
-    const res = await fetch(loadingButton.getAttribute('data-fetch-url'));
+    const res = await GET(loadingButton.getAttribute('data-fetch-url'));
     const data = await res.json();
     hideElem(loadingButton);
     addTags(area, data.tags);
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 64343a8d22aba..6fb366f808e1d 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -5,6 +5,7 @@ import {htmlEscape} from 'escape-goat';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
 import {createSortable} from '../modules/sortable.js';
+import {DELETE, POST} from '../modules/fetch.js';
 
 function initRepoIssueListCheckboxes() {
   const $issueSelectAll = $('.issue-checkbox-all');
@@ -146,10 +147,8 @@ function initPinRemoveButton() {
       const id = Number(el.getAttribute('data-issue-id'));
 
       // Send the unpin request
-      const response = await fetch(el.getAttribute('data-unpin-url'), {
-        method: 'delete',
+      const response = await DELETE(el.getAttribute('data-unpin-url'), {
         headers: {
-          'X-Csrf-Token': window.config.csrfToken,
           'Content-Type': 'application/json',
         },
       });
@@ -166,14 +165,7 @@ function initPinRemoveButton() {
 async function pinMoveEnd(e) {
   const url = e.item.getAttribute('data-move-url');
   const id = Number(e.item.getAttribute('data-issue-id'));
-  await fetch(url, {
-    method: 'post',
-    body: JSON.stringify({id, position: e.newIndex + 1}),
-    headers: {
-      'X-Csrf-Token': window.config.csrfToken,
-      'Content-Type': 'application/json',
-    },
-  });
+  await POST(url, {data: {id, position: e.newIndex + 1}});
 }
 
 async function initIssuePinSort() {
diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js
index de9f7b023c1aa..e1ec863186fa8 100644
--- a/web_src/js/features/repo-migrate.js
+++ b/web_src/js/features/repo-migrate.js
@@ -1,7 +1,8 @@
 import $ from 'jquery';
 import {hideElem, showElem} from '../utils/dom.js';
+import {GET, POST} from '../modules/fetch.js';
 
-const {appSubUrl, csrfToken} = window.config;
+const {appSubUrl} = window.config;
 
 export function initRepoMigrationStatusChecker() {
   const $repoMigrating = $('#repo_migrating');
@@ -13,7 +14,7 @@ export function initRepoMigrationStatusChecker() {
 
   // returns true if the refresh still need to be called after a while
   const refresh = async () => {
-    const res = await fetch(`${appSubUrl}/user/task/${task}`);
+    const res = await GET(`${appSubUrl}/user/task/${task}`);
     if (res.status !== 200) return true; // continue to refresh if network error occurs
 
     const data = await res.json();
@@ -58,10 +59,8 @@ export function initRepoMigrationStatusChecker() {
 }
 
 async function doMigrationRetry(e) {
-  await fetch($(e.target).attr('data-migrating-task-retry-url'), {
-    method: 'post',
+  await POST($(e.target).attr('data-migrating-task-retry-url'), {
     headers: {
-      'X-Csrf-Token': csrfToken,
       'Content-Type': 'application/json',
     },
   });
diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js
index c4c2356cb3727..363e039760225 100644
--- a/web_src/js/features/user-auth-webauthn.js
+++ b/web_src/js/features/user-auth-webauthn.js
@@ -1,7 +1,8 @@
 import {encodeURLEncodedBase64, decodeURLEncodedBase64} from '../utils.js';
 import {showElem} from '../utils/dom.js';
+import {GET, POST} from '../modules/fetch.js';
 
-const {appSubUrl, csrfToken} = window.config;
+const {appSubUrl} = window.config;
 
 export async function initUserAuthWebAuthn() {
   const elPrompt = document.querySelector('.user.signin.webauthn-prompt');
@@ -13,7 +14,7 @@ export async function initUserAuthWebAuthn() {
     return;
   }
 
-  const res = await fetch(`${appSubUrl}/user/webauthn/assertion`);
+  const res = await GET(`${appSubUrl}/user/webauthn/assertion`);
   if (res.status !== 200) {
     webAuthnError('unknown');
     return;
@@ -53,12 +54,8 @@ async function verifyAssertion(assertedCredential) {
   const sig = new Uint8Array(assertedCredential.response.signature);
   const userHandle = new Uint8Array(assertedCredential.response.userHandle);
 
-  const res = await fetch(`${appSubUrl}/user/webauthn/assertion`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8'
-    },
-    body: JSON.stringify({
+  const res = await POST(`${appSubUrl}/user/webauthn/assertion`, {
+    data: {
       id: assertedCredential.id,
       rawId: encodeURLEncodedBase64(rawId),
       type: assertedCredential.type,
@@ -69,7 +66,7 @@ async function verifyAssertion(assertedCredential) {
         signature: encodeURLEncodedBase64(sig),
         userHandle: encodeURLEncodedBase64(userHandle),
       },
-    }),
+    },
   });
   if (res.status === 500) {
     webAuthnError('unknown');
@@ -88,13 +85,8 @@ async function webauthnRegistered(newCredential) {
   const clientDataJSON = new Uint8Array(newCredential.response.clientDataJSON);
   const rawId = new Uint8Array(newCredential.rawId);
 
-  const res = await fetch(`${appSubUrl}/user/settings/security/webauthn/register`, {
-    method: 'POST',
-    headers: {
-      'X-Csrf-Token': csrfToken,
-      'Content-Type': 'application/json; charset=utf-8',
-    },
-    body: JSON.stringify({
+  const res = await POST(`${appSubUrl}/user/settings/security/webauthn/register`, {
+    data: {
       id: newCredential.id,
       rawId: encodeURLEncodedBase64(rawId),
       type: newCredential.type,
@@ -102,7 +94,7 @@ async function webauthnRegistered(newCredential) {
         attestationObject: encodeURLEncodedBase64(attestationObject),
         clientDataJSON: encodeURLEncodedBase64(clientDataJSON),
       },
-    }),
+    },
   });
 
   if (res.status === 409) {
@@ -165,15 +157,11 @@ export function initUserAuthWebAuthnRegister() {
 async function webAuthnRegisterRequest() {
   const elNickname = document.getElementById('nickname');
 
-  const body = new FormData();
-  body.append('name', elNickname.value);
+  const formData = new FormData();
+  formData.append('name', elNickname.value);
 
-  const res = await fetch(`${appSubUrl}/user/settings/security/webauthn/request_register`, {
-    method: 'POST',
-    headers: {
-      'X-Csrf-Token': csrfToken,
-    },
-    body,
+  const res = await POST(`${appSubUrl}/user/settings/security/webauthn/request_register`, {
+    data: formData,
   });
 
   if (res.status === 409) {
diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index 63732206c6b62..a68fc9e36d249 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -5,7 +5,7 @@ const {csrfToken} = window.config;
 // fetch wrapper, use below method name functions and the `data` option to pass in data
 // which will automatically set an appropriate content-type header. For json content,
 // only object and array types are currently supported.
-function request(url, {headers, data, body, ...other} = {}) {
+export function request(url, {headers, data, body, ...other} = {}) {
   let contentType;
   if (!body) {
     if (data instanceof FormData) {
@@ -14,6 +14,7 @@ function request(url, {headers, data, body, ...other} = {}) {
     } else if (data instanceof URLSearchParams) {
       contentType = 'application/x-www-form-urlencoded';
       body = data;
+      body.append('_csrf', csrfToken);
     } else if (isObject(data) || Array.isArray(data)) {
       contentType = 'application/json';
       body = JSON.stringify(data);

From 1c1407d254ff1b43af5dd57033230a8910a251fe Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 11 Sep 2023 19:22:37 +0200
Subject: [PATCH 02/13] use set instead of append

---
 web_src/js/modules/fetch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index a68fc9e36d249..52ce3811782d3 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -14,7 +14,7 @@ export function request(url, {headers, data, body, ...other} = {}) {
     } else if (data instanceof URLSearchParams) {
       contentType = 'application/x-www-form-urlencoded';
       body = data;
-      body.append('_csrf', csrfToken);
+      body.set('_csrf', csrfToken);
     } else if (isObject(data) || Array.isArray(data)) {
       contentType = 'application/json';
       body = JSON.stringify(data);

From c39a9b80d541951d0764179d0b879495b5ba0520 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 17 Sep 2023 23:22:34 +0200
Subject: [PATCH 03/13] fix CSRF typo

---
 docs/content/contributing/guidelines-frontend.en-us.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/contributing/guidelines-frontend.en-us.md b/docs/content/contributing/guidelines-frontend.en-us.md
index 921c2b0233690..0d9e510e70039 100644
--- a/docs/content/contributing/guidelines-frontend.en-us.md
+++ b/docs/content/contributing/guidelines-frontend.en-us.md
@@ -95,7 +95,7 @@ Some lint rules and IDEs also have warnings if the returned Promise is not handl
 ### Fetching data
 
 To fetch data, use the wrapper functions `GET`, `POST` etc. from `modules/fetch.js`. They
-accept a `data` option for the content, will automatically set CSFR token and return a
+accept a `data` option for the content, will automatically set CSRF token and return a
 Promise for a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).
 
 ### HTML Attributes and `dataset`

From fa14d8b8a41eafe3a79363537dd38496b253fac0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 17 Sep 2023 23:23:34 +0200
Subject: [PATCH 04/13] remove _csrf set

---
 web_src/js/modules/fetch.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index 52ce3811782d3..1ea859e3b0919 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -14,7 +14,6 @@ export function request(url, {headers, data, body, ...other} = {}) {
     } else if (data instanceof URLSearchParams) {
       contentType = 'application/x-www-form-urlencoded';
       body = data;
-      body.set('_csrf', csrfToken);
     } else if (isObject(data) || Array.isArray(data)) {
       contentType = 'application/json';
       body = JSON.stringify(data);

From d4d82aa3b76d7f3cb917f7cc64fde6b9307ca83c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 17 Sep 2023 23:24:46 +0200
Subject: [PATCH 05/13] remove useless content-type

---
 web_src/js/features/repo-migrate.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js
index e1ec863186fa8..cae28fdd1b1fc 100644
--- a/web_src/js/features/repo-migrate.js
+++ b/web_src/js/features/repo-migrate.js
@@ -59,10 +59,6 @@ export function initRepoMigrationStatusChecker() {
 }
 
 async function doMigrationRetry(e) {
-  await POST($(e.target).attr('data-migrating-task-retry-url'), {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  await POST($(e.target).attr('data-migrating-task-retry-url'));
   window.location.reload();
 }

From c200586312d49e1d1908b74624c5e60cf8717bcb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 17 Sep 2023 23:33:07 +0200
Subject: [PATCH 06/13] remove DELETE body

---
 web_src/js/features/repo-issue-list.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 6fb366f808e1d..af4586121edc4 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -147,11 +147,7 @@ function initPinRemoveButton() {
       const id = Number(el.getAttribute('data-issue-id'));
 
       // Send the unpin request
-      const response = await DELETE(el.getAttribute('data-unpin-url'), {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
+      const response = await DELETE(el.getAttribute('data-unpin-url'));
       if (response.ok) {
         // Delete the tooltip
         el._tippy.destroy();

From 1e7220b8ca92014985ba6864c4fabff52308a026 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 17 Sep 2023 23:52:56 +0200
Subject: [PATCH 07/13] remove unneccesary X-Csrf-Token

---
 web_src/js/features/common-global.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index f72a6fc3a655f..1383ff580a1ac 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -128,7 +128,7 @@ async function formFetchAction(e) {
   }
 
   let reqUrl = formActionUrl;
-  const reqOpt = {method: formMethod.toUpperCase(), headers: {'X-Csrf-Token': csrfToken}};
+  const reqOpt = {method: formMethod.toUpperCase()};
   if (formMethod.toLowerCase() === 'get') {
     const params = new URLSearchParams();
     for (const [key, value] of formData) {
@@ -265,7 +265,7 @@ async function linkAction(e) {
   const url = el.getAttribute('data-url');
   const doRequest = async () => {
     el.disabled = true;
-    await fetchActionDoRequest(el, url, {method: 'POST', headers: {'X-Csrf-Token': csrfToken}});
+    await fetchActionDoRequest(el, url, {method: 'POST'});
     el.disabled = false;
   };
 

From 04370cf901fc36e0f205e1ee33c2022ed5d46fd0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 18 Sep 2023 00:08:24 +0200
Subject: [PATCH 08/13] merge headers with .set

---
 web_src/js/modules/fetch.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index 1ea859e3b0919..d509232df3d0e 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -5,7 +5,7 @@ const {csrfToken} = window.config;
 // fetch wrapper, use below method name functions and the `data` option to pass in data
 // which will automatically set an appropriate content-type header. For json content,
 // only object and array types are currently supported.
-export function request(url, {headers, data, body, ...other} = {}) {
+export function request(url, {headers = {}, data, body, ...other} = {}) {
   let contentType;
   if (!body) {
     if (data instanceof FormData) {
@@ -20,12 +20,18 @@ export function request(url, {headers, data, body, ...other} = {}) {
     }
   }
 
+  const headersMerged = new Headers({
+    'x-csrf-token': csrfToken,
+    ...(contentType && {'content-type': contentType}),
+  });
+
+  // not using spread syntax to avoid undesirable value merging
+  for (const [name, value] of Object.entries(headers)) {
+    headersMerged.set(name, value);
+  }
+
   return fetch(url, {
-    headers: {
-      'x-csrf-token': csrfToken,
-      ...(contentType && {'content-type': contentType}),
-      ...headers,
-    },
+    headers: headersMerged,
     ...(body && {body}),
     ...other,
   });

From a898c831ab159df8409ccda055f8207e9b068ff0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 18 Sep 2023 00:20:47 +0200
Subject: [PATCH 09/13] fix form-data content-type

---
 web_src/js/modules/fetch.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index d509232df3d0e..fe8ceb59d18cf 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -9,7 +9,6 @@ export function request(url, {headers = {}, data, body, ...other} = {}) {
   let contentType;
   if (!body) {
     if (data instanceof FormData) {
-      contentType = 'multipart/form-data';
       body = data;
     } else if (data instanceof URLSearchParams) {
       contentType = 'application/x-www-form-urlencoded';

From 078d8b0ff88c38d46b333da69a094a362614b77b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 18 Sep 2023 00:26:05 +0200
Subject: [PATCH 10/13] don't set content-type on URLSearchParams

---
 web_src/js/modules/fetch.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index fe8ceb59d18cf..6271dc5a65208 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -11,7 +11,6 @@ export function request(url, {headers = {}, data, body, ...other} = {}) {
     if (data instanceof FormData) {
       body = data;
     } else if (data instanceof URLSearchParams) {
-      contentType = 'application/x-www-form-urlencoded';
       body = data;
     } else if (isObject(data) || Array.isArray(data)) {
       contentType = 'application/json';

From 926357a4605515c41f83915781fc905ba60e3ae8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 18 Sep 2023 00:52:17 +0200
Subject: [PATCH 11/13] update comment

---
 web_src/js/modules/fetch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index 6271dc5a65208..01dd8bb89d90f 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -3,8 +3,8 @@ import {isObject} from '../utils.js';
 const {csrfToken} = window.config;
 
 // fetch wrapper, use below method name functions and the `data` option to pass in data
-// which will automatically set an appropriate content-type header. For json content,
-// only object and array types are currently supported.
+// which will automatically set an appropriate headers. For json content, only object
+// and array types are currently supported.
 export function request(url, {headers = {}, data, body, ...other} = {}) {
   let contentType;
   if (!body) {

From 7bcc2037540bf33674ee396c5a3024954c94f4e2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 19 Sep 2023 00:51:26 +0200
Subject: [PATCH 12/13] define safe http methods and don't add csrf to them

---
 web_src/js/modules/fetch.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index 01dd8bb89d90f..b5797ebfd7ab0 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -2,10 +2,13 @@ import {isObject} from '../utils.js';
 
 const {csrfToken} = window.config;
 
+// safe HTTP methods that don't need a csrf token
+const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE', 'QUERY']);
+
 // fetch wrapper, use below method name functions and the `data` option to pass in data
 // which will automatically set an appropriate headers. For json content, only object
 // and array types are currently supported.
-export function request(url, {headers = {}, data, body, ...other} = {}) {
+export function request(url, {method = 'GET', headers = {}, data, body, ...other} = {}) {
   let contentType;
   if (!body) {
     if (data instanceof FormData) {
@@ -19,16 +22,16 @@ export function request(url, {headers = {}, data, body, ...other} = {}) {
   }
 
   const headersMerged = new Headers({
-    'x-csrf-token': csrfToken,
+    ...(!safeMethods.has(method.toUpperCase()) && {'x-csrf-token': csrfToken}),
     ...(contentType && {'content-type': contentType}),
   });
 
-  // not using spread syntax to avoid undesirable value merging
   for (const [name, value] of Object.entries(headers)) {
     headersMerged.set(name, value);
   }
 
   return fetch(url, {
+    method,
     headers: headersMerged,
     ...(body && {body}),
     ...other,

From 708f09509b915ee4d9292b495e4ad768be1a7eb2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 19 Sep 2023 00:57:47 +0200
Subject: [PATCH 13/13] remove query, not widely supported

---
 web_src/js/modules/fetch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js
index b5797ebfd7ab0..9fccf4a81ef5d 100644
--- a/web_src/js/modules/fetch.js
+++ b/web_src/js/modules/fetch.js
@@ -3,7 +3,7 @@ import {isObject} from '../utils.js';
 const {csrfToken} = window.config;
 
 // safe HTTP methods that don't need a csrf token
-const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE', 'QUERY']);
+const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']);
 
 // fetch wrapper, use below method name functions and the `data` option to pass in data
 // which will automatically set an appropriate headers. For json content, only object