How do I ensure user input is CSS and not maliciou

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.