From 00a6eb04c494182ef9e1bfae4a5483d9f14bab08 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Sun, 3 Mar 2024 12:36:16 +0000
Subject: [PATCH] laxer HTML sanitisation for admin-controlled text - fixes
 #447

I have intentionally *not* changed the sanitiser used in
`packages/backend/src/server/api/endpoints/users/report-abuse.ts`
because that one deals with HTML sent by random users, so we should
trust it less.

Also I have not touched
`packages/frontend/src/components/MkAutocomplete.vue` because that's
just cleaning up emoji names.
---
 .../src/components/MkSignupDialog.rules.vue    |  2 +-
 .../src/components/MkVisitorDashboard.vue      |  2 +-
 packages/frontend/src/pages/about.vue          |  2 +-
 packages/frontend/src/scripts/sanitize-html.ts | 18 ++++++++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/scripts/sanitize-html.ts

diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue
index 18a9eeda2..c2435b308 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.vue
+++ b/packages/frontend/src/components/MkSignupDialog.rules.vue
@@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from '@/scripts/sanitize-html.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index d8e6ba9a0..f9f16c594 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from '@/scripts/sanitize-html.js';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index f2aceada7..23960d39d 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -130,7 +130,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from '@/scripts/sanitize-html.js';
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XEmojis from './about.emojis.vue';
diff --git a/packages/frontend/src/scripts/sanitize-html.ts b/packages/frontend/src/scripts/sanitize-html.ts
new file mode 100644
index 000000000..14c82967b
--- /dev/null
+++ b/packages/frontend/src/scripts/sanitize-html.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: dakkar and other Sharkey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+*/
+
+import original from 'sanitize-html';
+
+export default function sanitizeHtml(str: string | null): string | null {
+	if (str == null) return str;
+	return original(str, {
+		allowedTags: original.defaults.allowedTags.concat(['img', 'audio', 'video', 'center']),
+		allowedAttributes: {
+			...original.defaults.allowedAttributes,
+			a: original.defaults.allowedAttributes.a.concat(['style']),
+			img: original.defaults.allowedAttributes.img.concat(['style']),
+		},
+	});
+}