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

Answer 1

When a user is logged in, add a separate 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.