Executing Web Skimmers Inside CSS and SVG files
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: Front End, JavaScript
A web skimmer is a piece of malicious JS code embedded in web payment pages to skim customer’s payment information. There are a few tricks to embed malicious scripts. In this post, we’ll discuss how it can be done in CSS file and SVG file as well as what works and what doesn’t.
Embedding script in CSS
It is a new and interesting way to inject a script into the page from CSS. We can take advantage of CSS variables. In short, we will have a JS code to pull an external js file as a CSS variable and another small piece of JS to execute this JS code disguised as the variable. Web security tools usually scan JS code, not CSS. This method is more likely to go undetected.
We first define a global CSS variable to create a script tag that pulls the script. Then, you can inject another script to execute the variable through getComputedStyle.
Embedding script in SVG
This one is a more classic way of embedding a malicious script. SVG is basically XML, which means you can add a script tag and wrap the code with CDATA. You can inject the file to the page through an embed tag.
Note that this doesn’t work with an img tag, a CSS background-image url or link tag as a favicon. When SVG is used in an image context, the browser emulates a raster image that is not scriptable.
That’s it. If you are interested, I recommend you to try it out by yourself and see how easy it is to hide your script.