SVG Filters - Clickjacking 2.0
Clickjacking is a classic attack that consists of covering up an iframe of some other website in an attempt to trick the user into unintentionally interacting with it. It works great if you need to trick someone into pressing a button or two, but for anything more complicated it’s kind of unrealistic.
I’ve discovered a new technique that turns classic clickjacking on its head and enables the creation of complex interactive clickjacking attacks, as well as multiple forms of data exfiltration.
I call this technique “SVG clickjacking”.
🦊 File Edit View Share Lyra Rebane Private Friends Unlisted Public Are you sure? Everybody will be able to see your secrets. Yes No [ get pixel color at (567,178) ] win free ipod click here [ show overlay image #3 ]
Liquid SVGs
The day Apple announced its new Liquid Glass redesign was pretty chaotic. You couldn’t go on social media without every other post being about the new design, whether it was critique over how inaccessible it seemed, or awe at how realistic the refraction effects were.
Drowning in the flurry of posts, a thought came to mind - how hard would it be to re-create this effect? Could I do this, on the web, without resorting to canvas and shaders? I got to work, and about an hour later I had a pretty accurate CSS/SVG recreation of the effect.
You can drag around the effect with the bottom-right circle control thing in the demo above (chrome/firefox desktop, chrome mobile).
Note: This demo is broken in Safari, sorry.
... continue reading