lightGallery must not accept raw HTML as input
chrillek opened this issue · comments
Description
Currently, it is impossible to use lightGallery with any Content Security Policy in place unless one uses unsafe-inline
. Which is like no CSP at all.
This is due to the fact that the library accepts raw HTML in numerous places and adds these strings to the DOM via innerHTML
and similar functions. Since the raw HTML is not sanitized, it could contain basically anything at all which is not acceptable from a security point of view.
It would be necessary to modify lgQuery.prepend/load/append
so that they only accept HTML elements. #1291 has already done that for prepend
.
In addition, the examples and description of the subHTML
attribute for dynamicEl
(cf https://www.lightgalleryjs.com/demos/inline/) must be modified so that it only accepts HTML elements.
Example: Instead of
subHtml: `<div class="lightGallery-captions">
<h4>Caption 1</h4>
<p>Description of the slide 1</p>
</div>`
one would have
const div = document.createElement('div');
div.classList.add('lightGallery-captions');
const h4 = div.appendChild(document.createElement('h4'));
h4.innerText = 'Caption 1';
const p = div.appendChild(document.createElement('p'));
p.innerText = 'Description of slide 1';
...
subHtml: div
Not only would that allow to deploy a CSP with a project using lightGallery, but it would also prevent stupid errors by malformed HTML strings passed in to the lightGallery code.
Hey @chrillek,
Thank you for reporting this issue. I'll try to include the fix in the next version.
Hey @chrillek,
Thank you for reporting this issue. I'll try to include the fix in the next version.
Hey, @sachinchoolur looks like it is still issue. Can you look into it?