The CSS Cleaner and You: Partners in History

Some folks have wondered what the mysterious messages about "suspect CSS" mean. Now's your chance to find out!

A brief introduction for the folks who may not have heard about this: CSS, AKA Cascading Style Sheets, are the tool used on well-behaved web pages to send style information to your browser; layout, color, positioning, and so on. HTML describes what an element is (a paragraph, a header, an emphasized word, a link) and stylesheets tell your browser how that should be rendered (separate all paragraphs by seven pixels, make every header eighteen-point bold text, emphasize words by coloring them orange, links should be underlined and purple). Most S1 overrides and S2 styles use CSS to create certain looks for your journal, and S2 styles actually have a large box which you can use to enter your own CSS code to override the style's code if you like.

There's an unfortunate consequence to that last part, though: some unscrupulous journal owners could put harmful code in their CSS, that exploited vulnerabilities in some browsers to create unfortunate consequences. The CSS Cleaner is the solution to that problem: it looks for things that look nasty in the CSS code and yanks those things out before transmitting it to the client. Unfortunately, some people may have perfectly innocent CSS code which /looks/ like hostile code and also gets edited out. This post is meant to explain what the CSS cleaner does, so that volunteers working in Styles can understand why the messages are showing up and what to do about them. (And, e.g., write tutorials in howto about fixing problems, etc.)

Please note that this post is based only on my reading of the CSS cleaner. I didn't write the thing, so I may be missing some intricacy; I am certain that I'll be corrected if that's the case. Largely, though, this information should be correct, since the code is relatively straightforward. I will edit this post to accommodate any corrections that need to be made.

The CSS cleaner does two scans of the code; once before removing the comments from it, and once afterwards. (This prevents tricky things like having a hostile instruction with a giant comment in the middle, which a browser would ignore but a CSS cleaner might miss.) Whitespace is also ignored. So code which is separated by large stretches of comments and line breaks may still be stripped, and that can be harder to detect. Before the cleaner begins its scan, it converts HTML entities into their corresponding character values. So, for instance, % would become %.

The following table summarizes what is removed and what it is replaced with. In each case, the "replaced with" message will look like this: /* suspect CSS: [message] */. (The /* and */ are signals to browsers that the code in between is a comment, not to be handled as CSS code.) In stylesheets, the code will also be marked with the text /* Cleaned CSS: */ whether it's been stripped or not. (You can also add style information to HTML elements directly. That code will be checked, but not marked in this way.)

Phew. Now, keep in mind this text can be anywhere in your code. For instance, the following (completely innocent) code would get my CSS axed in four separate ways:

.this-sucks { /* I really hate JavaScript or "livescript" stuff, and also <font> tags. */
   color: #000000;
}

And that's about it. If you've got any questions or comments... well, you know what to do!