Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Content security policy

See original GitHub issue

Slick slider is not CSP compliant https://en.wikipedia.org/wiki/Content_Security_Policy

No fiddle because it requires server headers

Steps to reproduce the problem

Enable CSP on your server
Add slick

What is the expected behaviour?

Beautiful and safe website

What is observed behaviour?

CSP stopped execution because of this:

        _.$slides.each(function(index, element) {
            $(element)
                .attr('data-slick-index', index)
                .data('originalStyling', $(element).attr('style') || '');
        });

        if(_.options.rows > 1) {
            originalSlides = _.$slides.children().children();
            originalSlides.removeAttr('style');
            _.$slider.empty().append(originalSlides);
        }

        if (_.$slides) {

            _.$slides
                .removeClass('slick-slide slick-active slick-center slick-visible slick-current')
                .removeAttr('aria-hidden')
                .removeAttr('data-slick-index')
                .each(function(){
                    $(this).attr('style', $(this).data('originalStyling'));
                });

setting inline style!

More Details

Which browsers/versions does it happen on? All browsers supporting CSP
Which jQuery/Slick version are you using? Present in slick/slick.js in master branch
Did this work before? Nope?

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:17 (6 by maintainers)

Top GitHub Comments

1reaction

kenwheelercommented, Jul 1, 2016

For literally everything having to do with dynamically positioning elements?

1reaction

kenwheelercommented, Jul 1, 2016

Whats the fix here? Sanitizing the originalStyling data ?

Top Results From Across the Web

Content-Security-Policy Header CSP Reference & Examples

Content-Security-Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web page)....

Content Security Policy - Wikipedia

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection ...

Content security policy - web.dev

Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.

What is Content Security Policy (CSP) | Header Examples

A Content Protection Policy (CSP) is a security standard that provides an additional layer of protection from cross-site scripting (XSS), clickjacking, ...

Content Security Policy Level 3 - W3C

This document defines Content Security Policy (CSP), a tool which developers can use to lock down their applications in various ways, ...