malihu / malihu-custom-scrollbar-plugin

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
http://manos.malihu.gr/jquery-custom-content-scroller
MIT License
4.11k stars 1.51k forks source link

Content Security Policy (CSP) #508

Open ghost opened 7 years ago

ghost commented 7 years ago

Hello, I use plugin from this repository. It works great & I haven't problem with it. However, when I apply CSP then I get an errors.. After checking, I see that they're caused by inline styles. For example: jquery.mCustomScrollbar.js Of course, I can use directive: 'unsafe-inline' but this is not recommended. The use of such a directive doesn't make sense if I use CSP.

This CSP rule can be disabled with the CSP keyword unsafe-inline , but it is generally not recommended as it would weaken the protections offered by CSP. (...)

My website, which Outputs an errors messages to the Web Console: Link My directive: Header always set Content-Security-Policy "default-src 'self';" I tested it here: mozilla_observatory I use plugin in version 3.1.5

Is it possible to help resolve above problem? or editing parts of yours plugin so that I could manually add div tags instead of generating it?

I think the problem is serious if this plugin to be used on secure websites. For helping me I'll reward you as soon as I can.

Polyfun commented 8 months ago

Yes, I would like this fixed too please. Most of the inline styles are static and could easily be replaced with classes. This one is a bit more difficult, as it has dynamic positions:

style='position:relative; top:"+o.setTop+"; left:"+o.setLeft+"

I have created a version of jquery.mCustomScrollbar.js in which I have replaced the inline styles with classes, and for the one above I just set top and left to 0, the default values. These are the classes I have added to replace the inline styles; mCS-position-relative-t0-l0 is the class for the above inline style:

.mCS-position-absolute {
    position: absolute;
}
.mCS-position-relative {
    position: relative;
}
.mCS-position-relative-t0-l0 {
    position: relative;
    top: 0;
    left: 0;
}
.mCS-position-relative-l0-wide {
    position: relative;
    left: 0;
    width: 999999px;
}