I have read a post in thehackernews and searched the net to find how it worked.
Can this be done with other languages?
Conventionally, the HTML markup to include a profile picture might look something like this:
However, it has to be different for each user, so the application code that generates it might look something like this (example is PHP):
So if the user Alice uploaded
alicespic.jpg, users would see that image when they visited her profile, for example. However, this is where the vulnerability can occur, if the image name is not properly validated or sanitised.
For example, if Mallory could set her profile's image name to
inncoent.jpg" onload="alert(1), the following HTML markup would be generated:
<img src="/inncoent.jpg" onload="alert(1)">
This would not occur if the developer only allowed safe characters to be included inside the image name.
There are 2 ways you can do this, the first is simply writing a script in a text file and saving it as a jpg. This is obviously not an image, but it will work. If you want a real image, you can take your image and use a hexeditor to add your script to the image metadata. This works because the browsers interpret the code as they try to render the image into the HTML.
Edit: itscooper's answer is the correct interpretation of the vulnerability in the THN article that the question linked to, in my opinion. The answer below is for the general question of how to hide js and have it be executed inside an image object.