ghtml 2.0.2 → 2.0.4

package/.eslintrc.json

@@ -3,6 +3,7 @@
   "extends": ["plugin:grules/all"],
   "rules": {
     "no-await-in-loop": "off",
+    "prefer-template": "off",
     "require-unicode-regexp": "off"
   }
 }

package/README.md

@@ -8,7 +8,7 @@ Inspired by [html-template-tag](https://github.com/AntonioVdlC/html-template-tag
 npm i ghtml
 ```
 
-## API Reference
+## API
 
 ### `html`
 
@@ -26,13 +26,13 @@ Keep in mind that, in Node.js, all else being equal, streaming a response using
 
 This version of HTML generator should be preferred for asynchronous and streaming use cases. The output is generated as the promise expressions resolve or stream expressions send data.
 
-**Minor Note:**
+**Note:**
 
 Because they return generators instead of strings, a key difference of `htmlGenerator` and `htmlAsyncGenerator` is their ability to recognize and properly handle iterable elements within array expressions. This is to detect nested `htmlGenerator` and `htmlAsyncGenerator` usage, enabling scenarios such as ``${[1, 2, 3].map(i => htmlGenerator`<li>${i}</li>`)}``.
 
 ### `includeFile`
 
-Available in Node.js, the `includeFile` function is a wrapper around `readFileSync`. It reads and outputs the content of a file while also caching it in memory for faster future reuse.
+Available in Node.js, the `includeFile` function is a wrapper around `readFileSync`. It reads and returns the content of a file while also caching it in memory for faster future reuse.
 
 ## Usage
 
@@ -171,4 +171,4 @@ console.log(logo);
 
 ## Security
 
-Like [similar](https://handlebarsjs.com/guide/#html-escaping) [tools](https://github.com/mde/ejs/blob/main/SECURITY.md#out-of-scope-vulnerabilities), `ghtml` does not prevent all kinds of XSS attacks. It is the responsibility of consumers to sanitize user inputs. Some inherently insecure uses include dynamically generating JavaScript, failing to quote HTML attribute values (especially when they contain expressions), and using unsanitized user-provided URLs.
+Like [similar](https://github.com/mde/ejs/blob/main/SECURITY.md#out-of-scope-vulnerabilities) [tools](https://handlebarsjs.com/guide/#html-escaping), ghtml does not prevent all kinds of XSS attacks. It is the responsibility of developers to sanitize user inputs. Some inherently insecure uses include dynamically generating JavaScript, failing to quote HTML attribute values (especially when they contain expressions), and relying on unsanitized user-provided URLs.

package/SECURITY.md

@@ -0,0 +1,12 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| ^1      | :x:                |
+| ^2      | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+Please report all vulnerabilities to [https://github.com/gurgunday/ghtml/security](https://github.com/gurgunday/ghtml/security).

package/package.json

@@ -3,7 +3,7 @@
   "description": "Replace your template engine with fast JavaScript by leveraging the power of tagged templates.",
   "author": "Gürgün Dayıoğlu",
   "license": "MIT",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/html.js

@@ -1,20 +1,8 @@
 const arrayIsArray = Array.isArray;
-
 const symbolIterator = Symbol.iterator;
-
 const symbolAsyncIterator = Symbol.asyncIterator;
 
-const escapeDictionary = {
-  '"': """,
-  "&": "&",
-  "'": "'",
-  "<": "&#60;",
-  ">": "&#62;",
-  "`": "&#96;",
-};
-
-const escapeRegExp = new RegExp(`[${Object.keys(escapeDictionary).join("")}]`);
-
+const escapeRegExp = /["&'<>`]/;
 const escapeFunction = (string) => {
   const stringLength = string.length;
   let start = 0;
@@ -22,15 +10,37 @@ const escapeFunction = (string) => {
   let escaped = "";
 
   do {
-    const escapedCharacter = escapeDictionary[string[end++]];
-
-    if (escapedCharacter) {
-      escaped += string.slice(start, end - 1) + escapedCharacter;
-      start = end;
+    switch (string.charCodeAt(end++)) {
+      case 34: // "
+        escaped += string.slice(start, end - 1) + "&#34;";
+        start = end;
+        continue;
+      case 38: // &
+        escaped += string.slice(start, end - 1) + "&#38;";
+        start = end;
+        continue;
+      case 39: // '
+        escaped += string.slice(start, end - 1) + "&#39;";
+        start = end;
+        continue;
+      case 60: // <
+        escaped += string.slice(start, end - 1) + "&#60;";
+        start = end;
+        continue;
+      case 62: // >
+        escaped += string.slice(start, end - 1) + "&#62;";
+        start = end;
+        continue;
+      case 96: // `
+        escaped += string.slice(start, end - 1) + "&#96;";
+        start = end;
+        continue;
     }
   } while (end !== stringLength);
 
-  return escaped + string.slice(start, end);
+  escaped += string.slice(start, end);
+
+  return escaped;
 };
 
 /**
@@ -49,7 +59,7 @@ const html = ({ raw: literals }, ...expressions) => {
     let string =
       typeof expression === "string"
         ? expression
-        : expression === undefined || expression === null
+        : expression == null
           ? ""
           : arrayIsArray(expression)
             ? expression.join("")
@@ -64,7 +74,9 @@ const html = ({ raw: literals }, ...expressions) => {
     accumulator += literal + string;
   }
 
-  return accumulator + literals[index];
+  accumulator += literals[index];
+
+  return accumulator;
 };
 
 /**
@@ -83,7 +95,7 @@ const htmlGenerator = function* ({ raw: literals }, ...expressions) {
 
     if (typeof expression === "string") {
       string = expression;
-    } else if (expression === undefined || expression === null) {
+    } else if (expression == null) {
       string = "";
     } else {
       if (expression[symbolIterator]) {
@@ -102,7 +114,7 @@ const htmlGenerator = function* ({ raw: literals }, ...expressions) {
           if (typeof expression === "string") {
             string = expression;
           } else {
-            if (expression === undefined || expression === null) {
+            if (expression == null) {
               continue;
             }
 
@@ -111,7 +123,7 @@ const htmlGenerator = function* ({ raw: literals }, ...expressions) {
                 if (typeof expression === "string") {
                   string = expression;
                 } else {
-                  if (expression === undefined || expression === null) {
+                  if (expression == null) {
                     continue;
                   }
 
@@ -180,7 +192,7 @@ const htmlAsyncGenerator = async function* ({ raw: literals }, ...expressions) {
 
     if (typeof expression === "string") {
       string = expression;
-    } else if (expression === undefined || expression === null) {
+    } else if (expression == null) {
       string = "";
     } else {
       if (expression[symbolIterator] || expression[symbolAsyncIterator]) {
@@ -199,7 +211,7 @@ const htmlAsyncGenerator = async function* ({ raw: literals }, ...expressions) {
           if (typeof expression === "string") {
             string = expression;
           } else {
-            if (expression === undefined || expression === null) {
+            if (expression == null) {
               continue;
             }
 
@@ -208,7 +220,7 @@ const htmlAsyncGenerator = async function* ({ raw: literals }, ...expressions) {
                 if (typeof expression === "string") {
                   string = expression;
                 } else {
-                  if (expression === undefined || expression === null) {
+                  if (expression == null) {
                     continue;
                   }
 

package/test/index.js

@@ -63,6 +63,13 @@ test("renders unsafe content", () => {
   );
 });
 
+test("renders unsafe content /2", () => {
+  assert.strictEqual(
+    html`<p>${`${descriptionUnsafe}"&\``}</p>`,
+    `<p>&#60;script&#62;alert(&#39;This is an unsafe description.&#39;)&#60;/script&#62;&#34;&#38;&#96;</p>`,
+  );
+});
+
 test("renders arrays", () => {
   assert.strictEqual(
     html`<p>${[descriptionSafe, descriptionUnsafe]}</p>`,