85 comments

[ 3.2 ms ] story [ 121 ms ] thread
This is why I love NoScript. Viewed it no problems and easily saw what you were doing. Pretty clever trick, thank you.
NoScript is the new antivirus, really.
No, NoScript acts more like a whitelist of executables permitted to run, with all others banned. Browser sandboxes themselves are the new antivirus.

Or alternatively, NoScript is the new lynx.

The problem shown in this example needs fixing in the browser, not by gutting the browser. This example just shows that "view source" should probably make it easier to get at the DOM-generated source. ("View Selection Source" or anything that shows the current DOM will work.)

NoScript + RequestPolicy is awesome. RequestPolicy adds the "missing feature" in my opinion: context aware script loading.
I recently learned about a similar trick that gets around NoScript:

http://citeomatic.com/_asdf.html

(This one only works in Firefox and Opera, not Chrome, sadly)

That one's fun - I thought it was going to be more complicated and never considered the method you used :)
Very cool.

With httpfox I got

html:after { padding-left: 5px; content: 'Can you view my source from Firefox or Opera?'; }

Edit: It's also possible to view the source with Firefox JSview, Web Developer addons and curl.

Nice trick. Spoiler:

  HTTP/1.1 200 OK
  Date: Mon, 19 Mar 2012 08:49:27 GMT
  Server: Apache
  Link: <_asdf.css>;rel="stylesheet";type="text/css";media="all"
  Content-Length: 0
  Connection: close
  Content-Type: text/html; charset=UTF-8
A clever use of history.replaceState and some special characters (to make it less obvious that the state's been altered) - "view source" in Chrome operates on the currently active URL, which after the replaceState has executed is the "not that easily" page.

You can also reproduce the behavior by navigating back, then forwards again - you'll see the "not that easily" page that way, as well (as the "try and view the source" page has been replaced in your history list).

Just to add to this, the "special characters" are "%E2%80%AE" which is the escaped form of the UTF-8 "Right-To-Left Override" control character (which effectively reverses the display of text).

If you try copying the URL to plain-text, you'll see: http://www.kurlak.com/john/%E2%80%AElmth.ecruos

Why is this possible? Is there a way to surpress this weirdness? I want to be able to trust my address bar again.
I believe that RTL character is one of the main failures of UNICODE. This should be part of the markup / rich text, not part of the plain text.
Even without the RTL directive, they might have used something like sourcе.html — which contains a non-ASCII glyph. So while RTL is problematic, I'm not prepared to call it a failure in that generally problematic space of unifying human communication.
I use it when I write Hebrew mixed with English...
Right click: Inspect Element
That shows the current DOM state, not the source that created it. There's a distinction, especially if you use a lot of JavaScript to fiddle with the DOM.
What about (in Chrome) Inspect Element -> Network -> source.html -> Response?
In chrome you can easily view the current source by opening the elements section of Developer Tools.
Clever. Ctrl-Shift-I in Chrome.
That shows you the current DOM, not the original source.
Yes I can view the source: https://gist.github.com/2097197
You do know about `curl`, right?
(comment deleted)
Why use a popular utility when you can write your own in CoffeeScript!?
No need to be snide guys. If you don't know, you don't know. And there's no shame in trying.
Because coffeescript runs in any browser and is easier to install under more platforms and security configurations than curl? The browser is the VM of the Internet. It is more standard that POSIX now, for non-system level user space functions, at least.

    $ cat << ! | nc www.kurlak.com 80
    > GET /john/source.html HTTP/1.1
    > Host: www.kurlak.com
    > User-Agent: Mozilla/5.0 Chrome/1
    > 
    > !
    HTTP/1.1 200 OK
    Date: Mon, 19 Mar 2012 07:44:51 GMT
    Server: Apache
    Last-Modified: Mon, 19 Mar 2012 00:51:24 GMT
    Accept-Ranges: bytes
    Content-Length: 295
    Content-Type: text/html

    <!DOCTYPE html>
Less clever than other people's solutions, but save-as works too.

  curl -v -H 'User-agent: Mozilla/5.0' 'http://www.kurlak.com/john/source.html'
(comment deleted)
It says Chrome or Firefox.
Worked just fine for me in Chrome but that's why I love noscript.
command-shift + i => source

most people i know view source this way

F12 also will open the dev tools panel, in Chrome.
You can use firebug to view source
Right click - Inspect Element (from Chrome) did work for me.
That's actually not viewing the page source though. That's viewing the current DOM state. If the author was more clever he could have left you a little note to that effect.
Yup -- I went (in Mozilla) to the Web Developer plugin's "View Generated Source", which works but likewise is cheating.
Firefox's Inspector views the source just fine.
I used to use this simple trick to hide my source where I would tell Apache to treat JavaScript files as PHP applications and then I'd use sessions to show the file. If the session was missing I would display bogus text.
Ha, nice try! I reverse-engineered it.

<html> <head> <title>Source</title> </head> <body> Can you view my source from Chrome or Firefox? </body> </html>

You missed a paragraph tag. And 'inspect element' in Chrome shows you the source.
Works fine in midori.
$ curl http://www.kurlak.com/john/%E2%80%AElmth.ecruos <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>406 Not Acceptable</title> </head><body> <h1>Not Acceptable</h1>

An appropriate representation of the requested resource /john/‮lmth.ecruos could not be found on this server.</p>

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.</p> </body></html>

View Source works just fine in Opera!
'view source' for me has been command + option + j (dev console) for a while now. It will always show you the live element tree.

That said, pretty neat trick.

That's what I went straight for, too.
Right mouse button > inspect element. Wasn't aware there was another way...
That's not view source. You are looking at the current state of the DOM. Usually, it will be similar, but what you're looking for is the source that your browser received from the server. Inspect element won't give you that.
Chrome: Tools -> Developer tools. Then select resources. Done.