Why is this query string invalid?

Question

In my asp.net mvc page I create a link that renders as followed:

http://localhost:3035/Formula/OverView?colorId=349405&paintCode=744&name=BRILLANT%20SILVER&formulaId=570230

According to the W3C validator, this is not correct and it errors after the first ampersand. It complains about the & not being encoded and the entity &p not recognised etc.

AFAIK the & shouldn't be encoded because it is a separator for the key value pair.

For those who care: I send these pars as querystring and not as "/" seperated values because there is no decent way of passing on optional parameters that I know of.

To put all the bits together:

• an anchor (<a>) tag's href attribute needs an encoded value
• & encodes to &amp;
• to encode an '&' when it is part of your parameter's value, use %26

Wouldn't encoding the ampersand into & make it part of my parameter's value? I need it to seperate the second variable from the first

Indeed, by encoding my href value, I do get rid of the errors. What I'm wondering now however is what to do if for example my colorId would be "123&456", where the ampersand is part of the value. Since the separator has to be encoded, what to do with encoded ampersands. Do they need to be encoded twice so to speak?

So to get the url:

www.mySite.com/search?query=123&456&page=1

What should my href value be?

Also, I think I'm about the first person in the world to care about this.. go check the www and count the pages that get their query string validated in the W3C validator..

Answer 1

Entities which are part of the attributes should be encoded, generally. Thus you need &amp; instead of just &

It works even if it doesn't validate because most browsers are very, very, very lenient in what to accept.

In addition, if you are outputting XHTML you have to encode every entity everywhere, not just inside the attributes.

Answer 2

All HTML attributes need to use character entities. You only don't need to change & into &amp; within script blocks.

<a href="http://localhost:3035/Formula/OverView?colorId=349405&amp;paintCode=744&amp;name=BRILLANT%20SILVER&amp;formulaId=570230">Whatever</a>

Anywhere in an HTML document that you want an & to display directly next to something other than whitespace, you need to use the character entity &amp;. If it is part of an attribute, the &amp; will work as though it was an &. If the document is XHTML, you need to use character entities everywhere, even if you don't have something immediately next to the &. You can also use other character entities as part of attributes to treat them as though they were the actual characters.

If you want to use an ampersand as part of a URL in a way other than as a separator for parameters, you should use %26.

As an example...

<a href="http://localhost/Hello?name=Bob&amp;text=you%20%26%20me%20&quot;forever&quot;">Hello</a>

Would send the user to http://localhost/Hello, with name=Bob and text=you & me "forever".

Answer 3

This is a slightly confusing concept to some people, I've found. When you put & in a HTML page, such as in <a href="abc?def=5&amp;ghi=10">, the URL is actually abc?def=5&ghi=10. The HTML parser converts the entity to an ampersand.

Think of exactly the same as how you need to escape quotes in a string:

// though you define your string like this:
myString = "this is \"something\" you know?"

// the string is ACTUALLY: this is "something" you know?

// when you look at the HTML, you see:
<a href="foo?bar=1&amp;baz=2">

// but the url is ACTUALLY: foo?bar=1&bar=2