Allow use tag in SVG again (#3524)

vivid-planet · Feb 27, 2025 · 83b8111 · 83b8111
1 parent 7d8c36e
commit 83b8111
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/.changeset/good-terms-hide.md b/.changeset/good-terms-hide.md
@@ -0,0 +1,9 @@
+---
+"@comet/cms-api": patch
+---
+
+Allow `use` tag in SVG again
+
+`use` can be used to define paths once in a SVG and then integrating them multiple times via anchor links: `<use xlink:href="#path-id" />`. This should not be prohibited.
+
+It's still not possible to use `use` to reference external files, since we still prohibit `href` and `xlink:href` attributes starting with `http://`, `https://` and `javascript:`.
diff --git a/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx b/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx
@@ -431,11 +431,11 @@ export const useDamFileUpload = (options: UploadDamFileOptions): FileUploadApi =
                     uploadedFiles.push({ id: response.data.id, parentId: targetFolderId, type: "file", file });
                 } catch (err) {
                     errorOccurred = true;
-                    const typedErr = err as AxiosError<{ error: string; message: string; statusCode: number }>;
+                    const typedErr = err as AxiosError<{ error: string; message: string; statusCode: number } | string>;
 
-                    if (typedErr.response?.data.error === "CometImageResolutionException") {
+                    if (hasObjectErrorData(typedErr) && typedErr.response?.data.error === "CometImageResolutionException") {
                         addValidationError(file, <MaxResolutionError maxResolution={context.damConfig.maxSrcResolution} />);
-                    } else if (typedErr.response?.data.error === "CometValidationException") {
+                    } else if (hasObjectErrorData(typedErr) && typedErr.response?.data.error === "CometValidationException") {
                         const message = typedErr.response.data.message;
                         const extension = `.${file.name.split(".").pop()}`;
 
@@ -450,7 +450,7 @@ export const useDamFileUpload = (options: UploadDamFileOptions): FileUploadApi =
                         } else {
                             addValidationError(file, <UnknownError />);
                         }
-                    } else if (typedErr.response?.data.message.includes("SVG contains forbidden content")) {
+                    } else if (hasStringErrorData(typedErr) && typedErr.response?.data.includes("SVG contains forbidden content")) {
                         addValidationError(file, <SvgContainsJavaScriptError />);
                     } else if (typedErr.response === undefined && typedErr.request) {
                         addValidationError(file, <NetworkError />);
@@ -503,3 +503,13 @@ export const useDamFileUpload = (options: UploadDamFileOptions): FileUploadApi =
         newlyUploadedItems,
     };
 };
+
+const hasObjectErrorData = (
+    err: AxiosError<{ error: string; message: string; statusCode: number } | string>,
+): err is AxiosError<{ error: string; message: string; statusCode: number }> => {
+    return typeof err.response?.data === "object" && err.response?.data.error !== undefined;
+};
+
+const hasStringErrorData = (err: AxiosError<{ error: string; message: string; statusCode: number } | string>): err is AxiosError<string> => {
+    return typeof err.response?.data === "string";
+};
diff --git a/packages/api/cms-api/src/dam/files/files.utils.ts b/packages/api/cms-api/src/dam/files/files.utils.ts
@@ -52,7 +52,6 @@ type SvgNode =
 const disallowedSvgTags = [
     "script", // can lead to XSS
     "foreignObject", // can embed non-SVG content
-    "use", // can load external resources
     "image", // can load external resources
     "animate", // can modify attributes; resource exhaustion
     "animateMotion", // can modify attributes; resource exhaustion