@blocklet/xss 0.2.6 → 0.2.8

package/cjs/index.d.ts

@@ -8,6 +8,6 @@ declare const _default: {
         name?: string;
         type?: string;
     }) => boolean;
-    sanitizeSvg: (svgContent: string) => string;
+    sanitizeSvg: (svgContent: string, options?: SanitizeOptions, svgOptions?: import("xss").IFilterXSSOptions) => string;
 };
 export default _default;

package/cjs/types.d.ts

@@ -1,4 +1,5 @@
 import * as xss from 'xss';
 export interface SanitizeOptions extends xss.IFilterXSSOptions {
     allowedKeys?: string[];
+    preserveCase?: boolean;
 }

package/cjs/utils.d.ts

@@ -1,6 +1,27 @@
+import * as xss from 'xss';
 import { SanitizeOptions } from './types';
 export declare const initSanitize: (_options?: SanitizeOptions) => any;
-export declare const sanitizeSvg: (svgContent: string) => string;
+export declare const svgWhiteList: {
+    svg: string[];
+    circle: string[];
+    ellipse: string[];
+    line: string[];
+    path: string[];
+    polygon: string[];
+    polyline: string[];
+    rect: string[];
+    g: string[];
+    text: string[];
+    defs: never[];
+    clipPath: string[];
+    mask: string[];
+    use: string[];
+    linearGradient: string[];
+    radialGradient: string[];
+    stop: string[];
+    pattern: string[];
+};
+export declare const sanitizeSvg: (svgContent: string, options?: SanitizeOptions, svgOptions?: xss.IFilterXSSOptions) => string;
 export declare const isSvgFile: (svgContent: string, file?: {
     name?: string;
     type?: string;

package/cjs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeSvg = exports.isSvgFile = exports.initSanitize = void 0;
+exports.svgWhiteList = exports.sanitizeSvg = exports.isSvgFile = exports.initSanitize = void 0;
 var xss = _interopRequireWildcard(require("xss"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _path = _interopRequireDefault(require("path"));
@@ -66,7 +66,38 @@ const initSanitize = (_options = {}) => {
   return sanitize;
 };
 exports.initSanitize = initSanitize;
-const svgWhiteList = {
+function preserveTagCase(content) {
+  const tagCaseMapping = {};
+  Object.keys(svgWhiteList).forEach(originalTag => {
+    const lowerCaseTag = originalTag.toLowerCase();
+    if (lowerCaseTag !== originalTag) {
+      tagCaseMapping[lowerCaseTag] = originalTag;
+    }
+  });
+  let result = content;
+  Object.entries(tagCaseMapping).forEach(([lowercase, original]) => {
+    result = result.replace(new RegExp(`<${lowercase}([^>]*)>`, "gi"), (_match, rest) => `<${original}${rest}>`);
+    result = result.replace(new RegExp(`</${lowercase}>`, "gi"), `</${original}>`);
+  });
+  return result;
+}
+function preserveAttrCase(tag, name, value, isWhiteAttr) {
+  if (isWhiteAttr) {
+    const originalTagKey = Object.keys(svgWhiteList).find(key => key.toLowerCase() === tag.toLowerCase());
+    if (originalTagKey) {
+      const originalAttrName = svgWhiteList[originalTagKey].find(attr => attr.toLowerCase() === name.toLowerCase());
+      if (originalAttrName) {
+        value = xss.safeAttrValue(tag, name, value);
+        if (value) {
+          return originalAttrName + '="' + value + '"';
+        } else {
+          return originalAttrName;
+        }
+      }
+    }
+  }
+}
+const svgWhiteList = exports.svgWhiteList = {
   svg: ["width", "height", "viewBox", "xmlns", "version", "preserveAspectRatio", "xml:space"],
   circle: ["cx", "cy", "r", "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity"],
   ellipse: ["cx", "cy", "rx", "ry", "fill", "stroke", "stroke-width"],
@@ -114,13 +145,21 @@ const svgSanitizeOptions = {
     }
   }
 };
-const sanitizeSvg = svgContent => {
+const sanitizeSvg = (svgContent, options, svgOptions) => {
   const isSvg = isSvgFile(svgContent);
   if (!isSvg) {
     throw new Error("Invalid SVG content");
   }
-  const xssInstance = new xss.FilterXSS(svgSanitizeOptions);
-  return xssInstance.process(svgContent);
+  const filterOptions = {
+    ...svgSanitizeOptions,
+    ...(svgOptions || {})
+  };
+  if (options?.preserveCase) {
+    filterOptions.onTagAttr = preserveAttrCase;
+  }
+  const xssInstance = new xss.FilterXSS(filterOptions);
+  const processedContent = xssInstance.process(svgContent);
+  return options?.preserveCase ? preserveTagCase(processedContent) : processedContent;
 };
 exports.sanitizeSvg = sanitizeSvg;
 const isSvgFile = (svgContent, file) => {

package/es/index.d.ts

@@ -8,6 +8,6 @@ declare const _default: {
         name?: string;
         type?: string;
     }) => boolean;
-    sanitizeSvg: (svgContent: string) => string;
+    sanitizeSvg: (svgContent: string, options?: SanitizeOptions, svgOptions?: import("xss").IFilterXSSOptions) => string;
 };
 export default _default;

package/es/types.d.ts

@@ -1,4 +1,5 @@
 import * as xss from 'xss';
 export interface SanitizeOptions extends xss.IFilterXSSOptions {
     allowedKeys?: string[];
+    preserveCase?: boolean;
 }

package/es/utils.d.ts

@@ -1,6 +1,27 @@
+import * as xss from 'xss';
 import { SanitizeOptions } from './types';
 export declare const initSanitize: (_options?: SanitizeOptions) => any;
-export declare const sanitizeSvg: (svgContent: string) => string;
+export declare const svgWhiteList: {
+    svg: string[];
+    circle: string[];
+    ellipse: string[];
+    line: string[];
+    path: string[];
+    polygon: string[];
+    polyline: string[];
+    rect: string[];
+    g: string[];
+    text: string[];
+    defs: never[];
+    clipPath: string[];
+    mask: string[];
+    use: string[];
+    linearGradient: string[];
+    radialGradient: string[];
+    stop: string[];
+    pattern: string[];
+};
+export declare const sanitizeSvg: (svgContent: string, options?: SanitizeOptions, svgOptions?: xss.IFilterXSSOptions) => string;
 export declare const isSvgFile: (svgContent: string, file?: {
     name?: string;
     type?: string;

package/es/utils.js

@@ -80,7 +80,40 @@ export const initSanitize = (_options = {}) => {
   };
   return sanitize;
 };
-const svgWhiteList = {
+function preserveTagCase(content) {
+  const tagCaseMapping = {};
+  Object.keys(svgWhiteList).forEach((originalTag) => {
+    const lowerCaseTag = originalTag.toLowerCase();
+    if (lowerCaseTag !== originalTag) {
+      tagCaseMapping[lowerCaseTag] = originalTag;
+    }
+  });
+  let result = content;
+  Object.entries(tagCaseMapping).forEach(([lowercase, original]) => {
+    result = result.replace(new RegExp(`<${lowercase}([^>]*)>`, "gi"), (_match, rest) => `<${original}${rest}>`);
+    result = result.replace(new RegExp(`</${lowercase}>`, "gi"), `</${original}>`);
+  });
+  return result;
+}
+function preserveAttrCase(tag, name, value, isWhiteAttr) {
+  if (isWhiteAttr) {
+    const originalTagKey = Object.keys(svgWhiteList).find((key) => key.toLowerCase() === tag.toLowerCase());
+    if (originalTagKey) {
+      const originalAttrName = svgWhiteList[originalTagKey].find(
+        (attr) => attr.toLowerCase() === name.toLowerCase()
+      );
+      if (originalAttrName) {
+        value = xss.safeAttrValue(tag, name, value);
+        if (value) {
+          return originalAttrName + '="' + value + '"';
+        } else {
+          return originalAttrName;
+        }
+      }
+    }
+  }
+}
+export const svgWhiteList = {
   svg: ["width", "height", "viewBox", "xmlns", "version", "preserveAspectRatio", "xml:space"],
   circle: ["cx", "cy", "r", "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity"],
   ellipse: ["cx", "cy", "rx", "ry", "fill", "stroke", "stroke-width"],
@@ -128,13 +161,18 @@ const svgSanitizeOptions = {
     }
   }
 };
-export const sanitizeSvg = (svgContent) => {
+export const sanitizeSvg = (svgContent, options, svgOptions) => {
   const isSvg = isSvgFile(svgContent);
   if (!isSvg) {
     throw new Error("Invalid SVG content");
   }
-  const xssInstance = new xss.FilterXSS(svgSanitizeOptions);
-  return xssInstance.process(svgContent);
+  const filterOptions = { ...svgSanitizeOptions, ...svgOptions || {} };
+  if (options?.preserveCase) {
+    filterOptions.onTagAttr = preserveAttrCase;
+  }
+  const xssInstance = new xss.FilterXSS(filterOptions);
+  const processedContent = xssInstance.process(svgContent);
+  return options?.preserveCase ? preserveTagCase(processedContent) : processedContent;
 };
 export const isSvgFile = (svgContent, file) => {
   if (typeof svgContent !== "string") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/xss",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "blocklet prevent xss attack",
   "publishConfig": {
     "access": "public"