How can the client side encoding be bypassed in XSS

Question

I hear everyone saying Output encoding has to be done client-side instead of server-side. My question is: doesnt it vary with context?

1. Are there cases where client-side output encoding is good enough and cant be bypassed?
2. If I use a client side js function like encodeURIComponent to encode a url causing XSS, how can an attacker bypass this and still cause XSS?
3. Phishing can also happen due to XSS. If I at least do output encoding can phishing be prevented?

Answer 1

The short answer is that XSS encoding needs to happen where data is put into html or javascript be it server-sider and/or client-side. I could easily imagine data put into a script tag on the server side begin properly encoded, but then javascript on the client-side is using that value in an insecure way, creating an XSS vulnerability.

So when putting untrusted data into a web page (be it in a html tag, inside -tags, in css. etc - see the OWASP XSS prevention cheat sheet) we need to encode. Then when we come to the client side, we also need to make sure our javascript does not introduce XSS-problems. This could for instance be DOM-based XSS, or the example mentioned above.

So my answer is, you need to do encoding both on the server AND client side.

I don't understand how the 3rd question is related. Phishing could happen in so many different ways. On a completely different domain just mimicking the original page etc.

Edit: One more thing. If utrusted data is put into the page server side without encoding, there is very little the client side can do to fix that. It's most likely already to late.

Answer 2

Erlend answer is beautiful. I want to share my findings regarding output encoding.

Output encoding done in server side is better that in client side.

You can get more knowledge regarding output encoding from OWASP Xss Prevention

and you can do this client side too. If you are going to use un trusted(user given input) data in html context, please use javascript's native api innerText IE Docs ( textContent for moz) or encoding the characters (<,>,',",/,) into html entity