Is there a way to execute javascript from inside a css file ?

Question

I have access ONLY to a css file which I can modify. I have a lot of modifications to do and I want to know if there is a way to execute a javascript code from inside a CSS file.

I did find an old vulnerability that is not supported in up-to-date browsers any more. http://dougrathbone.com/blog/2013/10/30/executing-javascript-inside-css-another-reason-to-whitelist-and-encode-user-input

As you can see the vulnerability was exploited by calling an arbitrary code from another url like this

body {
    behavior:url(/user/uploadedfiles/evil-uploaded-component.htc);
    }

Now, I want to know if there's any alternative way to do that ?

This should help you : [Using Javascript in CSS](https://stackoverflow.com/questions/476276/using-javascript-in-css) — Zenoo, Jan 10 '18 at 08:30
CSS and Javascript files wouldn't mix up much.. Try add the js file directly in the HTML using script tag and src pointing to the JS file. — Vinod kumar G, Jan 10 '18 at 08:34
Possible duplicate of [Using Javascript in CSS](https://stackoverflow.com/questions/476276/using-javascript-in-css) — delinear, Jan 10 '18 at 09:09
Possible duplicate of [Putting Javascript into CSS](https://stackoverflow.com/questions/4536237/putting-javascript-into-css) — Horkrine, Jan 10 '18 at 09:25

score 4 · Accepted Answer · answered Sep 30 '18 at 18:25

IE and Firefox both contain ways to execute JavaScript from CSS. As Paolo mentions, one way in IE is the expression technique, but there's also the more obscure HTC behaviour, in which a separate XML that contains your script is loaded via CSS. A similar technique for Firefox exists, using XBL. These techniques don't execute JavaScript from CSS directly, but the effect is the same.

HTC with IE

Use a CSS rule like so:

body {
  behavior:url(script.htc);
}

and within that script.htc file have something like:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

The HTC file executes the main() function on the event ondocumentready (referring to the HTC document's readiness.)

XBL with Firefox

Firefox supports a similar XML-script-executing hack, using XBL.

Use a CSS rule like so:

body {
  -moz-binding: url(script.xml#mycode);
}

and within your script.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

All of the code within the constructor tag will be executed (a good idea to wrap code in a CDATA section.)

In both techniques, the code doesn't execute unless the CSS selector matches an element within the document. By using something like body, it will execute immediately on page load.

Is there a way to execute javascript from inside a css file ?

1 Answers1