Merge pull request #1121 from kiwix/safe_tags_without_makeup

Untransformed (but HTML-safe) tags in the kiwix-serve frontend

static/skin/i18n/en.json

@@ -51,8 +51,8 @@
 	, "torrent-download-link-text": "BitTorrent"
 	, "torrent-download-alt-text": "Download via BitTorrent"
 	, "library-opds-feed-all-entries": "Library OPDS Feed - All entries"
-	, "filter-by-tag": "Filter by tag \"{{TAG}}\""
+	, "filter-by-tag": "Filter by tag \"{{{TAG}}}\""
-	, "stop-filtering-by-tag": "Stop filtering by tag \"{{TAG}}\""
+	, "stop-filtering-by-tag": "Stop filtering by tag \"{{{TAG}}}\""
 	, "library-opds-feed-parameterised": "Library OPDS Feed - entries matching {{#LANG}}\nLanguage: {{LANG}} {{/LANG}}{{#CATEGORY}}\nCategory: {{CATEGORY}} {{/CATEGORY}}{{#TAG}}\nTag: {{TAG}} {{/TAG}}{{#Q}}\nQuery: {{Q}} {{/Q}}"
 	, "welcome-to-kiwix-server": "Welcome to Kiwix Server"
 	, "download-links-heading": "Download links for <b><i>{{BOOK_TITLE}}</i></b>"

static/skin/index.css

@@ -121,7 +121,7 @@
 
 .tagFilterLabel {
     width: max-content;
-    padding: 10px;
+    padding: 7px;
     font-family: roboto;
     font-size: 12px;
     margin: 0 0 0 17px;

static/skin/index.js

@@ -105,6 +105,14 @@
         return '';
     }
 
+    // Borrowed from https://stackoverflow.com/a/1912522
+    function htmlDecode(input){
+      var e = document.createElement('textarea');
+      e.innerHTML = input;
+      // handle case of empty input
+      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+    }
+
     function htmlEncode(str) {
         return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
     }
@@ -121,9 +129,14 @@
 
     function generateTagLink(tagValue) {
         tagValue = tagValue.toLowerCase();
-        const humanFriendlyTagValue = humanFriendlyTitle(tagValue);
+        const tagMessage = $t("filter-by-tag", {TAG: tagValue});
-        const tagMessage = $t("filter-by-tag", {TAG: humanFriendlyTagValue});
+        const spanElement = document.createElement("span");
-        return `<span class='tag__link' aria-label='${tagMessage}' title='${tagMessage}' data-tag=${tagValue}>${humanFriendlyTagValue}</span>`
+        spanElement.className = 'tag__link';
+        spanElement.setAttribute('aria-label', tagMessage);
+        spanElement.setAttribute('title', tagMessage);
+        spanElement.setAttribute('data-tag', tagValue);
+        spanElement.innerHTML = htmlEncode(tagValue);
+        return spanElement.outerHTML;
     }
 
     function generateBookHtml(book, sort = false) {
@@ -144,7 +157,7 @@
             const mulLangList = langCodesList.filter(x => languages.hasOwnProperty(x)).map(x => languages[x]);
             language = mulLangList.join(', ');
         }
-        const tags = getInnerHtml(book, 'tags');
+        const tags = htmlDecode(getInnerHtml(book, 'tags'));
         const tagList = tags.split(';').filter(tag => {return !(tag.startsWith('_'))});
         const tagFilterLinks = tagList.map((tagValue) => generateTagLink(tagValue));
         const tagHtml = tagFilterLinks.join(' | ');
@@ -492,7 +505,7 @@
     function addTagElement(tagValue, resetFilter) {
         const tagElement = document.getElementsByClassName('tagFilterLabel')[0];
         tagElement.style.display = 'inline-block';
-        tagElement.innerHTML = `${tagValue}`;
+        tagElement.innerHTML = htmlEncode(tagValue);
         const tagMessage = $t("stop-filtering-by-tag", {TAG: tagValue});
         tagElement.setAttribute('aria-label', tagMessage);
         tagElement.setAttribute('title', tagMessage);

test/library_server.cpp

@@ -1033,7 +1033,7 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access)
   "    />\n" \
   "    <link\n" \
   "      type=\"text/css\"\n" \
-  "      href=\"/ROOT%23%3F/skin/index.css?cacheid=1e78e7cf\"\n" \
+  "      href=\"/ROOT%23%3F/skin/index.css?cacheid=e0600dde\"\n" \
   "      rel=\"Stylesheet\"\n" \
   "    />\n" \
   "    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3\">\n" \

test/server.cpp

@@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=1e78e7cf" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=e0600dde" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=f43eb0b9" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=480ca6b4" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@@ -279,7 +279,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
     {
       /* url */ "/ROOT%23%3F/",
 R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9"
-      href="/ROOT%23%3F/skin/index.css?cacheid=1e78e7cf"
+      href="/ROOT%23%3F/skin/index.css?cacheid=e0600dde"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -292,7 +292,7 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9"
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=ee7d95b5" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=f43eb0b9" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=480ca6b4" defer></script>
         <img src="/ROOT%23%3F/skin/feed.svg?cacheid=055b333f"
         <img src="/ROOT%23%3F/skin/langSelector.svg?cacheid=00b59961"
 )EXPECTEDRESULT"