CSS-Tricks

What is Cross Site Scripting or XSS?

Chris Coyier — Fri, 19 Nov 2010 13:34:18 +0000

I think the name “cross site” is confusing. It’s easy to hear that and think it involves code on one website attacking code on another website. That’s not what it is. Not to mention its unfortunate “true” acronym.

It simply means: executing abritrary JavaScript code on the page.

This could be JavaScript that is inserted into the URL or through form submissions. If either of those ways of accepting information doesn’t “clean” the information it is getting before outputting it again on the page, then arbitrary JavaScript can run on that page and that’s an XSS vulnerability.

If JavaScript can run on the page, then it can access cookies.

If it can access cookies, then it can access active sessions.

If it can access active sessions, it can log in as you to websites you are logged in to, at least long enough to change passwords or other havoc.

Symantec has said that 80% of internet vulnerabilities are due to XSS.

XSS is different from, but similar in spirit to SQL injection. SQL injection is where SQL commands are not cleaned from inputs and thus able to do malicious things to a database. Using HTTPS cannot help with either XSS or SQL injection. HTTPS only protects data in transit over networks.

I’m not a security expert, I’m just helping spread the word: let’s scrub those inputs people! Here’s a start.

If you have more to add, or think I have it all wrong, let’s have it!

20 Things I Learned about Browsers and the Web

Chris Coyier — Fri, 19 Nov 2010 01:03:30 +0000

Really neat presentation of a book by the Google Chrome Team. Everyone seems to be calling it an “HTML5″ book There is certainly a bunch of HTML5 going on, but there is also loads of CSS3 and clever JavaScript at work. Read a few pages then close the tab and then go back to it to check out a fun bookmarking idea.

Of particular interest is how they are using window.history.pushState() and window.history.replaceState() to change the URL in the browser window without refreshing the page (view it in WebKit or Fx4). This is definitely the future of Ajaxing sites while maintaining quality deep linking, especially since the fallback is just using a hash tag links which is the current technique of choice.

Direct Link to Article — Permalink

My Slides from the jQuery Summit

Chris Coyier — Thu, 18 Nov 2010 20:51:15 +0000

At this year’s jQuery Summit I gave a mostly-totally-revised version of my talk “Solving Common Client Requests with jQuery” that I originally gave at the Bay Area jQuery Conference earlier this year.

I always think slides are a little weird outside of the context of the talk, but I also know some folks like to see them. These also happen to contain some JS Bin URL’s which might be of some use.

During the talk, I mentioned the ALL AJAX WordPress theme, which has just undergone an update. If you are interested in that, you can read about it and how to get it here.

Hash Tag Links That Don’t Headbutt The Browser Window

Chris Coyier — Tue, 16 Nov 2010 16:08:21 +0000

When a link includes a hash, like this:

Section Two

The browser window will scroll itself (instantly) into such a position where the element with the ID of “section-two” is visible. It scrolls to the minimum possible position to make that element wholly visible. This is typically a matter of scrolling the window down, but do note that if any scrollable parent container were to require horizontal scrolling to make the element visible, the browser will do that as well. I think of this as “headbutting” the browser as the element is flush with the top edge of the browser window.

This can be:

Possibly aesthetically un-pleasing
Possibly confusing (especially when you jump into a area with loads of other headers)
In the case of a fixed-position stay-on-top header, hugely problematic

The fixed position header thing is the biggest threat, so let’s use that as an example and fix it.

Rock Solid (Dirty HTML) Method

Instead of focusing on the most progressive way to handle it first like we usually do, let’s look at the most cross-browser compatible possible way to get it done.

Instead of putting the ID on the header, we’ll put it on an empty span tag within the header. This won’t affect the appearance of the header at all. However, using a span for a purely behavior thing like this isn’t ideal.

Jump
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:      
//AN_Xml:   Header
//AN_Xml:

Then in the CSS, we’ll suck up the span north of the actual header with negative top margin. Then we’ll push the header back down via positive bottom padding, mitigating any weird layout problems that the suck-up will cause.

h2 span {
//AN_Xml:  margin-top: -300px;        /* Size of fixed header */
//AN_Xml:  padding-bottom: 300px;
//AN_Xml:  display: block;
//AN_Xml:}

Ideally, we would just absolutely position the span on top of the header, but IE7 doesn’t play nice with that, ignoring the jumps all together. IE6 has major issues with fixed positioning, so this demo is borked in that, and let’s not go there, although I’m sure this idea basically works in it if you can shim the fixed position issue.

View Demo

Fancier (Clean HTML) Method

Using the extra span is non-semantic for two reasons: 1) You are associating the link directly to an empty span, which is meaningless. 2) The span shouldn’t be in there at all. The HTML should be:

Jump
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:Header

Then to solve the headbutting/padding issue, we’ll use a pseudo element to do the same task that the span was doing in our dirty HTML version. We’ll give it a height, which pushes up the size of the header, then use negative margin to yank it back up into place.

h2:before {
//AN_Xml:  display: block;
//AN_Xml:  content: " ";
//AN_Xml:  margin-top: -285px;
//AN_Xml:  height: 285px;
//AN_Xml:  visibility: hidden;
//AN_Xml:}

View Demo

More from Nicolas Gallagher

I posted the original idea for this over on Forrst, and Nicolas Gallagher picked up on it and ran with it, as Nic likes to do =). He points out that the height/margin technique can be a problem if you have a background on the headers and don’t want that to expand. He prevents that by experimenting with background-clip, using a under-border, and others. And big props to Ira McMahon for spurring the idea on Forrst.

View Demo

As part of Nic’s demos, he uses :target to change the color of the header after “the jump”. This is a great reminder of that pseudo selector and a perfect use for it. Target will match when the hash tag in the URL matches the ID of an element. Quick reminder: if the URL is http://blahblahblah.com/#header-one and there is an element like

`Whatup`

then this selector will match h2:target { background: yellow; }.

Show Image Under Text (with Acceptable Fallback)

Chris Coyier — Fri, 12 Nov 2010 15:20:55 +0000

WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a gradient to animate through the background of the text. Then we touched on it again for the transparent borders idea.

Let’s take a look at using it to have an image be visibile only through the letters of the text. One more cool thing that we no longer need to drool over print designers ability to do.

View Demo

The Basic Idea

h1 {
//AN_Xml:   color: white;  /* Fallback: assume this color ON TOP of image */
//AN_Xml:   background: url(images/fire.jpg) no-repeat;
//AN_Xml:   -webkit-background-clip: text;
//AN_Xml:   -webkit-text-fill-color: transparent;
//AN_Xml:}

That’s all there is to it. Set a background image on the element, then clip it out, and set the text fill color to transparent.

The Problem

As I’m sure everyone is painfully aware, this isn’t going to work in all browsers. The current support is WebKit only. So what happens for a fallback? As you can see in the code above, you declare a color value as well. This value gets overridden by -webkit-text-fill-color in browsers that support it, so we’re clear there. Then in browsers that don’t support -webkit-background-clip: text we will see the background image in full, so we will see text on top of that background image. So if you read no further, set a color value that will be nice and visible on that background image.

So we get this going on:

Not the absolute end of the world, at least we prepared the text to be somewhat readable. But this is a long way from what we envision and what WebKit users will experience. Basically: that fallback sucks, let’s do better.

A Better Fallback

The ultimate tool for better fallbacks is Modernizr. Simply include the (fairly small) JavaScript file on your page, and it adds classnames to the html tag of your page indicating what the current browser is capable of. It also provides an API for testing features in JavaScript, but we won’t need that today.

Unfortunately, Modernizr doesn’t have a test for background-clip right out of the box. I asked one of the creators, Paul Irish, who hooked me up with this quick way to add this test. The whole bit:

CSS-Tricks

What is Cross Site Scripting or XSS?

20 Things I Learned about Browsers and the Web

My Slides from the jQuery Summit

Hash Tag Links That Don’t Headbutt The Browser Window

Rock Solid (Dirty HTML) Method

//AN_Xml: //AN_Xml: Header //AN_Xml:

Fancier (Clean HTML) Method

Header

More from Nicolas Gallagher

Whatup

Show Image Under Text (with Acceptable Fallback)

The Basic Idea

The Problem

A Better Fallback

`Whatup`