added html encoding

This commit is contained in:
Manan Jethwani 2021-05-07 20:59:22 +05:30
parent 1dbed28499
commit 5dce6d0e40
1 changed files with 8 additions and 5 deletions

View File

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