feat: support display HTML format in API error responses

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",

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);
         }

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);

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();
+    },
+  };
+}