properly escape quotes when rendering article data to html attributes via template strings

2 files changed, 26 insertions, 12 deletions

diff --git a/js/Article.js b/js/Article.js
index 08b565695..35b282d5d 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -156,14 +156,14 @@ define(["dojo/_base/declare"], function (declare) {
 					comments_msg = hl.num_comments + " " + ngettext("comment", "comments", hl.num_comments)
 				}
 
-				comments = `<a href="${hl.comments}">(${comments_msg})</a>`;
+				comments = `<a href="${escapeHtml(hl.comments)}">(${comments_msg})</a>`;
 			}
 
 			return comments;
 		},
 		formatOriginallyFrom: function(hl) {
 			return hl.orig_feed ? `<span>
-					${__('Originally from:')} <a target="_blank" rel="noopener noreferrer" href="${hl.orig_feed[1]}">${hl.orig_feed[0]}</a>
+					${__('Originally from:')} <a target="_blank" rel="noopener noreferrer" href="${escapeHtml(hl.orig_feed[1])}">${hl.orig_feed[0]}</a>
 					</span>` : "";
 		},
 		unpack: function(row) {
@@ -197,7 +197,9 @@ define(["dojo/_base/declare"], function (declare) {
 					const article = `<div class="post post-${hl.id}">
 						<div class="header">
 							<div class="row">
-								<div class="title"><a target="_blank" rel="noopener noreferrer" title="${hl.title}" href="${hl.link}">${hl.title}</a></div>
+								<div class="title"><a target="_blank" rel="noopener noreferrer"
+									title="${escapeHtml(hl.title)}"
+									href="${escapeHtml(hl.link)}">${hl.title}</a></div>
 								<div class="date">${hl.updated_long}</div>
 							</div>
 							<div class="row">
diff --git a/js/Headlines.js b/js/Headlines.js
index d54ff4d4f..540c400d3 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -444,9 +444,15 @@ define(["dojo/_base/declare"], function (declare) {
 				const comments = Article.formatComments(hl);
 				const originally_from = Article.formatOriginallyFrom(hl);
 
-				row = `<div class="cdm ${row_class} ${Article.getScoreClass(hl.score)}" id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}" 
-							data-content="${escapeHtml(hl.content)}" data-score="${hl.score}"  data-article-title="${hl.title}"
-							onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
+				row = `<div class="cdm ${row_class} ${Article.getScoreClass(hl.score)}"
+							id="RROW-${hl.id}"
+							data-article-id="${hl.id}"
+							data-orig-feed-id="${hl.feed_id}"
+							data-content="${escapeHtml(hl.content)}"
+							data-score="${hl.score}"
+							data-article-title="${escapeHtml(hl.title)}"
+							onmouseover="Article.mouseIn(${hl.id})"
+							onmouseout="Article.mouseOut(${hl.id})">
 							
 							<div class="header">
 								<div class="left">
@@ -456,7 +462,7 @@ define(["dojo/_base/declare"], function (declare) {
 								</div>
 								
 								<span onclick="return Headlines.click(event, ${hl.id});" data-article-id="${hl.id}" class="titleWrap hlMenuAttach">
-									<a class="title" title="${hl.title}" target="_blank" rel="noopener noreferrer" href="${hl.link}">
+									<a class="title" title="${escapeHtml(hl.title)}" target="_blank" rel="noopener noreferrer" href="${escapeHtml(hl.link)}">
 										${hl.title}</a>
 									<span class="author">${hl.author}</span>
 									${hl.labels}
@@ -473,7 +479,7 @@ define(["dojo/_base/declare"], function (declare) {
 								<div class="right">                        
 									<i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
 								
-									<span style="cursor : pointer" title="${hl.feed_title}" onclick="Feeds.open({feed:${hl.feed_id}})">
+									<span style="cursor : pointer" title="${escapeHtml(hl.feed_title)}" onclick="Feeds.open({feed:${hl.feed_id}})">
 										${hl.feed_icon}</span>
 								</div>
 										
@@ -508,8 +514,14 @@ define(["dojo/_base/declare"], function (declare) {
 
 
 			} else {
-				row = `<div class="hl ${row_class} ${Article.getScoreClass(hl.score)}" data-orig-feed-id="${hl.feed_id}" data-article-id="${hl.id}" id="RROW-${hl.id}" 
-					data-score="${hl.score}" onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
+				row = `<div class="hl ${row_class} ${Article.getScoreClass(hl.score)}"
+					id="RROW-${hl.id}"
+					data-orig-feed-id="${hl.feed_id}"
+					data-article-id="${hl.id}"
+					data-score="${hl.score}"
+					data-article-title="${escapeHtml(hl.title)}"
+					onmouseover="Article.mouseIn(${hl.id})"
+					onmouseout="Article.mouseOut(${hl.id})">
 				<div class="left">
 					<input dojoType="dijit.form.CheckBox" type="checkbox" onclick="Headlines.onRowChecked(this)" class='rchk'>
 				    <i class="marked-pic marked-${hl.id} material-icons" onclick="Headlines.toggleMark(${hl.id})">star</i>
@@ -517,7 +529,7 @@ define(["dojo/_base/declare"], function (declare) {
 				</div>
 				<div onclick="return Headlines.click(event, ${hl.id})" class="title">
 					<span data-article-id="${hl.id}" class="hl-content hlMenuAttach">
-						<a class="title" href="${hl.link}">${hl.title} <span class="preview">${hl.content_preview}</span></a>
+						<a class="title" href="${escapeHtml(hl.link)}">${hl.title} <span class="preview">${hl.content_preview}</span></a>
 						<span class="author">${hl.author}</span>
 						${hl.labels}
 					</span>
@@ -530,7 +542,7 @@ define(["dojo/_base/declare"], function (declare) {
 				</div>
 				<div class="right">
 				  <i class="material-icons icon-score" title="${hl.score}" onclick="Article.setScore(${hl.id}, this)">${Article.getScorePic(hl.score)}</i>
-				  <span onclick="Feeds.open({feed:${hl.feed_id}})" style="cursor : pointer" title="${hl.feed_title}">${hl.feed_icon}</span>
+				  <span onclick="Feeds.open({feed:${hl.feed_id}})" style="cursor : pointer" title="${escapeHtml(hl.feed_title)}">${hl.feed_icon}</span>
 				</div>
 			  </div>
 			`;