Noticed a small flaw in the way the lSPager is built in the script, which causes a violation with any Content-Security-Policy that does not allow unsafe-inline (which anyone implementing CSP should not allow).
By explicitly setting a style attribute in this manner, it will cause CSP to block it (and thus really break the layout of the lightslider pagers). I made a simple fix to the script by changing that line above to:
What this does is properly set the css styles for each of those elements via the CSSOM, instead of inject style attributes which get parsed and subsequently blocked by the CSP. Hopefully this helps anyone else who runs into this issue, as it seems this lightslider library is no longer updated.
Noticed a small flaw in the way the lSPager is built in the script, which causes a violation with any Content-Security-Policy that does not allow
unsafe-inline(which anyone implementing CSP should not allow).You have a pagers build loop of:
pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><a href="#"><img src="' + thumb + '" /></a></li>';By explicitly setting a style attribute in this manner, it will cause CSP to block it (and thus really break the layout of the lightslider pagers). I made a simple fix to the script by changing that line above to:
pagers += '<li class="lSsetCSS"><a href="#"><img src="' + thumb + '" /></a></li>';And then after:
$cSouter.find('.lSPager').html(pagers);I added this line:$cSouter.find(".lSsetCSS").css('width','100%').css(property,thumbWidth +'px').css(gutter,settings.thumbMargin +'px');What this does is properly set the css styles for each of those elements via the CSSOM, instead of inject style attributes which get parsed and subsequently blocked by the CSP. Hopefully this helps anyone else who runs into this issue, as it seems this lightslider library is no longer updated.