diff --git a/static/skin/index.js b/static/skin/index.js
index 38d39e5b2..e2e210ff0 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -1,3 +1,7 @@
+function htmlEncode(str) {
+    return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
+}
+
 window.onload = async (event) => {
     const root = $( `link[type='root']` ).attr("href");
     await fetch(`${root}/catalog/search`)
@@ -8,7 +12,6 @@ window.onload = async (event) => {
     });
 };
 
-
 function getInnerHtml(node, query) {
     return node.querySelector(query).innerHTML;
 }
@@ -17,14 +20,14 @@ function displayBooks(books) {
     let bookHtml = '';
     books.forEach((book) => {
         const link = book.querySelector('link').getAttribute('href');
-        const title = getInnerHtml(book, 'title');
+        const title =  getInnerHtml(book, 'title');
         const description = getInnerHtml(book, 'summary');
         
         bookHtml += `<a href='${link}'><div class='book'>
             <div class='book__background' style="background-image: url('${getInnerHtml(book, 'icon')}');">
-            <div class='book__title' title='${title}'>${title}</div>
-            <div class='book__description' title='${description}'>${description}</div>
-            <div class='book__info'>${getInnerHtml(book, 'articleCount')} articles, ${getInnerHtml(book, 'mediaCount')} medias</div>
+            <div class='book__title' title='${htmlEncode(title)}'>${htmlEncode(title)}</div>
+            <div class='book__description' title='${htmlEncode(description)}'>${htmlEncode(description)}</div>
+            <div class='book__info'>${htmlEncode(getInnerHtml(book, 'articleCount'))} articles, ${htmlEncode(getInnerHtml(book, 'mediaCount'))} medias</div>
             </div>
         </div></a>`;
     });