Improved escaping

src/scripts/album.js

@@ -247,7 +247,6 @@ album.setTitle = function(albumIDs) {
 		else if (albums.json) oldTitle = albums.getByID(albumIDs).title
 
 		if (!oldTitle) oldTitle = ''
-		oldTitle = oldTitle.replace(/'/g, ''')
 
 	}
 
@@ -257,9 +256,6 @@ album.setTitle = function(albumIDs) {
 
 		basicModal.close()
 
-		// Remove html from input
-		newTitle = lychee.removeHTML(newTitle)
-
 		// Set title to Untitled when empty
 		newTitle = (newTitle==='') ? 'Untitled' : newTitle
 
@@ -296,7 +292,7 @@ album.setTitle = function(albumIDs) {
 
 	}
 
-	let input = `<input class='text' name='title' type='text' maxlength='50' placeholder='Title' value='${ oldTitle }'>`
+	let input = `<input class='text' name='title' type='text' maxlength='50' placeholder='Title' value='${ lychee.escapeHTML(oldTitle) }'>`
 
 	if (albumIDs.length===1) msg = `<p>Enter a new title for this album: ${ input }</p>`
 	else                     msg = `<p>Enter a title for all ${ albumIDs.length } selected albums: ${ input }</p>`
@@ -327,9 +323,6 @@ album.setDescription = function(albumID) {
 
 		basicModal.close()
 
-		// Remove html from input
-		description = lychee.removeHTML(description)
-
 		if (visible.album()) {
 			album.json.description = description
 			view.album.description()
@@ -349,7 +342,7 @@ album.setDescription = function(albumID) {
 	}
 
 	basicModal.show({
-		body: `<p>Please enter a description for this album: <input class='text' name='description' type='text' maxlength='800' placeholder='Description' value='${ oldDescription }'></p>`,
+		body: `<p>Please enter a description for this album: <input class='text' name='description' type='text' maxlength='800' placeholder='Description' value='${ lychee.escapeHTML(oldDescription) }'></p>`,
 		buttons: {
 			action: {
 				title: 'Set Description',

src/scripts/lychee.js

@@ -312,15 +312,6 @@ lychee.animate = function(obj, animation) {
 
 }
 
-lychee.escapeHTML = function(s) {
-
-	return s.replace(/&/g, '&')
-	        .replace(/"/g, '"')
-	        .replace(/</g, '&lt;')
-	        .replace(/>/g, '&gt;')
-
-}
-
 lychee.retinize = function(path = '') {
 
 	let pixelRatio = window.devicePixelRatio,
@@ -385,14 +376,19 @@ lychee.getEventName = function() {
 
 }
 
-lychee.removeHTML = function(html = '') {
+lychee.escapeHTML = function(html = '') {
 
-	if (html==='') return html
+	// Ensure that html is a string
+	html += ''
 
-	let tmp = document.createElement('DIV')
-	tmp.innerHTML = html
+	// Escape all critical characters
+	html = html.replace(/&/g, '&amp;')
+	           .replace(/</g, '&lt;')
+	           .replace(/>/g, '&gt;')
+	           .replace(/"/g, '&quot;')
+	           .replace(/'/g, '&#039;')
 
-	return (tmp.textContent || tmp.innerText)
+	return html
 
 }
 

src/scripts/photo.js

@@ -285,7 +285,6 @@ photo.setTitle = function(photoIDs) {
 		// Get old title if only one photo is selected
 		if (photo.json)      oldTitle = photo.json.title
 		else if (album.json) oldTitle = album.json.content[photoIDs].title
-		oldTitle = oldTitle.replace(/'/g, ''')
 
 	}
 
@@ -295,9 +294,6 @@ photo.setTitle = function(photoIDs) {
 
 		let newTitle = data.title
 
-		// Remove html from input
-		newTitle = lychee.removeHTML(newTitle)
-
 		if (visible.photo()) {
 			photo.json.title = (newTitle==='' ? 'Untitled' : newTitle)
 			view.photo.title()
@@ -321,7 +317,7 @@ photo.setTitle = function(photoIDs) {
 
 	}
 
-	let input = `<input class='text' name='title' type='text' maxlength='50' placeholder='Title' value='${ oldTitle }'>`
+	let input = `<input class='text' name='title' type='text' maxlength='50' placeholder='Title' value='${ lychee.escapeHTML(oldTitle) }'>`
 
 	if (photoIDs.length===1) msg = `<p>Enter a new title for this photo: ${ input }</p>`
 	else                     msg = `<p>Enter a title for all ${ photoIDs.length } selected photos: ${ input }</p>`
@@ -465,7 +461,7 @@ photo.setPublic = function(photoID, e) {
 
 photo.setDescription = function(photoID) {
 
-	let oldDescription = photo.json.description.replace(/'/g, '&apos;')
+	let oldDescription = photo.json.description
 
 	const action = function(data) {
 
@@ -473,9 +469,6 @@ photo.setDescription = function(photoID) {
 
 		let description = data.description
 
-		// Remove html from input
-		description = lychee.removeHTML(description)
-
 		if (visible.photo()) {
 			photo.json.description = description
 			view.photo.description()
@@ -495,7 +488,7 @@ photo.setDescription = function(photoID) {
 	}
 
 	basicModal.show({
-		body: `<p>Enter a description for this photo: <input class='text' name='description' type='text' maxlength='800' placeholder='Description' value='${ oldDescription }'></p>`,
+		body: `<p>Enter a description for this photo: <input class='text' name='description' type='text' maxlength='800' placeholder='Description' value='${ lychee.escapeHTML(oldDescription) }'></p>`,
 		buttons: {
 			action: {
 				title: 'Set Description',
@@ -571,9 +564,6 @@ photo.setTags = function(photoIDs, tags) {
 	tags = tags.replace(/(\ ,\ )|(\ ,)|(,\ )|(,{1,}\ {0,})|(,$|^,)/g, ',')
 	tags = tags.replace(/,$|^,|(\ ){0,}$/g, '')
 
-	// Remove html from input
-	tags = lychee.removeHTML(tags)
-
 	if (visible.photo()) {
 		photo.json.tags = tags
 		view.photo.tags()