Add friendly capcha

packages/backend/migration/1730505338000-friendlyCaptcha.js

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: marie and other Sharkey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class friendlyCaptcha1730505338000 {
+	name = 'friendlyCaptcha1730505338000';
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "meta" ADD "enableFC" boolean NOT NULL DEFAULT false`, undefined);
+		await queryRunner.query(`ALTER TABLE "meta" ADD "fcSiteKey" character varying(1024)`, undefined);
+		await queryRunner.query(`ALTER TABLE "meta" ADD "fcSecretKey" character varying(1024)`, undefined);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "fcSecretKey"`, undefined);
+		await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "fcSiteKey"`, undefined);
+		await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "enableFC"`, undefined);
+	}
+}

packages/backend/src/core/CaptchaService.ts

@@ -10,6 +10,7 @@ import { bindThis } from '@/decorators.js';
 type CaptchaResponse = {
 	success: boolean;
 	'error-codes'?: string[];
+	'errors'?: string[];
 };
 
 @Injectable()
@@ -73,6 +74,36 @@ export class CaptchaService {
 		}
 	}
 
+	@bindThis
+	public async verifyFriendlyCaptcha(secret: string, response: string | null | undefined): Promise<void> {
+		if (response == null) {
+			throw new Error('frc-failed: no response provided');
+		}
+
+		const result = await this.httpRequestService.send('https://api.friendlycaptcha.com/api/v1/siteverify', {
+			method: 'POST',
+			body: JSON.stringify({
+				secret: secret,
+				solution: response,
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		});
+
+		if (result.status !== 200) {
+			throw new Error('frc-failed: frc didn\'t return 200 OK');
+		}
+
+		const resp = await result.json() as CaptchaResponse;
+
+		if (resp.success !== true) {
+			const errorCodes = resp['error-codes'] ? resp['errors'].join(', ') : '';
+			throw new Error(`frc-failed: ${errorCodes}`);
+		}
+	}
+
+
 	// https://codeberg.org/Gusted/mCaptcha/src/branch/main/mcaptcha.go
 	@bindThis
 	public async verifyMcaptcha(secret: string, siteKey: string, instanceHost: string, response: string | null | undefined): Promise<void> {

packages/backend/src/core/entities/MetaEntityService.ts

@@ -78,6 +78,8 @@ export class MetaEntityService {
 			recaptchaSiteKey: instance.recaptchaSiteKey,
 			enableTurnstile: instance.enableTurnstile,
 			turnstileSiteKey: instance.turnstileSiteKey,
+			enableFC: instance.enableFC,
+			fcSiteKey: instance.fcSiteKey,
 			googleAnalyticsId: instance.googleAnalyticsId,
 			swPublickey: instance.swPublicKey,
 			themeColor: instance.themeColor,

packages/backend/src/models/Meta.ts

@@ -263,6 +263,23 @@ export class MiMeta {
 	})
 	public turnstileSecretKey: string | null;
 
+	@Column('boolean', {
+		default: false,
+	})
+	public enableFC: boolean;
+
+	@Column('varchar', {
+		length: 1024,
+		nullable: true,
+	})
+	public fcSiteKey: string | null;
+
+	@Column('varchar', {
+		length: 1024,
+		nullable: true,
+	})
+	public fcSecretKey: string | null;
+
 	// chaptcha系を追加した際にはnodeinfoのレスポンスに追加するのを忘れないようにすること
 
 	@Column('varchar', {

packages/backend/src/models/json-schema/meta.ts

@@ -119,6 +119,14 @@ export const packedMetaLiteSchema = {
 			type: 'string',
 			optional: false, nullable: true,
 		},
+		enableFC: {
+			type: 'boolean',
+			optional: false, nullable: false,
+		},
+		fcSiteKey: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
 		swPublickey: {
 			type: 'string',
 			optional: false, nullable: true,

packages/backend/src/server/api/ApiServerService.ts

@@ -142,6 +142,7 @@ export class ApiServerService {
 				'hcaptcha-response'?: string;
 				'g-recaptcha-response'?: string;
 				'turnstile-response'?: string;
+				'frc-captcha-solution'?: string;
 			}
 		}>('/signup', (request, reply) => this.signupApiService.signup(request, reply));
 

packages/backend/src/server/api/SignupApiService.ts

@@ -71,6 +71,7 @@ export class SignupApiService {
 				'g-recaptcha-response'?: string;
 				'turnstile-response'?: string;
 				'm-captcha-response'?: string;
+				'frc-captcha-solution'?: string;
 			}
 		}>,
 		reply: FastifyReply,
@@ -100,6 +101,12 @@ export class SignupApiService {
 				});
 			}
 
+			if (instance.enableFC && instance.fcSecretKey) {
+				await this.captchaService.verifyFriendlyCaptcha(instance.fcSecretKey, body['frc-captcha-solution']).catch(err => {
+					throw new FastifyReplyError(400, err);
+				});
+			}
+
 			if (instance.enableRecaptcha && instance.recaptchaSecretKey) {
 				await this.captchaService.verifyRecaptcha(instance.recaptchaSecretKey, body['g-recaptcha-response']).catch(err => {
 					logger.error('Failed to verify reCAPTCHA.', { error: err });

packages/backend/src/server/api/endpoints/admin/meta.ts

@@ -77,6 +77,14 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			enableFC: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+			fcSiteKey: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			swPublickey: {
 				type: 'string',
 				optional: false, nullable: true,
@@ -212,6 +220,10 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			fcSecretKey: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			sensitiveMediaDetection: {
 				type: 'string',
 				optional: false, nullable: false,
@@ -566,6 +578,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				recaptchaSiteKey: instance.recaptchaSiteKey,
 				enableTurnstile: instance.enableTurnstile,
 				turnstileSiteKey: instance.turnstileSiteKey,
+				enableFC: instance.enableFC,
+				fcSiteKey: instance.fcSiteKey,
 				googleAnalyticsId: instance.googleAnalyticsId,
 				swPublickey: instance.swPublicKey,
 				themeColor: instance.themeColor,
@@ -598,6 +612,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				mcaptchaSecretKey: instance.mcaptchaSecretKey,
 				recaptchaSecretKey: instance.recaptchaSecretKey,
 				turnstileSecretKey: instance.turnstileSecretKey,
+				fcSecretKey: instance.fcSecretKey,
 				sensitiveMediaDetection: instance.sensitiveMediaDetection,
 				sensitiveMediaDetectionSensitivity: instance.sensitiveMediaDetectionSensitivity,
 				setSensitiveFlagAutomatically: instance.setSensitiveFlagAutomatically,

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -79,6 +79,9 @@ export const paramDef = {
 		enableTurnstile: { type: 'boolean' },
 		turnstileSiteKey: { type: 'string', nullable: true },
 		turnstileSecretKey: { type: 'string', nullable: true },
+		enableFC: { type: 'boolean' },
+		fcSiteKey: { type: 'string', nullable: true },
+		fcSecretKey: { type: 'string', nullable: true },
 		googleAnalyticsId: { type: 'string', nullable: true },
 		sensitiveMediaDetection: { type: 'string', enum: ['none', 'all', 'local', 'remote'] },
 		sensitiveMediaDetectionSensitivity: { type: 'string', enum: ['medium', 'low', 'high', 'veryLow', 'veryHigh'] },
@@ -380,6 +383,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				set.turnstileSecretKey = ps.turnstileSecretKey;
 			}
 
+			if (ps.enableFC !== undefined) {
+				set.enableFC = ps.enableFC;
+			}
+
+			if (ps.fcSiteKey !== undefined) {
+				set.fcSiteKey = ps.fcSiteKey;
+			}
+
+			if (ps.fcSecretKey !== undefined) {
+				set.fcSecretKey = ps.fcSecretKey;
+			}
+
 			if (ps.googleAnalyticsId !== undefined) {
 				set.googleAnalyticsId = ps.googleAnalyticsId;
 			}

packages/backend/test/e2e/2fa.ts

@@ -123,12 +123,14 @@ describe('2要素認証', () => {
 		password: string,
 		'g-recaptcha-response'?: string | null,
 		'hcaptcha-response'?: string | null,
+		'frc-captcha-solution'?: string | null,
 	} => {
 		return {
 			username,
 			password,
 			'g-recaptcha-response': null,
 			'hcaptcha-response': null,
+			'frc-captcha-solution': null,
 		};
 	};
 

packages/frontend/src/components/MkCaptcha.vue

@@ -27,9 +27,12 @@ export type Captcha = {
 	execute(id: string): void;
 	reset(id?: string): void;
 	getResponse(id: string): string;
+	WidgetInstance(container: string | Node, options: {
+		readonly [_ in 'sitekey' | 'doneCallback' | 'errorCallback' | 'puzzleEndpoint']?: unknown;
+	}): void;
 };
 
-export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile' | 'mcaptcha';
+export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile' | 'mcaptcha' | 'fc';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -60,6 +63,7 @@ const variable = computed(() => {
 		case 'recaptcha': return 'grecaptcha';
 		case 'turnstile': return 'turnstile';
 		case 'mcaptcha': return 'mcaptcha';
+		case 'fc': return 'friendlyChallenge';
 	}
 });
 
@@ -70,6 +74,7 @@ const src = computed(() => {
 		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
 		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
 		case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+		case 'fc': return 'https://cdn.jsdelivr.net/npm/friendly-challenge@0.9.18/widget.min.js';
 		case 'mcaptcha': return null;
 	}
 });
@@ -112,6 +117,14 @@ async function requestRender() {
 				key: props.sitekey,
 			},
 		});
+	} else if (variable.value === 'friendlyChallenge' && captchaEl.value instanceof Element) {
+   		new captcha.value.WidgetInstance(captchaEl.value, {
+   			sitekey: props.sitekey,
+   			doneCallback: callback,
+   			errorCallback: callback,
+   		});
+   		// The following line is needed so that the design gets applied without it the captcha will look broken
+   		captchaEl.value.className = 'frc-captcha';
 	} else {
 		window.setTimeout(requestRender, 1);
 	}

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -54,6 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
 			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
+			<MkCaptcha v-if="instance.enableFC" ref="fc" v-model="fcResponse" :class="$style.captcha" provider="fc" :sitekey="instance.fcSiteKey"/>
 			<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-cy-signup-submit style="margin: 0 auto;">
 				<template v-if="submitting">
 					<MkLoading :em="true" :colored="false"/>
@@ -98,6 +99,7 @@ const hcaptcha = ref<Captcha | undefined>();
 const mcaptcha = ref<Captcha | undefined>();
 const recaptcha = ref<Captcha | undefined>();
 const turnstile = ref<Captcha | undefined>();
+const fc = ref<Captcha | undefined>();
 
 const username = ref<string>('');
 const password = shallowRef<InstanceType<typeof MkNewPassword> | null>(null);
@@ -111,6 +113,7 @@ const hCaptchaResponse = ref<string | null>(null);
 const mCaptchaResponse = ref<string | null>(null);
 const reCaptchaResponse = ref<string | null>(null);
 const turnstileResponse = ref<string | null>(null);
+const fcResponse = ref<string | null>(null);
 const usernameAbortController = ref<null | AbortController>(null);
 const emailAbortController = ref<null | AbortController>(null);
 
@@ -120,6 +123,7 @@ const shouldDisableSubmitting = computed((): boolean => {
 		instance.enableMcaptcha && !mCaptchaResponse.value ||
 		instance.enableRecaptcha && !reCaptchaResponse.value ||
 		instance.enableTurnstile && !turnstileResponse.value ||
+		instance.enableFC && !fcResponse.value ||
 		instance.emailRequiredForSignup && emailState.value !== 'ok' ||
 		usernameState.value !== 'ok' ||
 		!password.value?.isValid;
@@ -206,6 +210,7 @@ async function onSubmit(): Promise<void> {
 			'm-captcha-response': mCaptchaResponse.value,
 			'g-recaptcha-response': reCaptchaResponse.value,
 			'turnstile-response': turnstileResponse.value,
+			'frc-captcha-solution': fcResponse.value,
 		}, undefined, (res) => {
 			if (instance.emailRequiredForSignup) {
 				os.alert({
@@ -235,6 +240,7 @@ async function onSubmit(): Promise<void> {
 		mcaptcha.value?.reset?.();
 		recaptcha.value?.reset?.();
 		turnstile.value?.reset?.();
+		fc.value?.reset?.();
 	}
 }
 </script>

packages/frontend/src/index.html

@@ -17,12 +17,12 @@
 	<meta
 		http-equiv="Content-Security-Policy-Report-Only"
 		content="default-src 'self' https://newassets.hcaptcha.com/ https://challenges.cloudflare.com/ http://localhost:7493/ https://fonts.gstatic.com/ https://www.google-analytics.com/ https://www.googletagmanager.com/;
-			worker-src 'self';
+			worker-src 'self'  blob:;
-			script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com https://www.googletagmanager.com https://esm.sh;
+			script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com https://www.googletagmanager.com https://esm.sh https://cdn.jsdelivr.net;
 			style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com https://www.googletagmanager.com;
 			img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://fonts.gstatic.com https://www.googletagmanager.com;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
-			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://api.pwnedpasswords.com https://www.google-analytics.com https://analytics.google.com;
+			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://api.pwnedpasswords.com https://www.google-analytics.com https://analytics.google.com https://api.friendlycaptcha.com;
 			frame-src *;"
 	/>
 	<meta property="og:site_name" content="[DEV BUILD] Misskey" />

packages/frontend/src/pages/admin/bot-protection.vue

@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="mcaptcha">mCaptcha</option>
 				<option value="recaptcha">reCAPTCHA</option>
 				<option value="turnstile">Turnstile</option>
+				<option value="fc">FriendlyCaptcha</option>
 			</MkRadios>
 
 			<template v-if="provider === 'hcaptcha'">
@@ -75,6 +76,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkCaptcha provider="turnstile" :sitekey="turnstileSiteKey || '1x00000000000000000000AA'"/>
 				</FormSlot>
 			</template>
+			<template v-else-if="provider === 'fc'">
+				<MkInput v-model="fcSiteKey">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
+				</MkInput>
+				<MkInput v-model="fcSecretKey">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
+				</MkInput>
+				<FormSlot>
+					<template #label>{{ i18n.ts.preview }}</template>
+					<MkCaptcha provider="fc" :sitekey="fcSiteKey"/>
+				</FormSlot>
+			</template>
 
 			<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 		</div>
@@ -107,6 +122,8 @@ const recaptchaSiteKey = ref<string | null>(null);
 const recaptchaSecretKey = ref<string | null>(null);
 const turnstileSiteKey = ref<string | null>(null);
 const turnstileSecretKey = ref<string | null>(null);
+const fcSiteKey = ref<string | null>(null);
+const fcSecretKey = ref<string | null>(null);
 
 async function init() {
 	const meta = await misskeyApi('admin/meta');
@@ -119,11 +136,15 @@ async function init() {
 	recaptchaSecretKey.value = meta.recaptchaSecretKey;
 	turnstileSiteKey.value = meta.turnstileSiteKey;
 	turnstileSecretKey.value = meta.turnstileSecretKey;
+	fcSiteKey.value = meta.fcSiteKey;
+	fcSecretKey.value = meta.fcSecretKey;
 
 	provider.value = meta.enableHcaptcha ? 'hcaptcha' :
 		meta.enableRecaptcha ? 'recaptcha' :
 		meta.enableTurnstile ? 'turnstile' :
-		meta.enableMcaptcha ? 'mcaptcha' : null;
+		meta.enableMcaptcha ? 'mcaptcha' :
+		meta.enableFC ? 'fc' :
+		null;
 }
 
 function save() {
@@ -141,6 +162,9 @@ function save() {
 		enableTurnstile: provider.value === 'turnstile',
 		turnstileSiteKey: turnstileSiteKey.value,
 		turnstileSecretKey: turnstileSecretKey.value,
+		enableFC: provider.value === 'fc',
+		fcSiteKey: fcSiteKey.value,
+		fcSecretKey: fcSecretKey.value,
 	}).then(() => {
 		fetchInstance(true);
 	});

packages/frontend/src/pages/admin/index.vue

@@ -59,7 +59,7 @@ const view = ref(null);
 const el = ref<HTMLDivElement | null>(null);
 const pageProps = ref({});
 let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile;
+let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile && !instance.enableFC;
 let noEmailServer = !instance.enableEmail;
 const thereIsUnresolvedAbuseReport = ref(false);
 const pendingUserApprovals = ref(false);

packages/frontend/src/pages/admin/security.vue

@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template v-else-if="enableMcaptcha" #suffix>mCaptcha</template>
 					<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
 					<template v-else-if="enableTurnstile" #suffix>Turnstile</template>
+					<template v-else-if="enableFriendlycaptcha" #suffix>FriendlyCaptcha</template>
 					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
 
 					<XBotProtection/>
@@ -251,6 +252,7 @@ const enableHcaptcha = ref<boolean>(false);
 const enableMcaptcha = ref<boolean>(false);
 const enableRecaptcha = ref<boolean>(false);
 const enableTurnstile = ref<boolean>(false);
+const enableFriendlycaptcha = ref<boolean>(false);
 const sensitiveMediaDetection = ref<string>('none');
 const sensitiveMediaDetectionSensitivity = ref<number>(0);
 const setSensitiveFlagAutomatically = ref<boolean>(false);
@@ -278,6 +280,7 @@ async function init() {
 	enableMcaptcha.value = meta.enableMcaptcha;
 	enableRecaptcha.value = meta.enableRecaptcha;
 	enableTurnstile.value = meta.enableTurnstile;
+	enableFriendlycaptcha.value = meta.enableFriendlycaptcha
 	sensitiveMediaDetection.value = meta.sensitiveMediaDetection;
 	sensitiveMediaDetectionSensitivity.value =
 		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :