MediaElement does not work with CSP without 'unsafe-inline' specified for style-src

[yippibrian]

If I set up my "Content-Security-Policy" (CSP) header as follows (using Apache .htaccess format) then MediaElementJS works fine.

Header always set Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'"

If I remove the 'unsafe-inline' from the end of the above line, then the play/pause button and the volume button on the player disappear as shown in the following image. This indicates that some stylesheets used by MediaElementJS has inline <script> elements, javascript: URLs, inline event handlers, or inline <style> elements.

It would be better security if MediaElementJS worked with the more strict CSP setting where you do not specify 'unsafe-inline' and it should be possible to rework the code to support this.

Here is some information about CSP for reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP