merge: Pass token in Authorization header instead of body (!1003)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1003

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

5 files changed, 47 insertions, 13 deletions

diff --git a/packages/frontend/src/accounts.ts b/packages/frontend/src/accounts.ts
index d535c4c313..4ee951bbd7 100644
--- a/packages/frontend/src/accounts.ts
+++ b/packages/frontend/src/accounts.ts
@@ -63,11 +63,10 @@ function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Pr
 	return new Promise((done, fail) => {
 		window.fetch(`${apiUrl}/i`, {
 			method: 'POST',
-			body: JSON.stringify({
-				i: token,
-			}),
+			body: '{}',
 			headers: {
 				'Content-Type': 'application/json',
+				'Authorization': `Bearer ${token}`,
 			},
 		})
 			.then(res => new Promise<Misskey.entities.MeDetailed | { error: Record<string, any> }>((done2, fail2) => {
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index ba21394cbc..5012980992 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -73,12 +73,12 @@ const ok = async () => {
 		const croppedCanvas = await croppedSection?.$toCanvas({ width: widthToRender });
 		croppedCanvas?.toBlob(blob => {
 			if (!blob) return;
+			if (!$i) return;
 			const formData = new FormData();
 			formData.append('file', blob);
 			formData.append('name', `cropped_${props.file.name}`);
 			formData.append('isSensitive', props.file.isSensitive ? 'true' : 'false');
 			if (props.file.comment) { formData.append('comment', props.file.comment);}
-			formData.append('i', $i!.token);
 			if (props.uploadFolder) {
 				formData.append('folderId', props.uploadFolder);
 			} else if (props.uploadFolder !== null && prefer.s.uploadFolder) {
@@ -88,6 +88,9 @@ const ok = async () => {
 			window.fetch(apiUrl + '/drive/files/create', {
 				method: 'POST',
 				body: formData,
+				headers: {
+					'Authorization': `Bearer ${$i.token}`,
+				},
 			})
 				.then(response => response.json())
 				.then(f => {
diff --git a/packages/frontend/src/pages/drop-and-fusion.game.vue b/packages/frontend/src/pages/drop-and-fusion.game.vue
index 6b17c07b1c..c970fdb725 100644
--- a/packages/frontend/src/pages/drop-and-fusion.game.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.game.vue
@@ -908,7 +908,6 @@ function getGameImageDriveFile() {
 				formData.append('file', blob);
 				formData.append('name', `bubble-game-${Date.now()}.png`);
 				formData.append('isSensitive', 'false');
-				formData.append('i', $i.token);
 				if (prefer.s.uploadFolder) {
 					formData.append('folderId', prefer.s.uploadFolder);
 				}
@@ -916,6 +915,9 @@ function getGameImageDriveFile() {
 				window.fetch(apiUrl + '/drive/files/create', {
 					method: 'POST',
 					body: formData,
+					headers: {
+						'Authorization': `Bearer ${$i.token}`,
+					},
 				})
 					.then(response => response.json())
 					.then(f => {
diff --git a/packages/frontend/src/signout.ts b/packages/frontend/src/signout.ts
index 703c6fc534..64cb360b73 100644
--- a/packages/frontend/src/signout.ts
+++ b/packages/frontend/src/signout.ts
@@ -56,11 +56,11 @@ export async function signout() {
 				await window.fetch(`${apiUrl}/sw/unregister`, {
 					method: 'POST',
 					body: JSON.stringify({
-						i: $i.token,
 						endpoint: push.endpoint,
 					}),
 					headers: {
 						'Content-Type': 'application/json',
+						'Authorization': `Bearer ${$i.token}`,
 					},
 				});
 			}
diff --git a/packages/frontend/src/utility/misskey-api.ts b/packages/frontend/src/utility/misskey-api.ts
index 72ba54ade3..f8c4657655 100644
--- a/packages/frontend/src/utility/misskey-api.ts
+++ b/packages/frontend/src/utility/misskey-api.ts
@@ -29,7 +29,7 @@ export function misskeyApi<
 	_ResT = ResT extends void ? Response<E, P> : ResT,
 >(
 	endpoint: E,
-	data: P & { i?: string | null; } = {} as any,
+	data: P & { i?: string | null; } = {} as P & {},
 	token?: string | null | undefined,
 	signal?: AbortSignal,
 ): Promise<_ResT> {
@@ -41,9 +41,23 @@ export function misskeyApi<
 	};
 
 	const promise = new Promise<_ResT>((resolve, reject) => {
+		const headers: Record<string, string> = {
+			'Content-Type': 'application/json',
+		};
+
 		// Append a credential
-		if ($i) data.i = $i.token;
-		if (token !== undefined) data.i = token;
+		const auth = token !== undefined
+			? token
+			: data.i !== undefined
+				? data.i
+				: $i?.token;
+
+		if (auth) {
+			headers['Authorization'] = `Bearer ${auth}`;
+		}
+
+		// Don't let the body value leak through
+		delete data.i;
 
 		// Send request
 		window.fetch(`${apiUrl}/${endpoint}`, {
@@ -51,9 +65,7 @@ export function misskeyApi<
 			body: JSON.stringify(data),
 			credentials: 'omit',
 			cache: 'no-cache',
-			headers: {
-				'Content-Type': 'application/json',
-			},
+			headers,
 			signal,
 		}).then(async (res) => {
 			const body = res.status === 204 ? null : await res.json();
@@ -81,7 +93,9 @@ export function misskeyApiGet<
 	_ResT = ResT extends void ? Misskey.api.SwitchCaseResponseType<E, P> : ResT,
 >(
 	endpoint: E,
-	data: P = {} as any,
+	data: P & { i?: string | null; } = {} as P & {},
+	token?: string | null | undefined,
+	signal?: AbortSignal,
 ): Promise<_ResT> {
 	pendingApiRequestsCount.value++;
 
@@ -92,11 +106,27 @@ export function misskeyApiGet<
 	const query = new URLSearchParams(data as any);
 
 	const promise = new Promise<_ResT>((resolve, reject) => {
+		// Append a credential
+		const auth = token !== undefined
+			? token
+			: data.i !== undefined
+				? data.i
+				: $i?.token;
+
+		const headers = auth
+			? { 'Authorization': `Bearer ${auth}` }
+			: undefined;
+
+		// Don't let the body value leak through
+		query.delete('i');
+
 		// Send request
 		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
 			method: 'GET',
 			credentials: 'omit',
 			cache: 'default',
+			headers,
+			signal,
 		}).then(async (res) => {
 			const body = res.status === 204 ? null : await res.json();