Usage of the style attribute breaks websites with a secure Content Security Policy

[nicwortel]

Similar to #12, the use of inline style attributes breaks Content Security Policies without the (insecure) setting style: unsafe-inline.

Instead of using style attributes, styling should probably be supplied via classes.

In total I count 7 instances of the style attribute in index.js, for example:

bs5-lightbox/src/index.js

Lines 149 to 153 in f4d2e1b

	<div class="carousel-item ${!i ? 'active' : ''}" style="min-height: 100px">
	${spinner}
	<div class="ratio ratio-16x9" style="background-color: #000;">${inner}</div>
	${caption}
	</div>`;

[trvswgnr]

@nicwortel thanks for bringing this to my attention. I'm trying to avoid a stylesheet dependency if at all possible but I will look at other options.

[trvswgnr]

@nicwortel do you have any suggestions for styling these elements in a way that doesn't involve moving them to an external stylesheet and that would still be compliant? My concern is that separating styles into their own resource will introduce a breaking change and require additional setup.

One potential workaround would be to instead put all of the styles into a <style> tag so that a single hash could be added to the Content Security Policy. Not ideal, of course but I'm open to suggestions.

Edit: I'm noticing that Bootstrap 5 uses inline display: block; on the modal element when it is shown—would that not break as well?

[CallumNZ]

Would it be possible to only use Bootstrap classes to style? Since the users of this will already have the Bootstrap 5 stylesheet, it won't introduce any extra set up.

[trvswgnr]

@CallumNZ I could replace some of the inline styles with utility classes now (e.g. object-fit and z-index were added in Bootstrap v5.3-alpha). There are a couple of other areas that could be cleaned up (can probably remove the Instagram support altogether).

That said, Bootstrap applies the display: block inline style on the Modal and uses multiple inline SVGs so I'm not sure what to do about it. Open to ideas!