@squiz/xaccel-xss-safe-content - npm Package Compare versions

Comparing version 1.13.0-alpha.4 to 1.13.0-alpha.5

index.js

 // src/XssSafeContent.tsx
 import React from "react";
 import xss, { getDefaultWhiteList } from "xss";
-function XssSafeContent({
-  content,
-  elementType = "div",
-  ...props
-}) {
+
+// src/CustomWhitelist.ts
+var specificTagChanges = {
+  circle: ["cx", "cy", "r", "stroke", "stroke-width", "fill"],
+  clipPath: [],
+  defs: [],
+  ellipse: ["cx", "cy", "rx", "ry", "style"],
+  g: ["clip-path", "fill"],
+  line: ["x1", "y1", "x2", "y2", "style"],
+  path: ["d", "fill", "stroke", "stroke-width"],
+  polygon: ["points", "style"],
+  polyline: ["points", "style"],
+  rect: ["width", "height", "fill"],
+  svg: ["width", "height", "viewBox", "fill"]
+};
+var addToAll = [
+  "class",
+  "id",
+  // WCAG ARIA related roles (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes)
+  // Allow on anything and leave it to the developer to use it on the correct tags.
+  "role",
+  "aria-activedescendant",
+  "aria-atomic",
+  "aria-autocomplete",
+  "aria-braillelabel",
+  "aria-brailleroledescription",
+  "aria-busy",
+  "aria-checked",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colindextext",
+  "aria-colspan",
+  "aria-controls",
+  "aria-current",
+  "aria-describedby",
+  "aria-description",
+  "aria-details",
+  "aria-disabled",
+  "aria-dropeffect",
+  "aria-errormessage",
+  "aria-expanded",
+  "aria-flowto",
+  "aria-grabbed",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-invalid",
+  "aria-keyshortcuts",
+  "aria-label",
+  "aria-labelledby",
+  "aria-level",
+  "aria-live",
+  "aria-modal",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-orientation",
+  "aria-owns",
+  "aria-placeholder",
+  "aria-posinset",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-relevant",
+  "aria-required",
+  "aria-roledescription",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowindextext",
+  "aria-rowspan",
+  "aria-selected",
+  "aria-setsize",
+  "aria-sort",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext"
+];
+
+// src/XssSafeContent.tsx
+function XssSafeContent({ content, elementType = "div", ...props }) {
   const customWhitelist = getDefaultWhiteList();
-  customWhitelist.svg = ["width", "height", "viewBox", "fill"];
-  customWhitelist.circle = ["cx", "cy", "r", "stroke", "stroke-width", "fill"];
-  customWhitelist.rect = ["width", "height", "fill"];
-  customWhitelist.ellipse = ["cx", "cy", "rx", "ry", "style"];
-  customWhitelist.line = ["x1", "y1", "x2", "y2", "style"];
-  customWhitelist.polygon = ["points", "style"];
-  customWhitelist.polyline = ["points", "style"];
-  customWhitelist.path = ["d", "fill", "stroke", "stroke-width"];
-  customWhitelist.defs = [];
-  customWhitelist.g = ["clip-path", "fill"];
-  customWhitelist.clipPath = [];
+  for (const [key, value] of Object.entries(specificTagChanges)) {
+    customWhitelist[key] = value;
+  }
   Object.keys(customWhitelist).forEach((tag) => {
     var _a;
-    return (_a = customWhitelist[tag]) == null ? void 0 : _a.push("class", "id", "aria-hidden");
+    return (_a = customWhitelist[tag]) == null ? void 0 : _a.push(...addToAll);
   });
@@ -25,0 +90,0 @@ return React.createElement(elementType, {

package.json

 {
     "name": "@squiz/xaccel-xss-safe-content",
-    "version": "1.13.0-alpha.4",
+    "version": "1.13.0-alpha.5",
     "description": "React component that wraps dangerously set inner html to allow for displaying HTML content without xss issues being introduced",
@@ -42,3 +42,3 @@ "author": "Jason Matthew <[e-mail]>",
     },
-    "gitHead": "cdba873810a61909b2304eda3ee0009e8b3d6c4b"
+    "gitHead": "702522a0616a07389302d6f54f76e6faf5b02f61"
 }

No alert changes

Improved metrics

Total package byte prevSize

12524

44.04%

Number of package files

8

14.29%

Lines of code

128

150.98%

No dependency changes