Fix escaping HTML

Author: kishikawakatsumi

Public/js/app.js

@@ -127,13 +127,7 @@ export class App {
       .then((response) => response.json())
       .then((response) => {
         this.response = response;
-        this.structureData = JSON.parse(
-          response.syntaxJSON
-            .replace(/&/g, "&")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/'/g, "&#039;")
-        );
+        this.structureData = JSON.parse(response.syntaxJSON);
 
         this.updateStructure();
         this.updateLookup();

Public/js/structure_view.js

@@ -98,18 +98,10 @@ function makeTokenPopoverContent(data) {
 
   makeSourceRangePopoverContent(data, dl);
 
-  makeDescriptionList("kind", stripHTMLTag(data.token.kind), dl);
-  makeDescriptionList(
-    "leadingTrivia",
-    stripHTMLTag(data.token.leadingTrivia),
-    dl
-  );
-  makeDescriptionList("text", stripHTMLTag(data.text), dl);
-  makeDescriptionList(
-    "trailingTrivia",
-    stripHTMLTag(data.token.trailingTrivia),
-    dl
-  );
+  makeDescriptionList("kind", data.token.kind, dl);
+  makeDescriptionList("leadingTrivia", data.token.leadingTrivia, dl);
+  makeDescriptionList("text", data.text, dl);
+  makeDescriptionList("trailingTrivia", data.token.trailingTrivia, dl);
 
   container.appendChild(dl);
 
@@ -129,11 +121,11 @@ function makePropertyPopoverContent(property, list) {
     if (property.ref) {
       return `<span class="badge ref">${property.ref}</span>`;
     } else if (value && value.text && value.kind) {
-      const text = stripHTMLTag(value.text);
-      const kind = stripHTMLTag(value.kind);
+      const text = value.text;
+      const kind = value.kind;
       return `${text}<span class="badge rounded-pill">${kind}</span>`;
     } else if (value && value.text) {
-      return stripHTMLTag(value.text);
+      return value.text;
     }
   })();
   makeDescriptionList(property.name, details, list);
@@ -179,19 +171,3 @@ function makeSyntaxTypeBadge(type) {
   }
   return badge;
 }
-
-function stripHTMLTag(text) {
-  const div = document.createElement("div");
-  div.innerHTML = text
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&#039;/g, "'")
-    .replace(/&amp;/g, "&");
-  return escapeHTML(div.textContent || div.innerText || "");
-}
-
-function escapeHTML(text) {
-  const div = document.createElement("div");
-  div.appendChild(document.createTextNode(text));
-  return div.innerHTML;
-}

Sources/App/Controllers/TokenVisitor.swift

@@ -129,7 +129,7 @@ final class TokenVisitor: SyntaxRewriter {
   }
 
   override func visit(_ token: TokenSyntax) -> TokenSyntax {
-    current.text = token.text
+    current.text = escapeHTML(token.text)
     current.token = Token(kind: "\(token.tokenKind)", leadingTrivia: "", trailingTrivia: "")
 
     token.leadingTrivia.forEach { (piece) in
@@ -174,7 +174,7 @@ final class TokenVisitor: SyntaxRewriter {
     let endColumn = end.column ?? 1
     let text = token.presence == .present ? token.text : ""
     list.append(
-      "<span class='token \(kind)' " +
+      "<span class='token \(escapeHTML(kind))' " +
       "data-title='\(escapeHTML("\(token.withoutTrivia())"))' " +
       "data-content='\(escapeHTML("\(token.tokenKind)"))' " +
       "data-type='Token' " +
@@ -217,21 +217,21 @@ final class TokenVisitor: SyntaxRewriter {
   private func replaceSymbols(text: String) -> String {
     text.replacingOccurrences(of: "&nbsp;", with: "␣").replacingOccurrences(of: "<br>", with: "↲")
   }
+}
 
-  private func escapeHTML(_ string: String) -> String {
-    var newString = string
-    let specialCharacters = [
-      ("&", "&amp;"),
-      ("<", "&lt;"),
-      (">", "&gt;"),
-      ("\"", "&quot;"),
-      ("'", "&apos;"),
-    ];
-    for (unescaped, escaped) in specialCharacters {
-      newString = newString.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
-    }
-    return newString
-      .replacingOccurrences(of: " ", with: "&nbsp;")
-      .replacingOccurrences(of: "\n", with: "<br>")
+func escapeHTML(_ string: String) -> String {
+  var newString = string
+  let specialCharacters = [
+    ("&", "&amp;"),
+    ("<", "&lt;"),
+    (">", "&gt;"),
+    ("\"", "&quot;"),
+    ("'", "&apos;"),
+  ];
+  for (unescaped, escaped) in specialCharacters {
+    newString = newString.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
   }
+  return newString
+    .replacingOccurrences(of: " ", with: "&nbsp;")
+    .replacingOccurrences(of: "\n", with: "<br>")
 }

Sources/App/Models/TreeNode.swift

@@ -12,7 +12,7 @@ final class TreeNode: Codable {
 
   init(id: Int, text: String, range: Range, type: SyntaxType) {
     self.id = id
-    self.text = text
+    self.text = escapeHTML(text)
     self.range = range
     self.type = type
   }
@@ -43,9 +43,13 @@ struct StructureProperty: Codable, Equatable {
   let ref: String?
 
   init(name: String, value: StructureValue? = nil, ref: String? = nil) {
-    self.name = name
+    self.name = escapeHTML(name)
     self.value = value
-    self.ref = ref
+    if let ref {
+      self.ref = escapeHTML(ref)
+    } else {
+      self.ref = nil
+    }
   }
 }
 
@@ -54,8 +58,12 @@ struct StructureValue: Codable, Equatable {
   let kind: String?
 
   init(text: String, kind: String? = nil) {
-    self.text = text
-    self.kind = kind
+    self.text = escapeHTML(text)
+    if let kind {
+      self.kind = escapeHTML(kind)
+    } else {
+      self.kind = nil
+    }
   }
 }
 
@@ -72,4 +80,10 @@ struct Token: Codable, Equatable {
   var kind: String
   var leadingTrivia: String
   var trailingTrivia: String
+
+  init(kind: String, leadingTrivia: String, trailingTrivia: String) {
+    self.kind = escapeHTML(kind)
+    self.leadingTrivia = leadingTrivia
+    self.trailingTrivia = trailingTrivia
+  }
 }

Tests/AppTests/Fixtures/test-1-1.json

@@ -342,7 +342,7 @@
       {
         "name": "identifier",
         "value": {
-          "kind": "identifier(\"number\")",
+          "kind": "identifier("number")",
           "text": "number␣"
         }
       },
@@ -368,7 +368,7 @@
     "structure": [],
     "text": "number",
     "token": {
-      "kind": "identifier(\"number\")",
+      "kind": "identifier("number")",
       "leadingTrivia": "",
       "trailingTrivia": "␣"
     },
@@ -457,7 +457,7 @@
       {
         "name": "digits",
         "value": {
-          "kind": "integerLiteral(\"0\")",
+          "kind": "integerLiteral("0")",
           "text": "0"
         }
       },
@@ -483,7 +483,7 @@
     "structure": [],
     "text": "0",
     "token": {
-      "kind": "integerLiteral(\"0\")",
+      "kind": "integerLiteral("0")",
       "leadingTrivia": "",
       "trailingTrivia": ""
     },