robinloeffel/cosha

Colorful shadows for your images. 🎨

cosha's Issues

Potential XSS issue in the stylesheets

First of all I must thank you for learning me an awesome trick that I didn't know about =)

I noticed that you are inserting the style tag as raw HTML with potentially unescaped parameters. Granted it is not likely this will be exploitable since the web page will need to allow users to set the class name, or any of the drop shadow parameters for this to be exploitable, but it is also relatively simple to fix it.

The fix is replacing

document.head.insertAdjacentHTML('beforeend', `<style>
styles here...
</style>`);

with

const styles = document.createElement('style');
styles.textContent = `
styles here...
`;
document.head.appendChild(styles);

I have attached a JSfiddle here which shows how you can exploit it... Just hit the submit button and you will get an alert.

Is it possible to make this work with background-image css?

Simply applying it to a div that has style background-image does nothing or could interfer because it wrapps it with a div and class.

How does this work?

I am impressed with how tiny the code is - and I see that a clone of the image is made and then some CSS is applied to it - which I do not understand.

Would it be possible to add a "How it works?" section to the readme? That would be very educational... Thanks for this!

Hide background image for screen readers

Because this library is duplicating the node, a screen reader would pass over both the images and repeat the callout. Therefore you need to add the attribute 'aria-hidden' on the background image.

clone.setAttribute('aria-hidden', 'true');

If you open up PR's I can create one, if not I have implemented it on vue-cosha if you want to copy it over!