This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Cross Site Scripting in CSS Stylesheets
I'm considering allowing users to create their own CSS through linked stylesheets (NOT embedded style tags). Can an XSS attack be performed from a stylesheet?
Thanks
In Internet Explorer, Firefox and other browsers you can embed JavaScript in CSS by specifying a javascript: URL in a url() CSS statement.
Even if you manage to filter these out, an attacker can still completely redesign the page (including all of its textual content) with advanced CSS. Therefore, it becomes extremely easy to trick users to execute stupid actions, which is what XSS is about. For example, you could make the Delete Account button fill the entire window and change its text to "Click here to win 1000$".
You can white-list a select few properties (text-*, font-*, color, background (only colors and gradients, no URLs or other fancy stuff)), but you'll have to reject anything that does not match these restrictions.
Interesting question. I can imagine the style sheet having the ability to remove or hide elements which can be a security problem. You can also insert text after a certain element using :after and :before so you might want to be careful about that.
Alternately I think you should include their style sheet first so that they don't suddenly change all your fonts or something global.
those are old hacks but might still work in older browser, for example you can put javascript protocol in href attr.
http://ha.ckers.org/xss.html
(search for style)
Related
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
I am writing some CSS that should create some generated content.
.foo:visited::after {
display: inline;
content: " visited";
}
However, it has no effect.
If I change the selector to just .foo::after, it works.
Similarly, my styles for .foo:visited take effect.
The Safari web inspector is even showing my styles for :visited::after as if they are in effect!
Why can’t I see my generated content?
Browsers limit the styles you are allowed to modify on a visited link, and even lie to you if you query for the current color of the link with JavaScript.
Why?
Because otherwise, you, at scumbag-advertising.example.com, can run a bunch of JavaScript to see what websites (or at least URLs) are in the browser’s history!
For more, see :visited on MDN and this longer explanation of how this privacy hole was closed:
Historically, the CSS :visited selector has been a way for sites to query the user's history, by using getComputedStyle() or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity.
A number of years ago, browsers patched up this hole by limiting changes and lying about color.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Stop CSS styles to be applied in particular sections of the code
HTML code inserted into WordPress with many plugins (each of them probably has it's own style) inherit global styles automatically.
An approach is to find unwanted styles and override them. Sometimes it's difficult to find it as in my case)
How can I define an HTML object to be clean from base and don't inherit any style from the page ?
According to the browser, it's the built in style: the border-spacing is set to 2px.
I think you meant to clear this with cellspacing=0, but the page is an HTML5 page, which doesn't support this attribute.
That said, there's some advice for you. Using tables for mark-up is outdated. You may get away with it, but if you are creating an html 5 page, you should obey the rules that come with it. :) It turns out that it isn't any of the WordPress CSS that is bothering you. It was just the built-in style, which could not be overruled using outdated attributes. :)
For the future, in most browsers you can inspect the elements and their properties. In Chrome this is built in, in FireFox I think you still need to install the FireBug plugin. With that, you can right-click -> inspect element and then check the element or its parent to see what is going on:
I am designing a website, and am going to be implementing a sort of say "Wiki". I am not doing a script, none of that, it's going to be pure XHTML and CSS.
What I want to know from the StackOverflow community, is how I should approach this scenario.
I want to be able to pull out an external stylesheet, in which is lightweight, while maintaining the style sheet for the overall design (because, like I said, it's being implemented).
So instead of basically copying and pasting the style sheet used from the entire design, I want to be able to call and external style sheet, in which I can call for the specific divs used in the Mini Wiki.
I want to know how I can call that said style sheet, before the divs that are going to be called in the HTML document, so the following divs can have the custom styles applied through the specified external style sheet for the Mini Wiki.
Is that possible? Is it possible to call an external style sheet in a div, allowing the styles to override the default style sheet of the page? I am confused and would love some help. I want some feedback and some ideas.
No, this isn't possible.
A stylesheet can only be applied to an entire document.
You can limit a rule-set to a section of the document by using a descendant combinator.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
So in my interweb travels of evaluating other programmer's CSS I've noticed a bunch of people using the underscore or asterisk hack that is vendor specific to IE browsers for debugging purposes though W3C does not parse this as valid CSS.
I personally prefer comment conditionals where you can at least defer to IE specific CSS that is valid but I guess the only issue with that would be addition of extra CSS.
So I'm curious about a consensus of what you prefer and the positive or negative implications of each method.
Comment conditonals or IE vendor specific hacks?
PS - Honestly this should be titled do you support IE layout or not :-)
Conditional style sheets are the way to go. The word hack itself implies that you're doing something that you shouldn't. But a few short words on both:
Conditional style sheets
(+) Cleaner CSS code
(+) Easier to manage
(+)Easiey to understand for other developers
(+) CSS validates
(-)More CSS files (thus more server load)
Hacks
(+) Faster (possibly)
(-) Messes up your CSS
(-) CSS doesn't validate
(-) Very unclear for other developers (especially non-experienced one's)
(-) Could cause problems with newer versions of IE
I prefer the conditional comments, because it makes your page still validate. I could imagine, however, that you use the vendor hacks, because you won't need an extra css file, saving a request per page loaded (if not for caching, of course). Then again, the css files are cached, and if you use your conditionals wisely, you can make a separate file per IE version, copying hacks if they are needed for more than one version. That way, you need at most one extra css per page, which is then cached as well, thus minimizing the extra load.