Lightbox generates CSP errors for sites that block inline-styles

[april]

So, you're experiencing a problem?

The current version of lightbox generates a CSP (Content Security Policy) error when sites are set to block 'unsafe-inline' styles. This is because there are a couple pieces of the code that are setting styles directly on elements via a style tag.

If you really do think you have a bug, please:

• [X] Provide a link to your site or a full example https://pokeinthe.io/2017/03/07/recording-mtgo-in-4k-with-obs/

• [X] Provide screenshots where appropriate

  

• [X] Browser name and version Firefox and Chrome (current releases)

This is the piece of code that causes the problem:

let header = `<div class="modal-header"${this._config.title || this._config.alwaysShowClose ? '' : ' style="display:none"'}>`+(this._isBootstrap3 ? btn+h4 : h4+btn)+`</div>`;

(and also footer)

[april]

I think you also make a few calls into .css() as well. For the piece of code above, I think you can just use class="hide", since it's part of Bootstrap. For calls into csp() it might be a bit more complicated, but not too tricky I don't think.