// HACKER NEWS — CYBERSECURITY
An image can overflow
Adding images to a website is a pretty straightforward task. You grab your link, and you summon the image element like below:
Then, you add your favorite CSS, and you have a nice-looking image!
What if I tell you that the most common element is hiding some secrets? You have been working with images for too long, but you have probably never noticed the little quirks I will show you here.
Think I am exaggerating? Follow along, and you will see!
If you inspect the CSS code of an image element, you will notice default styles applied by the browsers, and one of them is overflow: clip.
It means that any overflow is clipped/hidden by default. We can, of course, change that and make the overflow visible:
But what could overflow an image? We are dealing with a single element that cannot contain any other element. There is no container-content relation to talk about overflowing!
Actually, an image element has content, and its content is the image resource. It’s confusing, right? Let’s make a figure to better understand:
The ![]()
element (the HTML element) is the “container”, and the image resource (the actual image) is loaded inside that “container” and becomes the “content”. We have our container-content relation so we can talk about overflow.
Even with this clarification, it’s hard to imagine how the content of the image can overflow, but there is a very common situation where this can happen. One CSS line that you know for sure: