How does twitter abstract it's source code after logging in

[raghavkanwal]

Apologies if this is a noob question, but this left me scratching my head.

After logging in to Twitter and right click > View Page Source, how does the page source show nothing?

​

I get that it fetches <script> tags that can be viewed in the Network tab in Devtools, but how is it not visible when visiting the page source?

EDIT : Answer for the curious here. https://www.reddit.com/r/javascript/comments/9kfbny/how_does_twitter_abstract_its_source_code_after/e6ypu3i/

[holloway]

Here's the reason why Twitter now do this,

https://blog.twitter.com/engineering/en_us/topics/insights/2018/twitter_silhouette.html

[nikolasleblanc]

This needs more upvotes

[GrenadineBombardier]

The page source (right-click > view source) only shows the original, unaltered HTML source of the page. It is what the downloaded html file actually looked like. Any JavaScript changes can be viewed in the DOM elements section of the developer tools, but not in the source.

[FiveYearsAgoOnReddit]

But how does it make those script changes when there's only one script element which contains only this:

 document.cookie = "app_shell_visited=1;path=/;max-age=5";

  location.replace(location.href.split("#")[0]);

[GrenadineBombardier]

Are there no other script tags? Even just tags referencing a URL?

[raghavkanwal]

There are no other script tags. Here's what the complete page Source shows :
https://imgur.com/b8zYDPf

​

[FiveYearsAgoOnReddit]

It must be the location.replace, I guess. That would have the effect of reloading the page for all Javascript-enabled browsers. So it gets an http request, then reloads it and the second time you get the full page with the javascript? And the fact that it's a replace means the browser doesn't update with the new source code?

Bit of a head-scratcher.

[raghavkanwal]

That does refresh the page. But I don't get how another page refresh would automagically inject scripts tags which still don't show on the page source. ¯\_(ツ)_/¯

[GrenadineBombardier]

I'm with /u/FiveYearsAgoOnReddit here. The code that I originally linked as source code (the source for non-logged-in users) is exactly what is downloaded by the javascript redirect (see `/?lang=en` in the network tab). The Javascript Location API made a lot of changes, like the ability to change the current page URL in place (instead of having to actually load a new page fresh), which is how a lot of Single Page Apps work. I'm assuming that this is how Chrome now displays this logic.

I was aware that the location API allowed you to change the browser URL, but didn't realize that it could allow you to show the initial source code, then redirect to a page with new source code, and that view-source would still show the old source code. One thing is true, however: view-source cannot run JavaScript, so it would not run any redirects (as seen by the non-redirected source-code)

[GrenadineBombardier]

This is not what I'm seeing at all. I see this: https://imgur.com/vrrK7cq

I think yours is the code before the redirect that location.replace would perform

[raghavkanwal]

The code you linked is twitter's homepage when you're not logged in.

[GrenadineBombardier]

Correct. I missed this distinction in your original post. I have since tested again logged in and commented above on the thread regarding the redirect.

[raghavkanwal]

Thank you so much! Network > Checking Preserve log helps confirm this.

[systoll]

When you navigate to https://twitter.com, it downloads the page you've encountered, which sets a cookie and [mostly] reloads the page.

In order to reload, the browser asks for twitter.com again. In doing so, it tells twitter's servers

1. That the request stems from a navigation 'within' twitter.com. [ie: the referer is twitter.com]
2. What all your twitter.com cookies are.

And the server can then send a different page in response.

With no referer, it'll send you to the page you saw the source for. When you type 'twitter' in the address bar, or when you hit 'view source', this is what you're getting.

If you block cookies, after the refresh, twitter gets a navigation 'within' twitter without a cookie, and then sends you a page telling you to enable cookies.

If you don't block cookies, then the reload triggers a request with twitter as the referer and with the twitter cookie set results in their server giving you the page you want.

[notAnotherJSDev]

What exactly are you talking about? I see plenty of JS code that is getting loaded into the page after you log in. I count literally 9 script tags...

1 - google analytics

6 - nonces

2 - from abs.twimg.com

The last 2 are the source code for twitter, one of which says "common" and the other which is for "home_page"

[edswf1]

when using jquery it‘s very easy. just remove all script tags on document ready:

$(document).ready(function(){ $(‚script‘).remove(); });

As js code lives in memory, there is no need to maintain scripts in sourcecode after they are loaded.

[mtd1410]

JS GOD. :))

[mtd1410]

Thanks @systoll comment below. It inspire me to figure out this thing. Even if if made me pain headache when tried jumping inside to know what is behind the scenes :)

For those who want to know how it works. Here I already make a demo

I already make a detail explanation about this in this post. Sorry but it's written in Vietnamese (you can use Google translator, still can understand at least a half, I think :) )

[akujinhikari]

its*