Executing Web Skimmers Inside CSS and SVG files

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.

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …