From fc8c8fe9a41c18513b77780feb920be1d64e3d01 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 11 Dec 2024 17:30:08 +0800
Subject: [PATCH] feat: support display HTML format in API error responses

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 ui/package.json                         |  2 +
 ui/pnpm-lock.yaml                       | 54 +++++++++++-------
 ui/src/components/upload/UppyUpload.vue | 38 ++++++++++++-
 ui/src/setup/setupApiClient.ts          | 34 ++++++++++-
 ui/src/utils/modal.ts                   | 75 +++++++++++++++++++++++++
 5 files changed, 179 insertions(+), 24 deletions(-)
 create mode 100644 ui/src/utils/modal.ts

diff --git a/ui/package.json b/ui/package.json
index 65504ba0ab..cfe604369c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -86,6 +86,7 @@
     "fuse.js": "^6.6.2",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
+    "object-hash": "^3.0.0",
     "overlayscrollbars": "^2.5.0",
     "overlayscrollbars-vue": "^0.5.7",
     "path-browserify": "^1.0.1",
@@ -114,6 +115,7 @@
     "@types/jsdom": "^20.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.11.19",
+    "@types/object-hash": "^3.0.6",
     "@types/qs": "^6.9.7",
     "@types/randomstring": "^1.1.8",
     "@types/ua-parser-js": "^0.7.39",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 55791816e7..e720a608ff 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -158,6 +158,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      object-hash:
+        specifier: ^3.0.0
+        version: 3.0.0
       overlayscrollbars:
         specifier: ^2.5.0
         version: 2.5.0
@@ -237,6 +240,9 @@ importers:
       '@types/node':
         specifier: ^18.11.19
         version: 18.13.0
+      '@types/object-hash':
+        specifier: ^3.0.6
+        version: 3.0.6
       '@types/qs':
         specifier: ^6.9.7
         version: 6.9.7
@@ -3853,6 +3859,9 @@ packages:
   '@types/normalize-package-data@2.4.1':
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
 
+  '@types/object-hash@3.0.6':
+    resolution: {integrity: sha512-fOBV8C1FIu2ELinoILQ+ApxcUKz4ngq+IWUYrxSGjXzzjUALijilampwkMgEtJ+h2njAW3pi853QpzNVCHB73w==}
+
   '@types/pretty-hrtime@1.0.3':
     resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==}
 
@@ -5789,6 +5798,7 @@ packages:
   eslint@8.43.0:
     resolution: {integrity: sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   espree@9.5.2:
@@ -10190,7 +10200,7 @@ snapshots:
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-annotate-as-pure': 7.22.5
       regexpu-core: 5.3.2
       semver: 6.3.1
 
@@ -10294,7 +10304,7 @@ snapshots:
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
 
@@ -10464,7 +10474,7 @@ snapshots:
   '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.5)':
     dependencies:
@@ -10474,7 +10484,7 @@ snapshots:
   '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.5)':
     dependencies:
@@ -10484,7 +10494,7 @@ snapshots:
   '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10494,7 +10504,7 @@ snapshots:
   '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10504,7 +10514,7 @@ snapshots:
   '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-flow@7.23.3(@babel/core@7.24.5)':
     dependencies:
@@ -10539,7 +10549,7 @@ snapshots:
   '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10549,7 +10559,7 @@ snapshots:
   '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.24.5)':
     dependencies:
@@ -10569,7 +10579,7 @@ snapshots:
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10579,7 +10589,7 @@ snapshots:
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.5)':
     dependencies:
@@ -10589,7 +10599,7 @@ snapshots:
   '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10599,7 +10609,7 @@ snapshots:
   '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10609,7 +10619,7 @@ snapshots:
   '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.5)':
     dependencies:
@@ -10619,7 +10629,7 @@ snapshots:
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.5)':
     dependencies:
@@ -10629,7 +10639,7 @@ snapshots:
   '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.5)':
     dependencies:
@@ -10639,7 +10649,7 @@ snapshots:
   '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.24.5)':
     dependencies:
@@ -10661,7 +10671,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.24.5)':
     dependencies:
@@ -11011,7 +11021,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
 
   '@babel/plugin-transform-new-target@7.23.3(@babel/core@7.24.5)':
     dependencies:
@@ -11489,7 +11499,7 @@ snapshots:
   '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/types': 7.25.2
       esutils: 2.0.3
 
@@ -14098,6 +14108,8 @@ snapshots:
 
   '@types/normalize-package-data@2.4.1': {}
 
+  '@types/object-hash@3.0.6': {}
+
   '@types/pretty-hrtime@1.0.3': {}
 
   '@types/prop-types@15.7.11': {}
@@ -17530,7 +17542,7 @@ snapshots:
 
   jest-worker@26.6.2:
     dependencies:
-      '@types/node': 18.19.34
+      '@types/node': 20.14.2
       merge-stream: 2.0.0
       supports-color: 7.2.0
 
diff --git a/ui/src/components/upload/UppyUpload.vue b/ui/src/components/upload/UppyUpload.vue
index cf97738beb..b69341d506 100644
--- a/ui/src/components/upload/UppyUpload.vue
+++ b/ui/src/components/upload/UppyUpload.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { i18n } from "@/locales";
 import type { ProblemDetail } from "@/setup/setupApiClient";
+import { createHTMLContentModal } from "@/utils/modal";
 import { Toast } from "@halo-dev/components";
 import type { Restrictions } from "@uppy/core";
 import Uppy, { type SuccessResponse } from "@uppy/core";
@@ -13,7 +14,8 @@ import zh_CN from "@uppy/locales/lib/zh_CN";
 import zh_TW from "@uppy/locales/lib/zh_TW";
 import { Dashboard } from "@uppy/vue";
 import XHRUpload from "@uppy/xhr-upload";
-import { computed, onUnmounted } from "vue";
+import objectHash from "object-hash";
+import { computed, h, onUnmounted } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -91,6 +93,40 @@ const uppy = computed(() => {
           const responseBody = response as XMLHttpRequest;
           const { status, statusText } = responseBody;
           const defaultMessage = [status, statusText].join(": ");
+
+          // Catch error requests where the response is text/html,
+          // which usually comes from a reverse proxy or WAF
+          // fixme: Because there is no responseType in the response, we can only judge it in this way for now.
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(
+            responseBody.response,
+            "text/html"
+          );
+
+          if (
+            Array.from(doc.body.childNodes).some((node) => node.nodeType === 1)
+          ) {
+            createHTMLContentModal({
+              uniqueId: objectHash(responseBody.response || ""),
+              title: responseBody.status.toString(),
+              width: 700,
+              height: "calc(100vh - 20px)",
+              centered: true,
+              content: h("iframe", {
+                srcdoc: responseBody.response,
+                sandbox: "",
+                referrerpolicy: "no-referrer",
+                loading: "lazy",
+                style: {
+                  width: "100%",
+                  height: "100%",
+                },
+              }),
+            });
+
+            return new Error(defaultMessage);
+          }
+
           Toast.error(defaultMessage, { duration: 5000 });
           return new Error(defaultMessage);
         }
diff --git a/ui/src/setup/setupApiClient.ts b/ui/src/setup/setupApiClient.ts
index c14a5653e5..decf6a43e1 100644
--- a/ui/src/setup/setupApiClient.ts
+++ b/ui/src/setup/setupApiClient.ts
@@ -1,7 +1,10 @@
 import { i18n } from "@/locales";
+import { createHTMLContentModal } from "@/utils/modal";
 import { axiosInstance } from "@halo-dev/api-client";
 import { Dialog, Toast } from "@halo-dev/components";
 import type { AxiosError } from "axios";
+import objectHash from "object-hash";
+import { h } from "vue";
 
 export interface ProblemDetail {
   detail: string;
@@ -16,7 +19,7 @@ export function setupApiClient() {
     (response) => {
       return response;
     },
-    async (error: AxiosError<ProblemDetail>) => {
+    async (error: AxiosError) => {
       if (error.code === "ERR_CANCELED") {
         return Promise.reject(error);
       }
@@ -41,7 +44,7 @@ export function setupApiClient() {
       }
 
       const { status } = errorResponse;
-      const { title, detail } = errorResponse.data;
+      const { title, detail } = errorResponse.data as ProblemDetail;
 
       if (status === 401) {
         Dialog.warning({
@@ -64,6 +67,33 @@ export function setupApiClient() {
         return Promise.reject(error);
       }
 
+      // Catch error requests where the response is text/html,
+      // which usually comes from a reverse proxy or WAF
+
+      const contentType = error.response?.headers["content-type"];
+
+      if (contentType === "text/html") {
+        createHTMLContentModal({
+          uniqueId: objectHash(error.response?.data || ""),
+          title: error.response?.status.toString(),
+          width: 700,
+          height: "calc(100vh - 20px)",
+          centered: true,
+          content: h("iframe", {
+            srcdoc: error.response?.data?.toString(),
+            sandbox: "",
+            referrerpolicy: "no-referrer",
+            loading: "lazy",
+            style: {
+              width: "100%",
+              height: "100%",
+            },
+          }),
+        });
+
+        return Promise.reject(error);
+      }
+
       if (title || detail) {
         Toast.error(detail || title);
         return Promise.reject(error);
diff --git a/ui/src/utils/modal.ts b/ui/src/utils/modal.ts
new file mode 100644
index 0000000000..dd7a4d41a9
--- /dev/null
+++ b/ui/src/utils/modal.ts
@@ -0,0 +1,75 @@
+import { i18n } from "@/locales";
+import { VButton, VModal } from "@halo-dev/components";
+import { type Component, createApp, h } from "vue";
+
+interface ModalOptions {
+  uniqueId?: string;
+  title?: string;
+  width?: number;
+  height?: string;
+  centered?: boolean;
+  content: Component;
+}
+
+export function createHTMLContentModal(options: ModalOptions) {
+  if (options.uniqueId) {
+    const existingModal = document.getElementById(`modal-${options.uniqueId}`);
+    if (existingModal) {
+      return;
+    }
+  }
+
+  const container = document.createElement("div");
+  if (options.uniqueId) {
+    container.id = `modal-${options.uniqueId}`;
+  }
+
+  document.body.appendChild(container);
+
+  const app = createApp({
+    setup() {
+      const handleClose = () => {
+        app.unmount();
+        container.remove();
+      };
+
+      return () =>
+        h(
+          VModal,
+          {
+            title: options.title,
+            width: options.width || 500,
+            height: options.height,
+            centered: options.centered ?? true,
+            onClose: handleClose,
+            "onUpdate:visible": (value: boolean) => {
+              if (!value) handleClose();
+            },
+          },
+          {
+            default: () => options.content,
+            footer: () =>
+              h(
+                VButton,
+                {
+                  onClick: handleClose,
+                },
+                {
+                  default: () =>
+                    h("div", i18n.global.t("core.common.buttons.close")),
+                }
+              ),
+          }
+        );
+    },
+  });
+
+  app.mount(container);
+
+  return {
+    close: () => {
+      app.unmount();
+      container.remove();
+    },
+  };
+}