Merge pull request #1632 from hackmdio/bugfix/fix-xss-in-lightbox-image-attribute

Fix xss issue for image lightbox

Author: Yukaii

public/js/lib/renderer/fretboard/fretboard.js

@@ -1,4 +1,5 @@
 /* global $ */
+import escapeHTML from 'lodash/escape'
 
 import './css/i.css'
 import dotEmpty from './svg/dotEmpty.svg'
@@ -41,7 +42,7 @@ export const renderFretBoard = (content, { title: fretTitle = '', type = '' }) =
   const fretboardHTML = $(`<div class="${containerClass}"></div>`)
 
   if (fretTitle) {
-    $(fretboardHTML).append(`<div class="fretTitle">${fretTitle}</div>`)
+    $(fretboardHTML).append(`<div class="fretTitle">${escapeHTML(fretTitle)}</div>`)
   }
 
   // create fretboard background HTML

public/js/lib/renderer/lightbox/index.js

@@ -1,4 +1,5 @@
 import './lightbox.css'
+import escape from 'lodash/escape'
 
 let images = []
 /** @type {HTMLImageElement} */
@@ -74,7 +75,7 @@ function setImageInner (img, lightBoxContainer) {
   const src = img.getAttribute('src')
   const alt = img.getAttribute('alt')
 
-  lightBoxContainer.querySelector('.lightbox-inner').innerHTML = `<img src="${src}" alt="${alt}" draggable="false">`
+  lightBoxContainer.querySelector('.lightbox-inner').innerHTML = `<img src="${escape(src)}" alt="${escape(alt)}" draggable="false">`
   addImageDragListener(lightBoxContainer.querySelector('.lightbox-inner img'))
 }