1

I have a javascript function (with some PHP) on my website that will add an element to the DOM. The element will be styled via the element's style attribute. And part of the value of that attribute will be provided by the user.

A simplified example:

function addEl(bgColorStr) {
    $('<div/>')
      .attr('id', 'overlay')
      .css({
        width: '100vw',
        height: '100vh',
        background-color: '<?php print getAdminBG() ?>'
    }).appendTo($('body'));
}

Since the value returned by getAdminBG() will (or should) ALWAYS be sanitized/escaped/etc-ed before being inserted into the database, this question is more of a theoretical one, I guess.

Let's pretend an attacker found a way to get by the cleansing performed on the server prior to adding to the database and could add any string he wanted. Is there anything he could add that could any sort of damage?

With an "allowed" value, the element would look like this:

<div id="overlay" style="width:100vw;height:100vh;background-color:rgba(0,0,0,.75);"></div>

but an attacker might provide a value to try to make it look more like this:

<div id="overlay" style="width:100vw;height:100vh;" onclick="executeSomethingMightyMalicious();"></div>

As far as I can tell, if you try to assign an invalid value for a given CSS property, the browser will exclude that property (and its value) from the value of the style attribute.

So by that logic, even if nothing were escaped or stripped from the user-provided value before being inserted into the database and nothing is escaped or stripped on the client-side before creating the new element and inserting it into the DOM with the user-supplied value included in the string making up the value of the element's style attribute, it's still not possible to execute (or really even add) any code via an attribute (most likely an event handler, I'm guessing?) by modifying the style attribute in evil ways. Is this accurate/correct?

** Sorry for the crazy run-on sentence at the end there.

Daveh0
  • 952
  • 9
  • 33
  • Does this answer your question? [Cross Site Scripting in CSS Stylesheets](https://stackoverflow.com/questions/3607894/cross-site-scripting-in-css-stylesheets) – Owen Kelvin Oct 21 '20 at 04:41
  • Without sanitation it is possible to make an XSS attack. Any attribute value can be simply chopped to parts by adding quotes, i.e. you can terminate the style attribute, and even the tag containing it, and add a script tag. – Teemu Oct 21 '20 at 04:57
  • @Teemu - that's exactly what I'm asking - but I don't think it's possible. If I attempt to terminate the `style` attribute and add an `onclick` by setting the value returned by `getAdminBG()` to `" onclick="alert(\'attack\')"`, the browser knows that all those quotes and whatnot are not valid CSS values for the `background-color` property and thus omits that property and its value. See it "live" here: https://codepen.io/daveh0/pen/vYKXbJe. In there, is there __** any **__ value that can be passed to `addEl` that will either terminate the attribute or the tag and add a script? – Daveh0 Oct 21 '20 at 09:29
  • I thought it would be different if it were any other attribute, and it was just the `style` attribute that __** seems **__ to be safe from that due to the browser omitting any invalid CSS. BUT when I give a similar value to a `class` attribute, it looks like the browser converts the quotes to `"`. Again, see http://codepen.io/daveh0/pen/vYKXbJe. – Daveh0 Oct 21 '20 at 09:56
  • 1
    If you're storing an unsanitized string to your database, and then later add it to a HTML string at your server (yet without sanitation), it's trivial to hack. Ex: Your user enters content for a style attribute: `">
     – Teemu Oct 21 '20 at 13:11
  • @Teemu - can you explain/show how it can be done on the client-side? As soon I add quotes to the value, it is omitted... and the part with `innerHTML` has got me totally stumped... – Daveh0 Oct 22 '20 at 16:56
  • There you go: [XSS example at jsFiddle](https://jsfiddle.net/2ds7kbp9/). There's also a frightening example of PHP code introducing a simple, but very commonly used mechanism for XSS attacks. And it's not limited to PHP only, any templating language can be a victim, if you're not sanitizing your user inputs. – Teemu Oct 22 '20 at 18:35
  • Here's some reading: https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html – Teemu Oct 22 '20 at 18:54
  • 1
    oh ok i get it... `innerHTML` as opposed to `.createElement` and `.innerText`/`.textContent`.... Thanks!! – Daveh0 Oct 22 '20 at 22:05

0 Answers0