I have a script that allows stylesheet customization on a per-property basis. For example, I expose the "background-image" property for people to enter their own SCSS values to be entered in the mixin.

I want to know if I'm opening up an avenue for exploitation by doing this.

Some things to note are that I'm using ScssPhp, and my code looks like this:

using Leafo\ScssPhp\Compiler;

$scss = new Compiler();
$scss->setImportPaths([ __DIR__.'/Application/Extra/bourbon/', __DIR__.'/Application/View/default/' ]);
    'background-color' => '#ffffff',
    'background-image' => 'linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%)'
die($scss->compile('@import "style.scss";'));

And for the SCSS (a snippet):

@import "bourbon";

$background-color: #332517 !default;
$background-image: null !default;

body {
    /* ... other style properties ... */
    background-color: $background-color;

    @if $background-image != null {
        @include background-image($background-image);

This is just strictly for testing purposes right now. The parser treats these strictly as variables and it looks as if the mixin ignores junk like concatenating a behavior property onto the end of the background-image variable string. Mostly this will just be editing colors and backgrounds of elements I define variables for. So all input is done into variables, and then hopefully into mixins provided by Bourbon.

Relevant library references (parseValue method)

Background Image

So if it ignores junk and only accepts valid input into the background-image mixin, then is that sufficient to make sure users can not input malicious CSS?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.