Fix #85: html escaping in code snippet

Author: oowekyala

pmdtester.gemspec

@@ -11,7 +11,7 @@ Gem::Specification.new do |s|
   s.metadata = { "bug_tracker_uri" => "https://github.com/pmd/pmd-regression-tester/issues", "homepage_uri" => "https://pmd.github.io", "source_code_uri" => "https://github.com/pmd/pmd-regression-tester" } if s.respond_to? :metadata=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andreas Dangel".freeze, "Binguo Bao".freeze, "Cl\u00E9ment Fournier".freeze]
-  s.date = "2021-01-15"
+  s.date = "2021-03-29"
   s.description = "A regression testing tool ensure that new problems and unexpected behaviors will not be introduced to PMD project after fixing an issue , and new rules can work as expected.".freeze
   s.email = ["[email protected]".freeze, "[email protected]".freeze, "[email protected]".freeze]
   s.executables = ["pmdtester".freeze]
@@ -21,7 +21,7 @@ Gem::Specification.new do |s|
   s.licenses = ["BSD-2-Clause".freeze]
   s.rdoc_options = ["--main".freeze, "README.rdoc".freeze]
   s.required_ruby_version = Gem::Requirement.new(">= 2.7".freeze)
-  s.rubygems_version = "3.1.4".freeze
+  s.rubygems_version = "3.1.2".freeze
   s.summary = "A regression testing tool ensure that new problems and unexpected behaviors will not be introduced to PMD project after fixing an issue , and new rules can work as expected.".freeze
 
   if s.respond_to? :specification_version then

resources/js/code-snippets.js

@@ -1,7 +1,7 @@
 /**
  * Simple module to fetch code snippets via ajax.
  * Only supports github hosted code repos.
- * 
+ *
  * Usage:
  * var el = document.createElement('p');
  * var url = 'https://github.com/checkstyle/checkstyle/tree/checkstyle-8.0/src/it/resources/com/google/checkstyle/test/chapter4formatting/rule4822variabledistance/InputVariableDeclarationUsageDistanceCheck.java'
@@ -11,53 +11,60 @@
  */
 (function() {
     const contextLines = 3;
+    const nbsp = "\u00a0";
 
+    // returns text, not html
     function formatLineNumber(number) {
-        var prefix = "";
+        let prefix;
         if (number < 10) {
-            prefix = "&nbsp;&nbsp;&nbsp;";
+            prefix =  nbsp.repeat(3);
         } else if (number < 100) {
-            prefix = "&nbsp;&nbsp;";
+            prefix =  nbsp.repeat(2);
         } else if (number < 1000) {
-            prefix = "&nbsp;";
+            prefix = nbsp;
         }
         return prefix + number;
     }
 
-    function fetchSnippet(el, url, line, weburl) {
+    function fetchSnippet(document, container, url, line, weburl) {
         var weburl, requestUrl, oReq;
 
         requestUrl = url.replace(/github.com/, "raw.githubusercontent.com");
         requestUrl = requestUrl.replace(/(tree|blob)\//, "");
 
         oReq = new XMLHttpRequest();
         oReq.addEventListener("load", function() {
-            var html, lines, start, deleteCount;
+            let lines, start, deleteCount;
+
+            // we'll append stuff in the loop below
+            container.innerHTML = '<p><a href="' + weburl + '" target="_blank" rel="noopener noreferrer">' + weburl + '</a></p>';
 
-            html = '<p><a href="' + weburl + '" target="_blank" rel="noopener noreferrer">' + weburl + '</a></p>';
             lines = this.responseText.split(/\r\n|\n/);
             start = line - contextLines;
             if (start > 0) {
-                lines.splice(0, start);
+                lines.splice(0, start); // remove lines before
             }
             deleteCount = lines.length - (2 * contextLines) + 1;
-            lines.splice(2 * contextLines - 1, deleteCount);
-            
-            lines.forEach(element => {
+            lines.splice(2 * contextLines - 1, deleteCount); // delete lines after
+
+            // now we have just the lines which will be displayed
+            lines.forEach(line => {
                 start++;
-                if (start == line) {
-                    html += "<code class=\"highlight\">";
-                } else {
-                    html += "<code>";
+                let lineElt = document.createElement("code");
+                if (start === line) {
+                    lineElt.classList.add("highlight");
                 }
-                html += formatLineNumber(start) + "&nbsp;" + element + "</code><br>";
+                // createTextNode escapes special chars
+                lineElt.appendChild(document.createTextNode(formatLineNumber(start) + nbsp + line));
+                lineElt.appendChild(document.createElement("br"));
+
+                container.appendChild(lineElt); // append to the container
             });
-            el.innerHTML = html;
         });
         oReq.open("GET", requestUrl);
         oReq.send();
 
-        el.innerHTML = "<tt>fetching...</tt>";
+        container.innerHTML = "<samp>fetching...</samp>";
     }
 
     window.pmd_code_snippets = {

resources/js/project-report.js

@@ -23,7 +23,7 @@ $(document).ready(function () {
     function renderCodeSnippet(violation) {
         var node = document.createElement('p');
         var url = project.source_link_base + '/' + project.file_index[violation.f];
-        window.pmd_code_snippets.fetch(node, url, violation.l, makeCodeLink(violation));
+        window.pmd_code_snippets.fetch(document, node, url, violation.l, makeCodeLink(violation));
         return node;
     }