Try and view the source | Hacker News Reader

Try and view the source

kurlak.com

168 pointsohashi79 comments

I hit F12 in Chromium, dev tools open with the tree, knowing that I'm viewing the DOM and not the source I hit the Resources tab, and there is the source.

Not a problem at all.

In fact, I had to remember to go back to right clicking and View Source to try and figure out why this was so highly ranked and lots of the comments confused me.

Now I see why... but just like using JavaScript to try and detect right click, using replace state to try and obscure the source isn't likely to be effective in any reasonable way. I guess that's not the point, that this is more fun than anything someone will do, except... I bet someone does it on their live site.

> I bet someone does it on their live site.

I doubt it, as this method breaks forward/back functionality, thus probably breaking most sites.

Having said that, for all links, you could do a further re-write using the history API, before allowing the redirect to take place. I guess that would actually make it usable even if, as you say, it's futile in the end.

Many sites (hi, Twitter; #! you, too!) happily break the back button. It is a standard technique to "boost" engagement and "reduce" bounce rate. Seems spiritually inline line with this view-source gimmick.

Well, it's not really the same.

On Twitter if I'm viewing an individual tweet page, and then click onto the authors profile page, and then click "back" in my browser, I will not be redirected to a different page altogether like in the OP's demo.

There is a problem, of course. Going to the new url fails to render the site, so view source won't work but neither will bookmarks. And you DON'T want to prevent bookmarking. But good to know this works.

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...

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

  curl -v -H 'User-agent: Mozilla/5.0' 'http://www.kurlak.com/john/source.html'

It says Chrome or Firefox.

Worked just fine for me in Chrome but that's why I love noscript.

You can also just type the view-source url directly into the address bar: view-source:http://www.kurlak.com/john/source.html

In chrome you can easily view the current source by opening the elements section of Developer Tools.

'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.

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.

found in 5 seconds, with firefox: ctrl+A, right click with mouse, View Selection Source

<html><head> <title>Source</title> <meta charset="UTF-8"> <script type="text/javascript"> history.replaceState(null, null, String.fromCharCode(8238) + 'lmth.ecruos'); </script> </head> <body> <p>Can you view my source from Chrome or Firefox?</p>

</body></html>

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.

Yes I can view the source: https://gist.github.com/2097197

You do know about `curl`, right?

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>

<!DOCTYPE html> <html> <head> <title>Source</title> <meta charset="UTF-8"> <script type="text/javascript"> history.replaceState(null, null, String.fromCharCode(8238) + 'lmth.ecruos'); </script> </head> <body> <p>Can you view my source from Chrome or Firefox?</p> </body> </html>

This is on Firefox version 11.0. The creator of this page forgot the Firefox ecosystem has this nifty plug-in called NoScript.

Less clever than other people's solutions, but save-as works too.

In Chrome at least, it also breaks going back to the cached page after first view using back/forward navigation. (Try clicking the link from HN, go "back", then go "forward" again.) This might be obvious to people who know anything about browser caching, but I thought it was kinda interesting.

FF 3.6.26 complained "Error: history.replaceState is not a function: http://www.kurlak.com/john/source.html at line 7". Source opened just fine.

This is very interesting. I tried with the View Source option. Failed. But using the Debugger I got this:

<!DOCTYPE html> <html> <head> <title>Source</title> <meta charset="UTF-8"> <script type="text/javascript"> history.replaceState(null, null, 'source.html' + String.fromCharCode(8237)); </script> </head> <body> <p>Can you view my source from Chrome?</p> </body> </html>

Simple with Firebug: <!DOCTYPE html> <html> <head> <title>Source</title> <meta charset="UTF-8"> <script type="text/javascript"> history.replaceState(null, null, 'source.html' + String.fromCharCode(8237)); </script> </head> <body> <p>Can you view my source from Chrome?</p> </body> </html>

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?

I loaded the page, went to Firebug script panel, set a breakpoint on the line of javascript, hit F5, when the breakpoint got hit, I just hit escape to prevent it from running. Then, Ctrl-U as usual.

Chrome is broken on my machine (proxy issues) so I didn't test there, but I assume the same technique would work.

IE seems to be the only browser not requesting the source again, which is what you would expect...

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.

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.

of course i had noscript!

Can you view my source from Chrome or Firefox?</p> </body> </html>

Firebug for Firefox shows this. http://cl.ly/3B3d2u1I1g0V2w1d3H1C

View Source works just fine in Opera!

You can use firebug to view source

Okay, I'm viewing the source in chrome.

http://imgur.com/KPVks

Now what?

Right Click -> Inspect Element -> Resources . It was easy that way!

Chrome: Tools -> Developer tools. Then select resources. Done.

Yes, I do inspect element and I can see the page source.

Couldn't this have been done with a cookie and caching?

Ctrl-F5 would then cause the new page to show rather than the original.

Great idea though.

Can view the source without any problems in Opera.

Firefox's Inspector views the source just fine.

wget http://www.kurlak.com/john/source.html

your secret character injection is sneaky. props. i see a potential for URL spoofing.

Clever. Ctrl-Shift-I in Chrome.

That shows you the current DOM, not the original source.

Works fine in midori.

Clever trick!

cute trick. I'll definitely use it as an extra security measure next time I'm working on something that leaks an id in the source

you mean an extra obscurity measure.

Please post the URL of your site, so we can all enjoy the functionality and not see any leaked IDs. And some AWS functionality would be great, I would love to use EC2 cluster computes on the "free" teir...

I fired up Fiddler to see what was going on... but can't see the issue... what am I missing? Fiddler is showing me it's returned text/plain!

I can't remember the last time I hit View Source. I always check via the Chrome Developer Tools.

Interesting hack nevertheless.

Used the Pendule plugin to view the source.

But otherwise, very clever.

command-shift + i => source

most people i know view source this way

F12 also will open the dev tools panel, in Chrome.

$ 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>

Reply on news.ycombinator.com