@nerimity/html-embed 1.1.14 → 1.2.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiIA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM;;;;;;;;IAEtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiLA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM;;;;;;;;IAGtC"}

package/dist/index.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,10 +39,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.htmlToJson = htmlToJson;
 const htm_1 = __importDefault(require("htm"));
 const css_1 = __importDefault(require("css"));
+const htmlparser2 = __importStar(require("htmlparser2"));
 const { validate } = require("csstree-validator");
-const allowedTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'img', 'span', 'strong', 'a', "style", "p", "ul", "li", "ol", "table", "thead", "tbody", "tr", "td", "th", "blockquote", "pre", "br"];
+const allowedTags = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "div",
+    "img",
+    "span",
+    "strong",
+    "a",
+    "style",
+    "p",
+    "ul",
+    "li",
+    "ol",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "td",
+    "th",
+    "blockquote",
+    "pre",
+    "br",
+    "b",
+    "i",
+    "u",
+    "em",
+    "small",
+    "mark",
+    "sub",
+    "sup",
+    "code",
+    "hr",
+    "section",
+    "article",
+    "header",
+    "footer",
+    "nav",
+];
 const allowedAttributes = ["href", "src", "color", "style", "class"];
 const allowedCssProperties = [
+    "opacity",
     "background-clip",
     "-webkitBackgroundClip",
     "-webkitTextFillColor",
@@ -66,7 +142,9 @@ const allowedCssProperties = [
     "alignContent",
     "alignSelf",
     "whiteSpace",
+    "wordBreak",
     "fontFamily",
+    "fontStyle",
     "fontSize",
     "fontWeight",
     "zIndex",
@@ -91,7 +169,7 @@ function h(tag, props, ...children) {
     }
     // check if attributes are safe
     if (props) {
-        const unsafeAttribute = Object.keys(props).find(prop => !allowedAttributes.includes(prop));
+        const unsafeAttribute = Object.keys(props).find((prop) => !allowedAttributes.includes(prop));
         if (unsafeAttribute) {
             throw new Error(unsafeAttribute + " attribute is not allowed!");
         }
@@ -99,7 +177,7 @@ function h(tag, props, ...children) {
     // check if styles are safe
     if (props === null || props === void 0 ? void 0 : props.style) {
         const styles = props.style.split(";");
-        const unsafeCssProperty = styles.find(style => {
+        const unsafeCssProperty = styles.find((style) => {
             if (style === "")
                 return false;
             const keyVal = style.split(":");
@@ -115,7 +193,8 @@ function h(tag, props, ...children) {
         }
     }
     if (props === null || props === void 0 ? void 0 : props.href) {
-        if (!props.href.startsWith("http://") && !props.href.startsWith("https://")) {
+        if (!props.href.startsWith("http://") &&
+            !props.href.startsWith("https://")) {
             throw new Error("href must start with http:// or https://");
         }
     }
@@ -126,8 +205,28 @@ function h(tag, props, ...children) {
 }
 const _html = htm_1.default.bind(h);
 function htmlToJson(html) {
+    validateHtmlStructure(html);
     return _html([html]);
 }
+function validateHtmlStructure(html) {
+    let isMalformed = false;
+    const parser = new htmlparser2.Parser({
+        onerror(error) {
+            isMalformed = true;
+        },
+    }, { decodeEntities: true, lowerCaseTags: true });
+    parser.write(html);
+    parser.end();
+    if (isMalformed) {
+        throw new Error("Invalid HTML structure detected.");
+    }
+    const openTags = (html.match(/<[a-zA-Z0-9]+/g) || []).length;
+    const closeTags = (html.match(/<\/[a-zA-Z0-9]+/g) || []).length;
+    const expectedCloseTags = openTags - (html.match(/<(img|br|hr)/g) || []).length;
+    if (expectedCloseTags !== closeTags) {
+        throw new Error("Mismatched or unclosed HTML tags.");
+    }
+}
 function checkCSS(cssVal) {
     var _a;
     if (validate(cssVal).length) {
@@ -156,7 +255,7 @@ function checkCSS(cssVal) {
     }
 }
 function cssNameToJsName(name) {
-    var split = name.split("-").filter(n => n);
+    var split = name.split("-").filter((n) => n);
     var output = "";
     for (var i = 0; i < split.length; i++) {
         if (i > 0 && split[i].length > 0 && !(i == 1 && split[i] == "ms")) {

package/package.json

@@ -1,23 +1,24 @@
-{
-  "name": "@nerimity/html-embed",
-  "version": "1.1.14",
-  "description": "",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "tsc",
-    "example": "tsc & node example.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@types/css": "^0.0.37",
-    "@types/node": "^22.10.10",
-    "typescript": "^5.5.2"
-  },
-  "dependencies": {
-    "css": "^3.0.0",
-    "csstree-validator": "^4.0.1",
-    "htm": "^3.1.0"
-  }
-}
+{
+  "name": "@nerimity/html-embed",
+  "version": "1.2.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "example": "tsc & node example.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/css": "^0.0.37",
+    "@types/node": "^22.10.10",
+    "typescript": "^5.5.2"
+  },
+  "dependencies": {
+    "css": "^3.0.0",
+    "csstree-validator": "^4.0.1",
+    "htm": "^3.1.0",
+    "htmlparser2": "^10.0.0"
+  }
+}

package/src/index.ts

@@ -1,11 +1,53 @@
-import htm from 'htm';
-import css from 'css';
-const {validate} = require("csstree-validator")
+import htm from "htm";
+import css from "css";
+import * as htmlparser2 from "htmlparser2";
+const { validate } = require("csstree-validator");
 
-
-const allowedTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'img', 'span', 'strong', 'a', "style", "p", "ul", "li", "ol", "table", "thead", "tbody", "tr", "td", "th", "blockquote", "pre", "br"]
-const allowedAttributes = ["href", "src", "color", "style", "class"]
+const allowedTags = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "div",
+  "img",
+  "span",
+  "strong",
+  "a",
+  "style",
+  "p",
+  "ul",
+  "li",
+  "ol",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "td",
+  "th",
+  "blockquote",
+  "pre",
+  "br",
+  "b",
+  "i",
+  "u",
+  "em",
+  "small",
+  "mark",
+  "sub",
+  "sup",
+  "code",
+  "hr",
+  "section",
+  "article",
+  "header",
+  "footer",
+  "nav",
+];
+const allowedAttributes = ["href", "src", "color", "style", "class"];
 const allowedCssProperties = [
+  "opacity",
   "background-clip",
   "-webkitBackgroundClip",
   "-webkitTextFillColor",
@@ -62,7 +104,9 @@ const allowedCssProperties = [
   "alignContent",
   "alignSelf",
   "whiteSpace",
+  "wordBreak",
   "fontFamily",
+  "fontStyle",
   "fontSize",
   "fontWeight",
   "zIndex",
@@ -79,68 +123,100 @@ const allowedCssProperties = [
   "overflowY",
   "userSelect",
   "pointerEvents",
-]
-
+];
 
 function h(tag: string, props: any, ...children: any[]) {
   // check if tag is safe
   if (!allowedTags.includes(tag.toLowerCase())) {
-    throw new Error(tag+" tag is not allowed!")
+    throw new Error(tag + " tag is not allowed!");
   }
   // check if attributes are safe
   if (props) {
-    const unsafeAttribute = Object.keys(props).find(prop => !allowedAttributes.includes(prop));
+    const unsafeAttribute = Object.keys(props).find(
+      (prop) => !allowedAttributes.includes(prop)
+    );
     if (unsafeAttribute) {
-      throw new Error(unsafeAttribute+" attribute is not allowed!")
+      throw new Error(unsafeAttribute + " attribute is not allowed!");
     }
   }
   // check if styles are safe
   if (props?.style) {
     const styles: string[] = props.style.split(";");
-    const unsafeCssProperty = styles.find(style => {
+    const unsafeCssProperty = styles.find((style) => {
       if (style === "") return false;
-      const keyVal = style.split(":")
-      const key = keyVal[0].trim()
-      const value = keyVal[1].trim()
+      const keyVal = style.split(":");
+      const key = keyVal[0].trim();
+      const value = keyVal[1].trim();
       if (key === "position" && value === "fixed") {
-        throw new Error(value + " value is not allowed for "+ key + "!")
+        throw new Error(value + " value is not allowed for " + key + "!");
       }
-      return !allowedCssProperties.includes(cssNameToJsName(key))
-    })
+      return !allowedCssProperties.includes(cssNameToJsName(key));
+    });
     if (unsafeCssProperty) {
-      throw new Error(unsafeCssProperty.split(":")[0].trim() +" property is not allowed!")
+      throw new Error(
+        unsafeCssProperty.split(":")[0].trim() + " property is not allowed!"
+      );
     }
   }
   if (props?.href) {
-    if (!props.href.startsWith("http://") && !props.href.startsWith("https://")) {
-      throw new Error("href must start with http:// or https://")
+    if (
+      !props.href.startsWith("http://") &&
+      !props.href.startsWith("https://")
+    ) {
+      throw new Error("href must start with http:// or https://");
     }
   }
   if (tag.toLowerCase() === "style" && children[0]) {
     checkCSS(children[0]);
   }
-  
+
   return { tag, attributes: props, content: children };
 }
 
 const _html = htm.bind(h);
 
-
-
 export function htmlToJson(html: string) {
-  return _html([html] as any)
+  validateHtmlStructure(html);
+  return _html([html] as any);
 }
 
+function validateHtmlStructure(html: string) {
+  let isMalformed = false;
+  const parser = new htmlparser2.Parser(
+    {
+      onerror(error) {
+        isMalformed = true;
+      },
+    },
+    { decodeEntities: true, lowerCaseTags: true }
+  );
+
+  parser.write(html);
+  parser.end();
+
+  if (isMalformed) {
+    throw new Error("Invalid HTML structure detected.");
+  }
+
+  const openTags = (html.match(/<[a-zA-Z0-9]+/g) || []).length;
+  const closeTags = (html.match(/<\/[a-zA-Z0-9]+/g) || []).length;
 
+  const expectedCloseTags =
+    openTags - (html.match(/<(img|br|hr)/g) || []).length;
+
+  if (expectedCloseTags !== closeTags) {
+    throw new Error("Mismatched or unclosed HTML tags.");
+  }
+}
 
 function checkCSS(cssVal: string) {
   if (validate(cssVal).length) {
-    throw new Error("Invalid css!")
+    throw new Error("Invalid css!");
   }
-  const openCurlyBracketCount = cssVal.match(/{/gi)
-  const closeCurlyBracketCount = cssVal.match(/}/gi)
+  const openCurlyBracketCount = cssVal.match(/{/gi);
+  const closeCurlyBracketCount = cssVal.match(/}/gi);
   if (openCurlyBracketCount?.length !== closeCurlyBracketCount?.length) {
-    throw new Error("Extra curly or missing curly brackets found in css!")
+    throw new Error("Extra curly or missing curly brackets found in css!");
   }
   const rules = css.parse(cssVal).stylesheet?.rules;
   if (!rules) return;
@@ -148,21 +224,19 @@ function checkCSS(cssVal: string) {
     const rule = rules[i];
     const declarations = (rule as any).declarations;
     for (let x = 0; x < declarations.length; x++) {
-      const {property, value} = declarations[x];
+      const { property, value } = declarations[x];
       if (!allowedCssProperties.includes(cssNameToJsName(property))) {
-        throw new Error(property + " style is not allowed!")
+        throw new Error(property + " style is not allowed!");
       }
       if (property === "position" && value === "fixed") {
-        throw new Error(value + " value is not allowed for "+ property + "!")
+        throw new Error(value + " value is not allowed for " + property + "!");
       }
     }
-    
   }
 }
 
-
 function cssNameToJsName(name: string) {
-  var split = name.split("-").filter(n => n);
+  var split = name.split("-").filter((n) => n);
   var output = "";
   for (var i = 0; i < split.length; i++) {
     if (i > 0 && split[i].length > 0 && !(i == 1 && split[i] == "ms")) {
@@ -171,12 +245,11 @@ function cssNameToJsName(name: string) {
     output += split[i];
   }
   if (name.startsWith("-")) {
-    output = "-" + output
+    output = "-" + output;
   }
   return output;
 }
 
-function jsNameToCssName(name: string)
-{
-    return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
+function jsNameToCssName(name: string) {
+  return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+}