Can Arbitrary Code Execution be done using CSS Injection?

Question

As part of our class project, we are studying the attacks that could be done using CSS Injection. In our threat model, attacker can manipulate any CSS file on the server. If attacker replaces original CSS file with a malicious CSS file and if the web-server sends this malicious CSS file to the client, can the attacker execute some code in the client?

For example, a CSS file contains information like this

#mw-indicator-mw-helplink a {
  background-image: url('images/help.png');
  background-image: linear-gradient(transparent, transparent), /* @embed */ url('images/help.svg');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 28px;
  display: inline-block;
  height: 24px;
  line-height: 24px;
}

Can an attacker change the url to some malicious url, and execute some code in client?

Answer 1

If attacker replaces original CSS file with a malicious CSS file and if the web-server sends this malicious CSS file to the client, can the attacker execute some code in the client?

Executing client-side code via CSS does not work in modern browsers.

I highly recommend taking a look at "Scriptless Attacks – Stealing the Pie Without Touching the Sill", "CSS: Cascading Style Scripting", and LiveOverflow's recent video "The Curse of Cross-Origin Stylesheets" if you are interested in learning more on scriptless attacks that rely on CSS.

Can an attacker change the url to some malicious url, and execute some code in client?

Actually executing malicious JavaScript via url() will only work in outdated browsers.