Lg-thumbnail CSP compliance

[peteruu]

Description

We started working with content security policy (CSP) and we find out that thumbnail plugin is not working properly. Some of the divs are created as text instead as HTML elements, because of that inline styles are not working properly with CSP.

Steps to reproduce

Setup CSP without unsafe-inline after loading gallery you will get errors in console like this: The page’s settings blocked the loading of a resource at inline (“style-src”). - it is blocking inline style which is setup on Thumb.

i checked js code in the bundle https://github.com/sachinchoolur/lightGallery/blob/master/dist/plugins/thumbnail/lg-thumbnail.es5.js

after editing 2 functions everything works as suggested. here is the new code:

Thumbnail.prototype.setThumbItemHtml = function (items) {
        for (var i = 0; i < items.length; i++) {
            var thumb = this.getThumb(items[i].thumb, i, items[i].alt);
            this.$lgThumb.append(thumb);
        }
    };

Thumbnail.prototype.getThumb = function (thumb, index, alt) {
        var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
        var thumbImg;
        if (slideVideoInfo.youtube) {
            if (this.settings.loadYouTubeThumbnail) {
                thumbImg =
                    '//img.youtube.com/vi/' +
                        slideVideoInfo.youtube[1] +
                        '/' +
                        this.settings.youTubeThumbSize +
                        '.jpg';
            }
            else {
                thumbImg = thumb;
            }
        }
        else {
            thumbImg = thumb;
        }
        var altAttr = alt ? 'alt="' + alt + '"' : '';
        var div = document.createElement('div');
        div.setAttribute('data-lg-item-id', index);
        div.setAttribute('class', 'lg-thumb-item' + (index === this.core.index ? ' active' : ''));
        div.style.width = this.settings.thumbWidth + "px";
        div.style.height = this.settings.thumbHeight ;
        div.style.marginRight = this.settings.thumbMargin + "px";
        var img = document.createElement('img');
        img.setAttribute('alt', alt ? alt : '');
        img.setAttribute('data-lg-item-id', index);
        img.setAttribute('src', thumbImg);
        div.appendChild(img);
        return div;
    };

I am no expert in javascript so you can edit it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.