in directory listings, properly encode unsafe URL characters in links

fixes:
* upstream issue 566
    vercel/serve#566

lib/serve-handler/src/directory.js

@@ -192,22 +192,35 @@ const staticTemplateStrings = {
 const doNotSkipEncoded = false
 const matchHTML        = doNotSkipEncoded ? /[&<>"'\/]/g : /&(?!#?\w+;)|[<>"'\/]/g
 const encodeHTMLRules  = {
-//"/": "&#47;",
   "&": "&#38;",
   "<": "&#60;",
   ">": "&#62;",
   '"': "&#34;",
-  "'": "&#39;"
+  "'": "&#39;",
+  "/": "&#47;"
 }
 
-const encodeHTML = code => {
-  return (!code || (typeof code !== 'string'))
+const matchURL        = /[ <>%#\?]/g
+const encodeURLRules  = {
+  " ": "%20",
+  "<": "%3C",
+  ">": "%3E",
+  '%': "%25",
+  "#": "%23",
+  "?": "%3F"
+}
+
+const encodeString = (text, charset_regex, charset_map) => {
+  return (!text || (typeof text !== 'string'))
     ? ''
-    : code.toString().replace(matchHTML, function(m) {
-        return encodeHTMLRules[m] || m
+    : text.toString().replace(charset_regex, function(char_value) {
+        return charset_map[char_value] || char_value
       })
 }
 
+const encodeHTML = text => encodeString(text, matchHTML, encodeHTMLRules)
+const encodeURL  = text => encodeString(text, matchURL,  encodeURLRules)
+
 const directoryTemplate = spec => {
   const {paths, files} = spec
   const title          = encodeHTML(spec.directory)
@@ -220,7 +233,7 @@ const directoryTemplate = spec => {
 
   if (Array.isArray(paths) && paths.length) {
     for (let path of paths) {
-      html += `<a href="/${encodeHTML(path.url)}">${encodeHTML(path.name)}</a>`
+      html += `<a href="/${encodeURL(path.url)}">${encodeHTML(path.name)}</a>`
     }
   }
 
@@ -230,10 +243,10 @@ const directoryTemplate = spec => {
   if (Array.isArray(files) && files.length) {
     for (let file of files) {
       html += '<li>'
-      html +=   `<a href="${encodeHTML(file.relative)}" title="${encodeHTML(file.title)}" class="${encodeHTML(file.type)} ${encodeHTML(file.ext)}">${encodeHTML(file.base)}</a>`
+      html +=   `<a href="${encodeURL(file.relative)}" title="${encodeHTML(file.title)}" class="${encodeHTML(file.type)} ${encodeHTML(file.ext)}">${encodeHTML(file.base)}</a>`
 
       if ((file.stats instanceof Object) && file.stats.mtime)
-        html += `<div class="file-stats">${file.stats.size ? `${file.stats.size} | ` : ''}${file.stats.mtime}</div>`
+        html += `<div class="file-stats">${file.stats.size ? `${encodeHTML(file.stats.size)} | ` : ''}${encodeHTML(file.stats.mtime)}</div>`
 
       html += '</li>'
     }