html - Gmailソースはどのように変換されますか？

Question

Gmailを開き、受信トレイアイテムをクリックして、ページのソースを確認します。実際のページに表示されているものに関連する適切なhtmlがないようです。

ソースはどのように実際のページに処理されますか？この情報を処理するJavaScriptはありますか？

Answer 1

GMail はページを機能させるために大量の Java スクリプトを使用します。この JavaScript は HTML DOM を操作しています。

ページのソースを見ると、DOM の現在のコンテンツが表示されていません。HTML DOM を表示するツールを使用する必要があります。私は Opera Dragonfly を使用していますが、他のブラウザ用には他にもたくさんあります。Dragonfly は、ページのスクリプトと、DOM の各要素のイベント ハンドラーを表示します。

2008 年 11 月 3 日編集:

スクリプトへのアクセスのリクエストに応じて、ページを表示すると、スクリプトがすべてインラインで表示されます。他の人が言ったように、それらは難読化されているため、読みにくいです。これは単なるサンプルです：

try{function aa(a,b){return a.appendChild=b}function ba(a,b){return a.textContent=b}function da(a,b){return a.stop=b}function ea(a,b){return a.toString=b}function fa(a,b){return a.length=b}function ga(a,b){return a.title=b}function ha(a,b){return a.position=b}function ia(a,b){return a.create=b}function ja(a,b){return a.className=b}function ka(a,b){return a.width=b}function la(a,b){return a.expand=b}function ma(a,b){return a.abort=b}function na(a,b){return a.data=b}function oa(a,b){return a.next=b}
function pa(a,b){return a.load=b}function d(a,b){return a.innerHTML=b}function qa(a,b){return a.onerror=b}function sa(a,b){return a.getDate=b}function ta(a,b){return a.value=b}function ua(a,b){return a.disabled=b}function va(a,b){return a.dispatchEvent=b}function wa(a,b){return a.currentTarget=b}function xa(a,b){return a.left=b}function ya(a,b){return a.hideFocus=b}function za(a,b){return a.removeChild=b}function Aa(a,b){return a.target=b}function Ba(a,b){return a.screenX=b}
function Ca(a,b){return a.screenY=b}function Da(a,b){return a.send=b}function Ea(a,b){return a.remove=b}function Fa(a,b){return a.start=b}function Ga(a,b){return a.cssText=b}function Ha(a,b){return a.keyCode=b}function Ia(a,b){return a.enabled=b}function Ja(a,b){return a.href=b}function Ka(a,b){return a.handleEvent=b}function La(a,b){return a.removeNode=b}function Ma(a,b){return a.detach=b}function Na(a,b){return a.type=b}function Oa(a,b){return a.contains=b}function Pa(a,b){return a.tabIndex=b}
function Qa(a,b){return a.cellSpacing=b}function Ra(a,b){return a.clear=b}function Sa(a,b){return a.setPosition=b}function Ta(a,b){return a.cellPadding=b}function Ua(a,b){return a.display=b}function Va(a,b){return a.execute=b}function Wa(a,b){return a.height=b}function Xa(a,b){return a.nodeValue=b}function Ya(a,b){return a.clientX=b}function Za(a,b){return a.clientY=b}function ab(a,b){return a.right=b}function bb(a,b){return a.visibility=b}
function aaa(a){var b=cb[i](db);(new Image).src=baa+eb(b)+"&jsmsg="+eb(a)+caa+fb+daa+(new Date)[gb]()}function _B_record(){cb[k]((new Date)[gb]())}function _B_prog(a){top.pr=a;if(hb===undefined){var b=top[ib][jb](eaa);hb=b?b[m]:null}if(hb){ka(hb,n[kb](a*0.99)+lb);if(a==100)hb=null}}function _B_err(a){aaa(a);throw a;}function mb(a,b){var c=a[nb](ob),e=b||pb;for(var f;f=c[rb]();)if(e[f])e=e[f];else return null;return e}function sb(){}function tb(a){a.lg=function $(){return a.bmc||(a.bmc=new a)}}
function ub(a){var b=typeof a;if(b==vb)if(a){if(typeof a[o]==wb&&typeof a[xb]!="undefined"&&!faa(a,gaa))return yb;if(typeof a[q]!="undefined")return zb}else return Ab;else if(b==zb&&typeof a[q]=="undefined")return vb;return b}function haa(a,b){if(b in a)for(var c in a)if(c==b&&Bb[r][Cb][q](a,b))return true;return false}function Db(a){return typeof a!="undefined"}function Eb(a){return ub(a)==yb}function Fb(a){var b=ub(a);return b==yb||b==vb&&typeof a[o]==wb}function Gb(a){return typeof a==Hb}
function Ib(a){return typeof a==wb}function Jb(a){return ub(a)==zb}function Kb(a){var b=ub(a);return b==vb||b==yb||b==zb}function Lb(a){if(a[Cb]&&a[Cb](iaa)){var b=a.closure_hashCode_;if(b)return b}a.closure_hashCode_||(a.closure_hashCode_=++jaa);return a.closure_hashCode_}
function s(a,b){var c=a.SSb;if(arguments[o]>2){var e=Array[r][Mb][q](arguments,2);c&&e[Nb][Ob](e,c);c=e}b=a.WSb||b;a=a.TSb||a;var f,g=b||pb;f=c?function(){var h=Array[r][Mb][q](arguments);h[Nb][Ob](h,c);return a[Ob](g,h)}:function(){return a[Ob](g,arguments)};f.SSb=c;f.WSb=b;f.TSb=a;return f}function Pb(a){var b=Array[r][Mb][q](arguments,1);b[Nb](a,null);return s[Ob](null,b)}function Qb(a,b){for(var c in b)a[c]=b[c]}
function t(a,b){function c(){}c.prototype=b[r];a.F=b[r];a.prototype=new c;a[r].constructor=a}function Rb(a,b,c){if(a[Sb])return a[Sb](b,c);if(Array[Sb])return Array[Sb](a,b,c);var e=c==null?0:c<0?n.max(0,a[o]+c):c;for(var f=e;f<a[o];f++)if(f in a&&a[f]===b)return f;return-1}function Tb(a,b,c){if(a[Ub])a[Ub](b,c);else if(Array[Ub])Array[Ub](a,b,c);else{var e=a[o],f=Gb(a)?a[nb](v):a;for(var g=0;g<e;g++)g in f&&b[q](c,f[g],g,a)}}
function Vb(a,b,c){if(a.map)return a.map(b,c);if(Array.map)return Array.map(a,b,c);var e=a[o],f=[],g=0,h=Gb(a)?a[nb](v):a;for(var j=0;j<e;j++)if(j in h)f[g++]=b[q](c,h[j],j,a);return f}function Wb(a,b,c){if(a[Xb])return a[Xb](b,c);if(Array[Xb])return Array[Xb](a,b,c);var e=a[o],f=Gb(a)?a[nb](v):a;for(var g=0;g<e;g++)if(g in f&&b[q](c,f[g],g,a))return true;return false}

Answer 2

Jayが述べたように、FireFox の Web Developer Plugin を使用する私の方法は実際には機能せず、プレビュー (最初の数行) を表示するだけです。

ただし、Firefox のFireBugプラグインを使用すると、 [検査] をクリックしてマウスを動かし、関心のあるものを強調表示できます。周囲にアウトラインが 表示されたら、 をクリックします。選択が FireBug の HTML に表示されたら、HTML 要素(私の場合は a div class="YrSjGe") を右クリックし、[HTML のコピー] を選択します。次に、お気に入りのテキスト エディターに移動し、貼り付けます。

最後に、HTML :)

Answer 3

プレーンな「ソースの表示」を実行すると、読み込みページのソースが表示されます。そこにあるすべてのHTMLは、すべて読み込まれるとGmailアプリに動的に置き換えられます。

編集：GMailはまた、神のみのためにiframeを広範に使用しています-何を知っていますか。私の記憶が正しければ、GMailには約5つまたは6つの（i）フレームオブジェクトがあります。さらに、Javascriptの多くは、タグを使用せずに動的にロードされます。これらのスクリプトのURLは次のようになります。

https://mail.google.com/mail/?ui=2&view=jsm&name=gm&ver=A7pcfYmUnLY&am=X_E5t8T3EkGpRf3deGMWZA

ただし、その正確なURLは機能しません。最後の2つの変数は、個人のログイン情報/セッション/月の満ち欠けによって異なります。

Answer 4

はい、彼らはjavascriptを使用して、そのデータを表示される完全なページに変換しています。

Answer 5

他の人が既に述べたように、Gmail は難読化された Javascript の大部分を使用して DOM を操作します。このすべてがどのように機能するかを発見するのは大変な作業ですが (難読化されたコードがたくさんあるため)、どのように機能するかを知る最善の方法は、Firebugを使用して、含まれているさまざまな AJAX 要求を調べることです。スクリプトとレンダリングされた DOM。

また、 Gmail で使用されているアーキテクチャの一部について説明している次の記事を読むこともできます。

Answer 6

メールの生成に使用されるJavascriptを表示するには、 Firefox用のFirebugを使用し、[スクリプト]をクリックします。次に、そのボタンの上のバーにいずれかのスクリプトの名前が表示されます。それをクリックしてすべてのスクリプトを一覧表示し、いずれかを選択します。あなたが好きです。Gmailはおそらくそれを圧縮しているので、ほとんど読めません。

Answer 7

「返信」または「全員に返信」と表示されているドロップダウンで「オリジナルを表示」を選択して、ヘッダーを含む正確な電子メール テキストを表示することもできます。

Answer 8

IE では、右クリックして [ソースを表示] を選択すると、空白のページが表示されます。[ページ] メニュー > [ソースの表示] を使用すると、実際のページ ソースが表示されます。Steve が述べたように、Firefox では、[View Page Source] を右クリックし、[View] メニュー > [Page Source] から実際のソースを表示できます。

IE 固有の難読化を利用して、ユーザーの 85% から秘密のソースを隠していると思われます。