Content Security Policy Issues - BLOCKER

[davecra]

This library uses inline styles written into the JavaScript for specific emojis, here is snippet from SAD, for example:

sad: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cy="10%" id="gradient-0">
---> RIGHT HERE --> <stop offset="0" style="stop-color: hsl(50, 100%, 50%);"/>...',

Here is the error I get:

The Content Security Policy for most websites these days BLOCK inline-styles (and inline-code) as a security precaution because they provide an attack vector some malicious code to manipulate the site. Here is a good answer as to why/how inline styles is bad.

I was using this library, but it was blocked by the provider, and I have had to remove all references until this is fixed. The solution is to update your code to NOT use inline style or inline JavaScript anywhere in your library. You would need to point to CSS classes in your library for each of these styles or find another way to render these specific items. I do not seem to get any errors for inline JavaScript, but there are 16 instances in the index.js that use inline-styles.

To test this, you can add a (.htaccess) to an APACHE root project that uses your library. Add these two lines to it:

Header always set Strict-Transport-Security "max-age=31536000" env=HTTPS
Header add Content-Security-Policy "default-src https:;"

Then you will see what I am seeing when you load the page with your library attached. Please let me know if you have any questions about this.

[joeattardi]

Hi David, thanks for submitting this, I wasn't aware of CSP issues with PicMo!

The inline styles in are part of the icons. They are SVG icons from Font Awesome. It looks like the inline styles were added by me, to add some color to the icons.

I will try to look at another solution to styling the SVGs perhaps with an external style sheet (I am not really an expert on SVGs). Worst case I will just remove the styling; avoiding CSP issues is more important to me than colored icons!

Thanks again.

[joeattardi]

Luckily there was only one SVG with the inline styles, they have been replaced with plain old CSS inside the SVG.

I just released version 5.4.2 with the fix, hopefully there should be no further CSP issues. Thanks again!

[davecra]

I am still getting CSP issues with several of the SVG's used. I copied one to my website "sad.svg" so that you can see the issue:

https://kryl.com/apps/test/sad.svg

When you open that link above first you will see it will not render, the next thing, press F12 and you will see this error:

The reason is in the SVG itself there is a