6 replies to this topic

[drcrazy4]

I am making a feature on a social networking website I am working on where users can edit the CSS of their profiles and the site is pretty much secure. This is where the problem is because I have no idea how CSS can be submitted securely. Has anybody else came across this problem or has a solution? It would be greatly appreciated and you might just get a mention on the about page when I release it .

[rc69]

I'm curious as to what you mean by submitting it securely. If you are interested only in taking a users input and verifying that it is what you intened for them to submit, that is one thing. If you are talking about accepting only CSS that is secure for end-users, that is something else.

One thing i can recommend is checking out the use of expressions and behaviors in CSS (basically embedded javascript inside of the CSS). If there is one thing you don't want, it is a user that knows how to use these.

Outside of that, you'll probably want a way of parsing the CSS to make sure it is just CSS. But i'll let you know, i've tried an SQL parser once, and i can't imagine how much more difficult a CSS one would be.

Edited by rc69, 11 November 2007 - 03:56 PM.

[drcrazy4]

Pretty much both really. If anybody knows any libraries or anything for checking CSS in PHP that would be the solution I think. Maybe I will look into how MySpace do it.

[rc69]

If you copy how myspace does it i'll have to shoot you. They disallow the pound sign for no good reason... Other then that, i don't know much of anything else about what they do.

But i guess with that exception, they'd be the place to study what you're trying to accomplish.

Edited by rc69, 12 November 2007 - 09:21 PM.

[Demonslay]

I can't really see how a valid CSS parser would be difficult. Just simple regex to filter out any nasty hacks, and some more to make sure it is in the expected 'property:value;' format, accepting only valid properties and value pairs.

Or, better yet, you can send it through W3C Validator...

Simply send the text through the urlencode() function and refer it to their page at the address 'http://jigsaw.w3.org/css-validator/validator?text=' and then parse the result page to read their response.

[rc69]

Well, that brings up a problem.

My understanding is that he want's safe CSS, that doesn't imply that the CSS be valid, just that it doesn't contain anything potentially harmful (i.e. expressions). I know that my level of understanding is no where near what it would need to be (have a CSS1 understanding, and CSS3 being in existence) in order to write a bit of regex to match much.
I also know there are a ton of properties out there, some valid, some not. I would hate to index the W3C sactioned ones, let alone the browser specific ones (or more specifically, the IE ones...).

And again, we would send it to the W3C in order to validate it, which is again, not fool proof. I write CSS which makes use of certain hacks that don't validate, but in no way harm the user experience. Again, i would hate to write a parser to look for certain errors in the HTML of the W3C's validator.

I may be overcomplicating or misinterpreting things here a bit, but i still don't see this as a simple task. Working with the security of any language is not easy in my opinion; it is why they have only 2 options for the use of JS, on or off.

[Wildhoney]

It is a tough one this. I have made a start on the regular expression. Basically, if the CSS is valid then it'll place it into the $aMatches array. One immediate problem springs to mind, namely, the background will not match because the file name could be anything at all and so it's entirely up to you. You could replace it with .* to match everything, but that would be defeating the object. The other two match perfectly fine, however.

$szCSS =
'
	color: red;
	font-family: Tahoma, Verdana;
	background: url("background.jpg");
';

var_dump(preg_match_all('~[a-z\-]+:\s*[a-z,\s\(\)#]+;~iU', $szCSS, $aMatches));

print_r($aMatches[0]);

Edited by Wildhoney, 05 December 2007 - 07:34 PM.