GDPR compliance issue with code blocks highlighting (third party resources expected)

[sindastra]

When trying to use code blocks with syntax highlighting it will try to load scripts from esm.sh, more specifically:

https://esm.sh/[email protected]/langs
https://esm.sh/[email protected]/themes

Due to GDPR, I cannot load third-party resources without consent, therefore, both due to compliance but also security reasons, I disabled the loading of third-party content through CSP (Content Security Policy), but this means that syntax highlighting cannot be used in a GDPR region.

My suggestion: Remove the esm.sh dependency and make Misskey host the relevant libraries itself. This would allow for GDPR compliant use of syntax highlighting.

Please note: This issue is NOT a duplicate of #14516: That issue is about a rendering bug/fallback, my issue is about removing esm.sh entirely due to compliance.

However, removing dependency on esm.sh would resolve both issues in one go.

[kakkokari-gtyih]

As written in Changelog:

misskey/CHANGELOG.md

Lines 1148 to 1149 in da3b3af

	- Fix: コードブロックのシンタックスハイライトで使用される定義ファイルをCDNから取得するように #13177
	- CDNから取得せずMisskey本体にバンドルする場合は`pacakges/frontend/vite.config.ts`を修正してください。

The current official method for addressing this issue is to edit the config and instruct vite bundler to bundle language definitions.

PS* At this time, Misskey has not been developed with GDPR compliance as a priority objective, and compliance is not guaranteed.

[sindastra]

The current official method for addressing this issue is to edit the config and instruct vite bundler to bundle language definitions.

I checked the file, but I don't know TypeScript (nor modern JavaScript) and got no clue what to do here. Can you please guide me? Thanks.

[kakkokari-gtyih]

Comment out or remove the shiki object and make externalPackages an empty array.

This might fail some CI as shiki language/theme definitions are too big, but there should be no problem other than that

misskey/packages/frontend/vite.config.ts

Lines 40 to 56 in da3b3af

	/**
	* Misskeyのフロントエンドにバンドルせず、CDNなどから別途読み込むリソースを記述する。
	* CDNを使わずにバンドルしたい場合、以下の配列から該当要素を削除orコメントアウトすればOK
	*/
	const externalPackages = [
	// shiki（コードブロックのシンタックスハイライトで使用中）はテーマ・言語の定義の容量が大きいため、それらはCDNから読み込む
	{
	name: 'shiki',
	match: /^shiki\/(?<subPkg>(langs|themes))$/,
	path(id: string, pattern: RegExp): string {
	const match = pattern.exec(id)?.groups;
	return match
	? `https://esm.sh/shiki@${packageInfo.dependencies.shiki}/${match['subPkg']}`
	: id;
	},
	},
	];

/**
 * Misskeyのフロントエンドにバンドルせず、CDNなどから別途読み込むリソースを記述する。
 * CDNを使わずにバンドルしたい場合、以下の配列から該当要素を削除orコメントアウトすればOK
 */
const externalPackages = [
	// shiki（コードブロックのシンタックスハイライトで使用中）はテーマ・言語の定義の容量が大きいため、それらはCDNから読み込む
	// {
	// 	name: 'shiki',
	// 	match: /^shiki\/(?<subPkg>(langs|themes))$/,
	// 	path(id: string, pattern: RegExp): string {
	// 		const match = pattern.exec(id)?.groups;
	// 		return match
	// 			? `https://esm.sh/shiki@${packageInfo.dependencies.shiki}/${match['subPkg']}`
	// 			: id;
	// 	},
	// },
];

[sindastra]

Ok, did that now, thanks, but how do I apply the changes?

[kakkokari-gtyih]

Just rebuild the whole thing with the altered settings

[sindastra]

I did run pnpm build and restarted the systemd service and that worked, thanks!