I'm allowing user css.
I'm taking their css input, creating a style, and just inserting it.
Are there any security issues I need to consider.
Do I need to validate that css?
Thanks.
Yes you do need to be careful, you can take a look at these for more info:
Ultimate XSS CSS Injection
HTML/CSS Injections - Primitive Malicious Code (or, What’s the worst that could happen?)
Related
I have an application where I could customize HTML templates depending on requirement of client. It has a provision of including CSS style scripts when creating a template which would be injected at the end when generating the template. By this way, client/support person could dynamically generate variety of HTML templates.
But when I give this project for a security scan, all the CSS injections are detected as security vulnerabilities (XSS Injections). My Application itself designed based on the CSS injection as it is required to create dynamic HTML template without the involvement of a developer.
Is there a way to prevent XSS security flaws at the same time of achieving application's end result?
Please let me know if there is an alternative way of doing this.
Allowing untrusted CSS input is an XSS flaw as it could be used for redressing the UI. For example, a malicious user could make their text and content appear to be authoritative text coming from the website itself by dressing it with the same style and positioning.
See the Google Browser Security Handbook for more information.
There are also ways to get script to run via CSS:
The risk of JavaScript execution. As a little-known feature, some CSS
implementations permit JavaScript code to be embedded in stylesheets.
There are at least three ways to achieve this goal: by using the
expression(...) directive, which gives the ability to evaluate
arbitrary JavaScript statements and use their value as a CSS
parameter; by using the url('javascript:...') directive on properties
that support it; or by invoking browser-specific features such as the
-moz-binding mechanism of Firefox.
Script execution via -moz-binding is available on Firefox 2 and 3. The Google Browser Security Handbook doesn't appear to have been updated since Firefox 3. This post indicates this is now fixed so that the XML file has to be readable from your own domain. XBL doesn't seem to be possible in current versions of Firefox.
In Internet Explorer 10 and earlier HTML Components allow script execution in CSS.
You can mitigate the risk of untrusted content by implementing an HTML5 sandbox. Also consider implementing a Content Security Policy with sanitisation to prevent users from escaping from your CSS context in any way (I haven't seen your code, but I wonder if a user enters </style> as part of the CSS, whether it allows them to escape the style tag?).
I'm doing work on a website, and a user can create a custom CSS stylesheet. I understand that there will always be a danger in this, but is there any way that I could make my validation more secure? I'm using this:
$customCSS = $_POST["submittedCustomCSS"]; //put user's submitted stylesheet into variable
$customCSS = htmlspecialchars($customCSS); //hopefully validate it?
file_put_contents("../custom.css", $customCSS); //save user's stylesheet
The page the custom CSS is displayed on is PHP-enabled, and the CSS is shown through <link rel="stylesheet" href="<?php echo $postID; ?>/custom.css">
Is there any way to make this more secure? Thanks in advance! :)
htmlspecialchars($customCSS); //hopefully validate it?
No, this is not sufficient. This may stop the CSS from escaping a </style> element in which it is embedded, but does nothing to prevent the CSS from styling arbitrary elements on the page, or from loading custom fonts or from abusing other problematic features of CSS whose security implications are still poorly understood.
If a custom stylesheet can be applied to any page that it's author cannot access, then you need to be significantly more strict than this. There are ways that custom stylesheets can be exploited to steal data like Credit-Card numbers or XSRF tokens that don't need to run JS.
For example, if one user can elect to use another user's custom stylesheet, then that could lead to a security vulnerability, and you should not require users to be able to read and vet a CSS file to use features of your site safely.
"Scriptless Attacks – Stealing the Pie Without Touching the Sill" explains some of the ways injected CSS can be problematic:
We show that CSS markup, which is traditionally considered to be only
used for decoration/display purposes, actually enables an
attacker to perform malicious activities.
...
We introduce several novel attacks that we call
scriptless attacks, as an attacker can obtain the credit card
number by injecting markup to this page without relying on
any kind of (JavaScript) code execution.
...
Neither of the discussed attacks depends on user interaction
on the victim’s part, but uses a mix of benign HTML, CSS
and Web Open Font Format (WOFF [23]) features combined
with a HTTP-request-based side channel to measure and ex-
filtrate almost arbitrary data displayed on the website.
Because Microsoft added CSS expressions as a proprietary extension to Internet Explorer, handling untrusted CSS securely is more complex than simply encoding it correctly. To do this properly you need to parse the CSS then only output things matching a whitelist. Unless you do this, it's trivial to inject JavaScript into the page for Internet Explorer visitors.
An alternative approach would be to only accept valid CSS, however I'd be concerned that Microsoft might try to sneak something in inside comments or something like they did with HTML.
I need to implement a flexible styling system for web pages that are created by users of my web application.
Ideally I would like to allow them to use CSS. Is linking to a style sheet at a user defined url a Bad Idea? Why? Is it possible to do this safely?
What would your approach to this be? I am trying to avoid building a style 'editor'. Though using an off the shelf one might be an option, suggestions?
Is it possible to do this safely?
Depends on how you define "safely". An external style sheet could make things look ugly, or play shenanigans with existing control elements on the site. You won't be able to prevent that as it's going to be impossible to detect. Here is a nice overview of malicious things one can do that way.
Also, obviously, CSS can trigger requests to any kind of URL by setting a background-image or similar. The browser will notice if the URL is not a valid image resource but the request will always happen. This way, one could provoke a password prompt to come up that the site's user may mistake for his own login prompt.
I'm not aware of any scripting attack vectors through CSS, although I'm pretty sure that IE's behavior could be one. I would definitely strip out those.
There is a related question on Stack Overflow but none of the vulnerabilities pointed out in the accepted answer works with pure external style sheets.
Yes. It can be a vector. This bit livejournal.
LiveJournal contains a flaw that allows a remote cross site scripting attack. This flaw exists because the application does not validate CSS style attributes in the '/cgi-bin/cleanhtml.pl' script before being saved. This could allow a user to create a specially crafted URL that would execute arbitrary code in a user's browser within the trust relationship between the browser and the server, leading to a loss of integrity. Read more at osvdb.org/21896
Caja's Attack Vectors Wiki explains how expression and moz-binding and similar mechanisms can allow arbitrary code execution.
Effect
Crafted CSS stylesheets can execute unsanitized javascript in the global scope on some browsers.
...
Versions
IE 5 and later (but not IE 8 or later in "standards mode").
Mozilla/Firefox, versions not known.
Example
<div id='oDiv' style='left:expression(alert("hello"), 0)'>
Example DIV
</div>
node.style.cssText = 'left:expression(alert("hello"), 0)';
<input style='-moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox");'>
div {
-moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Cbindings%20id%3D%22xbltestBindings%22%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%0A%20%20%3Cbinding%20id%3D%22xbltest%22%3E%3Ccontent%3EPASS%3C/content%3E%3C/binding%3E%0A%3C/bindings%3E%0A);
}
node.style.MozBinding = 'url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox")';
<ul>
<li style="behavior:url(a1.htc) url(a2.htc)">List Item</li>
</ul>
Is it possible to do this safely?
Yes. You can white-list CSS properties and strip out any you don't judge to be safe.
Caja defines white-lists in JSON format that allow a large subset of CSS to be used while banning those that might execute code.
I'm looking at allowing users of our online system to control their own .css files with us by simply including them on a user by user basis.
What is the best way to avoid any potential XSS attacks in said files?
Is it possible to completely protect ourselves at all?
It would be possible for us to host the files for them and obviously then check them ourselves but it would be more convenient for our users to be able to update them as well.
The problem with allowing CSS is that many clever attacks can occur. CSS can be very dangerous indeed.
Some CSS expressions allow executing arbitrary JavaScript. This is difficult to prevent by blacklisting, so I'd suggest whitelisting.
Additionally, someone may create a CSS file that changes the page to impersonate another site, another page, or maybe it cleverly orients other elements on the page. Imagine if someone were able to position their own login form above your real one. Then they could intercept login requests. Depending on how your site is set up, this may or may not be possible; but be forewarned! Some know this as clickjacking.
Firstly, exercise caution, as others have said. Beyond that though, try and white-list the valid inputs you'd expect in the file. See if you can locate any libraries for your chosen framework (you haven't mentioned what this is), that can validate a string for CSS structure compliance.
The other thing you might to consider is parameterising certain CSS attributes and allowing users to configure them (i.e. color, font etc). This would significantly mitigate your risk as it takes out the ability to arbitrarily create your own malicious CSS (and conversely, create your own innocent CSS!)
As for your original question "Is it possible to completely protect ourselves at all?", that's easy - no!
Are there any dangers or security risks in allowing user css?
Sorry for unspecific question. Possible implementation: having a textarea for users to input custom css, and then taking that css and putting it into a style element: <style type="text/css"></style> with js.
Yes, there are many potential XSS attacks, mostly through putting JavaScript in urls for background-image and whatnot. Search for "style" in the XSS Cheat Sheet for some examples.
There is also the potential that the user CSS could break your site, for example making the navigation menu 0x0 pixels or moving it offscreen to -1000, -1000. Or the CSS itself could reference images from other sites, which you can't guarantee will continue to stay up.
That depends on how you implement that functionality. If you provide a form that allows people to select their own CSS values, then there's an inherent risk of dirty input.
All user input is dirty
What if they write some CSS that hides or obscures something like a login?
There are multiple issues as well, there is a CSS history hack, several XSS vulnerabilities related to url's, and probably more that haven't been thought of.
Always sanitize user input before displaying it on a page.
If the only user affected by the CSS is the user that provided the CSS, then there's not much of a risk. Any XSS vulnerability could only affect the user.
Some browsers allow users to use custom CSS anyway, or ignore it altogether, so I wouldn't consider it a problem.