How do I ensure user input is CSS and not malicious code?

Question

On my website I want to include a text box that will allow the members to change anything they want css wise on their profiles....but I don't want to wake up one morning to find my site has been hacked or someone typoed and destroyed everything or accessed things they shouldn't.

Is there any easy way to verify that the text they input is css only? I saw another question on here that was similar, it had XSS cheat sheet and tips for what to disable (< and ]]> and < ![), but I don't know if that will be enough. I will definitely use that info though.

Essentially I want to just make PHP call any custom css and insert it between script tags for the users profile. I want to allow as much css as possible. Is this the best way to go about it? I don't have the know how to make up a system to generate safe files, or the patience to make up an entire section with options (especially since I want to give members more freedom with their profiles).

Any advice is appreciated, and if anyone knows of some script that does this already that would rock too and help me figure out what to do :D.

What if your user puts * { font-family: 'Comic Sans' !important; } into their custom stylesheet? It will affect your website components as well. You could parse the stylesheet with PHP and prepend #user-content > to each selector and output a sanitized stylesheet, but that might be difficult. — Blender
– Blender, Commented Dec 14, 2012 at 10:37
@Andy because you need to store it in a database for the next time they visit... — rickyduck
– rickyduck, Commented Dec 14, 2012 at 10:37
Does it have to be pure CSS or could you just let them change some variables instead? I imagine you would still want to have some control on the overall appearance of your website? — Dani P.
– Dani P., Commented Dec 14, 2012 at 10:40
@JadeElizabeth: I'm not sure if users would appreciate such an inconsistent website experience, but hey, that's my opinion. — Blender
– Blender, Commented Dec 14, 2012 at 11:35

GolezTrol · Accepted Answer · 2012-12-14 10:47:47Z

6

When a user is logged in, add a separate <link> element for that user. The href can point to a script that generates the css for the user, for instance customcss.php?userid=1234&version=2 *). The script only needs to return everything the user has entered before. Because you enclose it as a separate CSS file, the browser will always treat it as such and will never run any scripts. Any HTML or Javascript is just treated as invalid CSS.

Note however, that there's little harm anyway in including scripts for that matter, because they will only run in the browser of the logged in user, so they can only hack their own view of your site. If they want to inject Javascript, they can still do that by writing their own browser plugins, so you won't open up a possibility that wasn't there before.

The main thing you need to worry about are

Usability. What if the user makes a mistake and accidentally hides the Body element. How will they be able to reset it?
SQL injection. No matter what you do or do not allow, always make sure your input is sanatized.
PHP injection. Don't execute (eval) user content. Ever.
Hiding user information. Add a code to the customcss.php url to prevent other users from guessing a user id, gaining insight into the customizations of other users.

*) I've added a version number to the CSS url, which you should update in the database each time a user updates their CSS. If you don't do that, the browsers will cache the old CSS and users will start complaining to you, because their changes won't become visible.

edited Dec 14, 2012 at 10:47

answered Dec 14, 2012 at 10:42

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jade Elizabeth Over a year ago

So you're saying not to store it in the database and have some sort of file generated for it? How do I sanitize it? How do I not eval it? Since it will only show when viewing the profile and not editing it, it should be easy to fix mistakes that break things ha ha :).

Eyal Alsheich Over a year ago

i think this is a good method of getting what you need however be VERY carefull when you are creating php files from user input as malicious code can be inserted. so instead i would create a new css file every time a user changes something and remove the old files and then <link> to the new css file other than that this is a good answer

GolezTrol Over a year ago

@JadeElizabeth Do store it in the database. The PHP file is only used to extract the specific user info and feed it as if it were a separate file. The PHP file I mentioned only needs to query the CSS, set a right header and echo the CSS. For SQL injection, there's a lot written about it. Search for prepared statements and PDO. If you just store the CSS in a database and output it using echo or something, you don't eval it and you're safe. If it will show when viewing the profile, they must still be able to find the edit page from there. :)

GolezTrol Over a year ago

@EyalAlsheich I didn't mean to create PHP files. I meant to create a single PHP file that feeds the custom CSS as if it were a static CSS file. Writing a PHP file means executing user committed code, which is exactly what I warned against.

Eyal Alsheich Over a year ago

yes i agree, what i am suggesting is that you can write individual css files for each user instead of keeping it in a database but thats a matter of which way is more convinient for you to work with

Rasikh Mashhadi · Accepted Answer · 2012-12-14 11:10:37Z

3

I guess this should be enough

$style = $_POST['style'];

$style = strip_tags($style);

    $forbiddenStuff = array(
        '-moz-binding',
        'expression',
        'javascript:',
        'behaviour:',
        'vbscript:',
        'mocha:',
        'livescript:',
    );

    $style = str_ireplace($forbiddenStuff, '', $style);

store $style in db , and render on user profile.

Please note that this solution is copied from a well known software and which has a big community, so i hope this should be perfect.

edited Dec 14, 2012 at 11:10

answered Dec 14, 2012 at 10:41

Rasikh Mashhadi

1,4721 gold badge16 silver badges25 bronze badges

6 Comments

Blender Over a year ago

Won't this allow an attacker to just capitalize the attribute name and bypass the filter?

Jade Elizabeth Over a year ago

That sounds like a good idea for sure, especially if it's not case sensitive :).

Jade Elizabeth Over a year ago

Is there any way I can use a regex mask? If I create the the field with the community software I'm using I have the option to use a regex mask to validate the input. I just have no idea how to write one! I feel like such a noob here, you guys are awesome and I wish I could give back as much as you guys give me!

Rasikh Mashhadi Over a year ago

If you want to validate css via regex please refer to stackoverflow.com/questions/7569853/verify-css-is-valid-syntax

Gumbo Over a year ago

Not such a good solution: foo:expresexpressionsion(…) will result in foo:expression(…).

|

Martin Bean · Accepted Answer · 2012-12-14 11:27:50Z

-4

O hai MySpace…

Just give users the ability to specify colours and images from a web form, and construct a user-specific style sheet from that. Allowing users to specify their own CSS in its entirety will just lead to ugly, ugly pages. See: MySpace 1.0.

answered Dec 14, 2012 at 11:27

Martin Bean

39.6k28 gold badges134 silver badges207 bronze badges

2 Comments

Jade Elizabeth Over a year ago

No I don't want to do that because there are too many options to cover.

Martin Bean Over a year ago

Enjoy never ending security concerns and ugly user-generated pages then!

Collectives™ on Stack Overflow

How do I ensure user input is CSS and not malicious code?

3 Answers 3

5 Comments

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related