fix: escape all strings that use in HTML for better security

Fixes #269

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## next
+
+- Escape all strings that use in HTML for better security (#269).
+
 ## 1.3.3 (Apr 6, 2019)
 
 - Fix unexpected modal exiting behavior when the mouse is pressed (#255).

src/js/methods.js

@@ -25,6 +25,7 @@ import {
   addListener,
   assign,
   dispatchEvent,
+  escapeHTMLEntities,
   forEach,
   getData,
   getOffset,
@@ -211,8 +212,8 @@ export default {
     } = this;
     const item = this.items[index];
     const img = item.querySelector('img');
-    const url = getData(img, 'originalUrl');
-    const alt = img.getAttribute('alt');
+    const url = escapeHTMLEntities(getData(img, 'originalUrl'));
+    const alt = escapeHTMLEntities(img.getAttribute('alt'));
     const image = document.createElement('img');
 
     image.src = url;
@@ -258,9 +259,9 @@ export default {
       const { imageData } = this;
       const render = Array.isArray(options.title) ? options.title[1] : options.title;
 
-      title.innerHTML = isFunction(render)
+      title.innerHTML = escapeHTMLEntities(isFunction(render)
         ? render.call(this, image, imageData)
-        : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`;
+        : `${alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`);
     };
     let onLoad;
 
@@ -634,8 +635,8 @@ export default {
       const img = item.querySelector('img');
       const image = document.createElement('img');
 
-      image.src = getData(img, 'originalUrl');
-      image.alt = img.getAttribute('alt');
+      image.src = escapeHTMLEntities(getData(img, 'originalUrl'));
+      image.alt = escapeHTMLEntities(img.getAttribute('alt'));
       total += 1;
       addClass(image, CLASS_FADE);
       toggleClass(image, CLASS_TRANSITION, options.transition);

src/js/render.js

@@ -9,6 +9,7 @@ import {
   addClass,
   addListener,
   assign,
+  escapeHTMLEntities,
   forEach,
   getImageNameFromURL,
   getImageNaturalSizes,
@@ -67,14 +68,14 @@ export default {
     const items = [];
 
     forEach(this.images, (image, i) => {
-      const { src } = image;
-      const alt = image.alt || getImageNameFromURL(src);
+      const src = escapeHTMLEntities(image.src);
+      const alt = escapeHTMLEntities(image.alt || getImageNameFromURL(src));
       let { url } = options;
 
       if (isString(url)) {
-        url = image.getAttribute(url);
+        url = escapeHTMLEntities(image.getAttribute(url));
       } else if (isFunction(url)) {
-        url = url.call(this, image);
+        url = escapeHTMLEntities(url.call(this, image));
       }
 
       if (src || url) {

src/js/utilities.js

@@ -145,6 +145,20 @@ export function setStyle(element, styles) {
   });
 }
 
+/**
+ * Escape a string for using in HTML.
+ * @param {String} value - The string to escape.
+ * @returns {String} Returns the escaped string.
+ */
+export function escapeHTMLEntities(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
 /**
  * Check if the given element has a special class.
  * @param {Element} element - The element to check.