Security Header (Content-Security-Policy) style-src 'unsafe-inline'

[Jieiku]

Currently in my CSP I have style-src 'unsafe-inline' without this the imghover shortcode does not work.

Mozilla observatory flags this as an issue, and for good reason:

The way that the imghover shortcode works is that it inserts some style directly into style tags in the middle of the page (at whatever point the shortcode is used.) This is considered unsafe-inline style, the style has to be in a css file.

I think the solution is to extend Zola with a new feature that allows shortcodes to write a portion of their output to a css file, this css file could then be loaded in the head for the given page.

Apart from this Abridge has a great score of 120/100, it will be 130/100 if this gets resolved.

You can of coarse remove 'unsafe-inline' from the style-src CSP, if you do not use the imghover shortcode

[Jieiku]

This is now resolved:

https://github.com/Jieiku/abridge/commit/729f7cda12340aabce5d0faab8d306b5e0d59568

basically instead of dynamically loading the new image via css, we just load both images, this simplifies the css to a generic format that can be included with the rest of the css instead of within style tags on the page. This resolves the CSP conflict.

The idea came from here: https://github.com/welpo/tabi/pull/104

in Tabi there is both a hover and a click version. The click version is very smart because it is ideal for mobile. For desktop users the hover version is more convenient in my opinion. The hover version also works on mobile, but you have to click on the image, then click somewhere else on the page... so it is less intuitive.

The ideal solution would be to find a way to combine these two. Support change on hover, but also support change on click... I tinkered with this but it was less than ideal, for now I am just going with the hover version and will try and integrate clicking within the same shortcode.

I have renamed the shortcode to imgswap.