According to OWASP recommendations, CSS values from an untrusted source should be escaped.
Link to OWASP cheat sheet: https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.234_-_CSS_Escape_And_Strictly_Validate_Before_Inserting_Untrusted_Data_into_HTML_Style_Property_Values
In an attempt to follow these recommendations I am escaping my CSS values using Microsoft's AntiXss library, specifically System.Web.Security.AntiXss.AntiXssEncoder.CssEncode(value).
This produces a stylesheet that looks like this:
a,
a:visited {
color:\00002329c;
}
a:hover,
a:active {
color:\000023036;
}
body {
background:\000023eee;
color:\000023333;
font-family:Arial;
font-size:15px;
}
This works fine for IE and Chrome, but Firefox will not recognize the escaped values.
Is this a bug with Firefox or am I misinterpreting how to implement the OWASP recommendation? Also, if this is a Firefox shortcoming then what is the best work around?
I did a quick POC, and at the outset it does look a bug in firefox. For simplicity here's the code I used and tried to open this webpage in IE, Chrome, Safari, and Firefox. With IE, Chrome, and Safari, the background gets changed to #FFCCCC, however in Firefox there is an error in the console.
"Stylesheet could not be loaded." Expected color but found '\#FFCCCC'. Error in parsing value for 'background'. Declaration dropped.
Sample Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body {
background:\000023FFCCCC;
font-family:Arial;
font-size:15px;
}
</style>
</head>
<body>
<p>Test</p>
</body>
</html>
Out of curiosity, I have gone ahead and raised a bug with Mozilla here - https://bugzilla.mozilla.org/show_bug.cgi?id=1172570
I also doubted that it could be an issue with respect to the #charset, but couldn't get it to working either. Till the guys at mozilla gets back, if you find a workaround please post back.
This comment is not a "fix", but it sheds some light on the issue.
Unless I am mistaken, this issue only seems to effect sites loaded through standard http but not those loaded securely through https. In other words, Firefox will recognize the escaped values... but only when the site is loaded through https and not http.
http://domain may not load properly but https://domain will.
Related
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
I used the custom cursor property for the task, but it does not work with ie browsers. I used the following snippet.
<html>
<head>
<title>Custom Cursor</title>
<style>
h1{
cursor: url(http://www.franco.it/Images/Lookf.png), auto;
}
</style>
</head>
<body>
<h1>Custom Cursor</h1>
</body>
</html>
It works in Chrome, Firefox, and Safari - everything except IE. Some articles say I should use the .cur format but how do I convert an image to cur? I couldn't find a proper link to convert it.
Thanks.
IE doesn't support png format for cursor.
You need convert to "cur" format.
The css code will look like this
h1{cursor: url(http://myworkstudio.com/app/cursor1.cur), pointer}
You can refer below url:
http://chevronscode.com/index.php/ie-custom-cursor.html
I am currently setting up a new page and wanted to test it with the Internet Explorer (9). I thought it was not going to be a problem, because it does work with FireFox, Opera, and Chrome (newest Versions). However, the IE does not attempt to load my style sheet.
I already searched Google and stackoverflow for an answer, but nothing helped.
My page looks as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="UTF-8">
<link href="css/main_styles.css" rel="stylesheet" type="text/css">
</head>
<body>
etc.
Any ideas?
Thanks for your help in advance!
PS: I validated the page and the css styles. No errors found.
Edit (July 2014):
Hey, I'm sorry I forgot to update this question for so long. The answer is simple. I had to put #charset "utf-8"; at the beginning of my stylesheet. That's all it took to make it work. Cheers!
Try changing the reference of the link: href="/css/main_styles.css" or href="../css/main_styles.css"
The most obvious possible cause I can think of for this would be that your server is providing the wrong mime type of the CSS file. It might be that IE is more picky about this sort of thing than the other browsers you've tested.
Check what the mime type is by checking the HTTP headers, either in one of the other browsers debugging tools or with an HTTP sniffing program like Fiddler.
Fiddler will also be good for sniffing exactly what is going on when you try to make the request using IE. Whether it's a mime type issue or something else, this will be the best way to find out exactly what's happening.
Finally, you could also try opening the stylesheet's URL directly in IE. That will prove that IE can access the URL.
Hope that helps.
We had this issue with Internet Explorer 11, it's weird but if you rename the stylesheet to anything without the word "style" it will start working!
This is only the case when the accessing the file local on a machine, on a web server it will work fine
I have an issue with css.
I have a css file which has ie specific css clauses..Like
.ie7 #div
.ie #table
These css is working good in my local on tomcat server.
But the same css is not loading in IE in my dev system which is also running on tomcat.
When I debug the ie is not recognizing the ie specific css clauses. Also I found out that
the IE is not recognizing even the section and header tags.
Please let me know what can be the work around.
Thanks for your time and help.
Regards,
Varma
Assuming you're running IE9..
Make sure you don't have Compatibility Mode turned on, and make sure you have a valid doctype as the very first line to trigger Standards Mode:
<!DOCTYPE html>
If it still doesn't work, then add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Concerning this point:
Also I found out that the IE is not recognizing even the section and
header tags.
In older versions of IE, you need this to make the HTML5 semantic tags work properly:
http://code.google.com/p/html5shiv/
I am relatively new to web development and learning all the time. I have recently come across 'Conditional Comments' when viewing source code for different websites. I think i now understand what they do but am unsure as to when to use them.
I have seen them mainly used for implementing different stylesheets when it comes to IE and would like to know if this is good practice?
In which case if the answer is 'Yes'. Then when developing a site is it 'common place' to use two separate stylesheets to fix bugs, for example create one stylesheet for IE and one for Firefox, Opera etc?
Thanks in advance.
Conditional comments are only supported by IE, as far as I know, and they gracefully downgrade in browsers that don't support them (since they look like a normal comment). The general consensus is that it's OK to use a non-standard browser feature if you're using it to combat another non-standard browser "feature" (i.e. the crappy support for CSS in IE). So you'll find that it's a very common solution for tweaking CSS.
The nature of Internet Explorer (version 6 especially) makes it so that some stylesheets work well with IE, and some don't. For the purposes of those that don't, you can use conditional comments to have CSS code that only displays for IE. I have to use it because of how Internet Explorer (mis)handles CSS dropdown menus.
To make the website I'm working on properly render the hover feature of the dropdown menu, I have to implement the crosshover.htc file. Here's the code I have to use:
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}
</style>
<![endif]-->
If I don't do that, the dropdown menu splits apart and can't be navigated in Internet Explorer 6.
I have used conditional comments to detect if visitors to my site uses IE6 or lower. If that is the case, I load the IE7.js script, which overcomes some of the bugs in these older browsers. There is also a script for emulating IE8 support.
Some people also use comments to help outline certain areas of the page like a footer, header or main content (often in templates).
However if you are using divs and CSS (which it sounds like you are) you should be able to tell what the content is or what area of the HTML you are in by the DIV ids and CSS styles. Remember to use clear names and try not to abbreviate them just for the sake of easier typing.
If that is an issue for you then Intellisense is a wonderful thing and can help us get around stuff like that. If not then CTRL+C and CTRL+V is probably the next best thing :)
This is a great practice! The official documentation page of conditional comments, has many examples and combinations of conditional comments, it's worth reading it. The page also states that:
Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
Nowdays Internet Explorer is the least capable browser, so you're most likely going to use conditional comments to do the exact opposite, that is, to take advantage of the enhanced features offered by all other browsers, while writing pages that downgrade gracefully in Microsoft Internet Explorer.
You can use conditional comments to fix unsupported CSS styles, or to hide code from Internet Explorer, like this:
<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->