lightGallery must not accept raw HTML as input

[chrillek]

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.

[Sachin Neravath]

Hey @chrillek,

Thank you for reporting this issue. I'll try to include the fix in the next version.

[hracik]

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?