🥑 🈴 📤 クライアント側のCORSエミュレーション：拡張機能のないいくつかのカスタムタスクのクロスブラウザーソリューション 👦🏼 👩🏿‍✈️ 🕋

I.問題は何ですか

ブラウザーの拡張機能- 高度なWebサーフィンのための強力なツールであり、多くのツールの中で最もアクセスしやすく、開発され、普及している部分です。ただし、拡張機能には弱点があります。各ブラウザには独自のルールと形式の知識とアプリケーションが必要であり、これは作成者にとってはさらに複雑なことです。拡張機能はクロスブラウザではないため、宛先がすぐに制限されます。拡張機能の作成を一般化する試みがありますが、既に独自のフォーマットとルールのレイヤーを追加できます。

拡張機能がブラウザインターフェイスの特定の側面を改善する場合、拡張機能なしでは実行できません。ただし、一部のタスクは普遍的であり、ブラウザのプライベートな手段とは接続されていませんが、拡張なしでは実行できません。そのようなタスクの1つは、単一ソースのポリシーに違反するクロスドメインXMLHttpRequest

要求です。

II。解決しようとする私的な試み

この場合に役立つ拡張機能のタイプがあり、さらに多くの拡張機能があります-他の多くの拡張機能の必要性を排除するように設計されています。これらは有名なGreasemonkeyとTampermonkeyです：単純なJavaScriptコードを使用して多くの問題を解決し、同時にユーザートレーニングに関係なく、一般的なソースからそのようなスクリプトを迅速にインストールするための多くの補助メソッドを作成できます。ただし、ブラウザ間の互換性と作成と使用の容易さの問題を完全に解決するわけではありません。さらに、最も強力なツールの1つであるGM_xmlhttpRequest

の機能の説明は、すべての新しい標準が実装されていないことを示唆しています（特にresponseText以外の何らかの応答を取得できるかどうかを理解することは困難です-DOMとして利用可能なドキュメントです-ツリー）。

理想的には、すべてのブラウザーで動作する純粋なJavaScriptが欲しいです。ブックマークレットまたはスクリプトを使用したローカルHTMLページでこれを行う方法。ただし、現在のページとローカルファイルのコンテキストで機能するブックマークレットは、クロスドメインのXMLHttpRequest

要求を作成できません。

ここで、 CORSテクノロジーが役立ちます。それ自体ではありません：その原則自体は、ユーザーがそのメカニズムに影響を与えることを許可せず、データ交換をサーバーとブラウザの力に完全に転送します。ただし、これら2つの要素の通信に介入し、ユーザーのニーズに合わせて調整するメカニズムがあります。

それらの一部は、ブラウザー拡張機能（hmm）の形式で再び実装されます。

Firefoxには、HTTPヘッダーを即座に編集するための素晴らしいツールmoz-rewriteがあります。その最も機能的な亜種はRewrite HTTP Headers（JS）です。この拡張機能は、さまざまな条件に応じてヘッダーの編集を適切に制御し、変数を使用してJavaScript自体にルールを記述し、既に受信したヘッダーにアクセスできるようにします。

Google ChromeにはRequestlyのような機能性の低い拡張機能が多数あります。それらの機能は控えめであり、ニーズにはあまり適していません。

IEはここで適切なものを得ていないようです。

III。ワンストップソリューション。

一般に、再び同じ問題に取り組みました。ブラウザ間の互換性とシンプルさが損なわれます。ブラウザの詳細に依存しないツールが必要です。ここでは、ローカルプロキシサーバーが思い浮かびます。幸いなことに、非常にシンプルで軽量なソリューションがあります。迅速にインストールでき、ほとんど構成する必要がなく、すべての主要なオペレーティングシステムに既に実装されています。これはフィドラーです。

ほとんどの場合、ユーザー側でHTTPトラフィックを調査するために使用されます。ただし、プログラムはHTTPヘッダーをその場で編集し、応答本文を変更することもできます。これにより、原則として、 GreasemonkeyやStylishなどのカスタムスクリプトやスタイルの拡張機能を置き換えることができます（IEユーザーは、このようなツールのパワーを初めて試すことができます） -ただし、ここではアプリケーションのこちら側については記述せず、ヘッダーのインターセプトと編集のみに焦点を当てます。

ここからプログラムをダウンロードしてください。トラフィックを傍受および変更するためのルールをより便利に編集するために、すぐに拡張子を追加することをお勧めします（うーん...）。サイトには少なくとも2つの名前と2つの生息地があります。

FiddlerScriptエディター

構文強調表示アドオン

とりわけ、Fiddlerのすべての組み込みプロパティとメソッドの適切な参照がプログラムに直接追加されます。これは、膨大な量のドキュメントでもすべての富について言及していないためです。

怖がる必要はありません。Fiddlerは基本的に同じJavaScriptである非常に標準的なJScript.NETを使用し、アプリケーションの追加のオブジェクト、プロパティ、およびメソッドを知ることは、同じXMLHttpRequest

またはDOM要素のプロパティのような1つの小さなインターフェイスを学習することと同じです。著者から簡単な紹介があります。

IV。クイックスタート

ツールを完全に制御したい人は、ドキュメントを読んで組み込みのリファレンスを調べる（またはプログラムの作成者が書いた本を読む）のに数時間費やすことができますが、この場合の回答オプションを作成しようとします：ブックマークレットまたはアプリケーションをローカル（またはホストされた）ネットワーク上で）HTMLページを作成し、ブラウザですべてを機能させる方法を平均的なユーザーに説明する必要があります（拡張機能に甘やかされている一部のFirefoxまたはChromeユーザーがあなたを理解できない可能性があります）トン、しかし、IEユーザーは、ここでゲイン）野生にはほぼ唯一の方法を出ています。

1. Fiddlerとその拡張機能をダウンロードしてインストールします（残念ながら、両方のファイルの重さはわずか1.7 MBで、電子メールの添付ファイルで送信することもできます）。

2.デフォルトでは、ほとんどすべてがプログラムのニーズに合わせて構成されています。アプリケーションがHTTPSリクエストを使用する場合、追加の設定のみが必要です。このタブのボックスをチェックしてください：

3. IEとGoogle Chromeを追加で構成する必要はありません。デフォルトでシステムプロキシを使用します（表示されている場合）。Fiddlerは起動時にそのようなプロキシとして自身を登録するため、非常に簡単で便利です。 Firefoxのデフォルト設定は少し異なりますが、複雑なこともありません。すべてをここで簡単に説明します。

docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureBrowsers

docs.telerik.com/fiddler/Configure-Fiddler/Tasks/FirefoxHTTPS

4.これらの3つのステップの後、Fiddlerが起動するたびに、トラフィックは自動的に通過し、プログラムを閉じた後、通常のパスに戻ります。 Fiddlerを永続的な仲介者にしたくない場合、ブックマークレットまたはローカルアプリケーションの実行中にのみ実行する場合は、プログラム起動ショートカットにオプションを追加すると便利です。

Fiddlerの設定で、アイコンへの折りたたみを選択します。その後、プログラムはしばらくの間トレイに表示されます（そこのアイコンのメニューから閉じることができます）。最初は複雑すぎるようです。ブックマークレットまたはページのアプリケーション全体を起動することはできますが、すぐに慣れることができます。 Fiddlerは、心理的にもっと便利であれば、クロスブラウザ拡張機能、またはクロスブラウザ拡張機能のプラットフォームと考えることができます。そして、あなたがそれを絶えず動作させたままにして、ログイン時に自動起動を設定するなら、あなたはそれを完全に忘れることができます：それは完全に透過的に動作し、ほとんどメモリを消費しません-静かに「100セッションを維持」を選択します。その後、画面には最後のクエリが常に100行しか表示されず、メモリは実質的にいっぱいになりません）。プロセッサもロードされず、機能上の問題やサイトの運用に顕著な遅延は発生しません。

5.最後のステップが残っています-平均的なユーザーにとってはささいなことではありませんが、慎重に実装すれば大丈夫です。適切なHTTP接続ごとにFiddlerによって実行される小さなコードを追加し、必要なヘッダーを変更/追加する必要があります。このコードは、ほとんどのクロスドメインクエリのニーズに対応しています。

Fiddlerを起動し、メニューでこのメニュー項目を選択します（またはCtrl + Rを押します）。

上記の拡張機能をインストールした場合、小さな組み込みエディターがそれに応じて開きます（その右側には、Fiddlerが通常のJavaScriptに追加するすべてへの完全な参照を含む列があります。リストアイテムを選択すると、列の上部にオブジェクト、プロパティ、またはメソッドの簡単な説明が表示されます）：

Greasemonkeyユーザースクリプトに似た特別なスクリプトがエディターに既に読み込まれます。適切なページがブラウザーに読み込まれるたびに実行されるのではなく、Fiddlerを通過するHTTPトラフィックのすべての適切なイベントが実行されます。このスクリプトには、開発者自身からの予備的なコードが既にありますが、理解する必要はありません。小さなフラグメントを既存の関数に挿入するだけです。タスクを容易にするために、エディターには、この機能にすぐに変換される特別なメニュー項目があります。

そこで、次のコードを挿入する必要があります（後で説明します）。

  if (oSession.oRequest.headers.ExistsAndContains('Accept-Language', ',qya;q=0.001') && oSession.oRequest.headers.Exists('Origin')) { oSession.oResponse.headers['Access-Control-Allow-Origin'] = oSession.oRequest.headers['Origin']; oSession.oResponse.headers['Access-Control-Allow-Credentials'] = 'true'; if (oSession.oRequest.headers.Exists('Access-Control-Request-Method')) { oSession.oResponse.headers['Access-Control-Allow-Methods'] = oSession.oRequest.headers['Access-Control-Request-Method']; } if (oSession.oRequest.headers.Exists('Access-Control-Request-Headers')) { oSession.oResponse.headers['Access-Control-Allow-Headers'] = oSession.oRequest.headers['Access-Control-Request-Headers']; } if (oSession.oResponse.headers.Exists('Vary')) { oSession.oResponse.headers['Vary'] += ', Origin'; } else { oSession.oResponse.headers['Vary'] = 'Origin'; } }

挿入後、関数コードは次のようになります（挿入前にすでに1つの小さなブロックがあったので、その後に挿入する必要があります）。

ファイルを保存した後、Fiddlerは自動的にスクリプトをリロードして分析し、すべてが正常な場合は承認音を出し、新しいバージョンの採用についてステータスラインで通知します。挿入によって何かが中断されると、エラーメッセージが表示されます。何かがうまくいかず、ファイルを元の位置に戻せない場合は、単に削除してください。次にプログラムを起動すると、元の形式に復元されます（Win 7のファイルアドレスはc:\Users\[ ]\Documents\Fiddler2\Scripts\CustomRules.js

、災害復旧については、ヘルプまたはファイルの冒頭のコメントを参照してください）。最後に、ルールファイルを自分で編集することを恐れている人にアプリケーションを転送する必要がある場合は、既に挿入された完成したものを彼に渡し、正しいアドレスで置き換えさせます。

以上です。これらの手順の後、リンク「Fiddler + bookmarklet / local page」は、クロスブラウザーの拡張機能またはアプリケーションと見なすことができます（記事の最後に、いくつかの基本的な例を示します）。

V.メカニズムのいくつかの機能

1.まず、Fiddlerがすべてのヘッダーを変更し、不適切なセッション内で不必要なチェックを実行する必要がないように、共通スレッドでアプリケーションからのリクエストを何らかの方法で分離することにしました。いくつかのオプションを一貫してテストし、破棄する必要がありました。

a。リクエストアドレス#fiddler--

特別なハッシュを#fiddler--

ます（ #fiddler--

）。ハッシュはHTTP経由で送信されないため、機能しません。ブラウザに対してのみ意味があります（したがって、このメソッドは、ブラウザ用にHTTP編集の拡張機能が開発されている場合に役立ちます。ハッシュをインターセプトし、この条件に基づいてヘッダーを変更できます（前述のRewrite HTTP Headers（JS）を使用できます）; Edgeを含むすべての主要なブラウザーの実装でそのような拡張機能が開発された場合、そのようなオプションについて考えることができます）。

b。明示的なデフォルトポートの追加-ブラウザによって切断されます。 Fiddlerがインターセプトして通常のポートに変更するように非標準のポートを追加するために、私はそれを危険なビジネスだと考えました。

c。サーバーがそれらを無視することを期待して、フォームuser:password@

のドメインの前に認証部分 URLを追加します。何らかの理由でブラウザーがこの部分をHTTP経由で送信せず、Fiddlerに到達しないことが判明しました。さらに、この部分とポート番号はリダイレクトとともに消えます。リダイレクトはXMLHttpRequest

に対して透過的で、インターセプトなしです-新しいアドレスとのヘッダー交換はFiddlerの参加なしで既に行われます。

d。クエリ/検索部分にマーカーを追加します（ &fiddler=1

）。この部分でなじみのないオプションを発見した一部のサーバーは、このオプションなしでURLにリダイレクトすることが発見されました。そのような場合、マーカー&&&

追加することができます。これはサーバーに表示されません（解析されると3つの空のオプションに変わり、サーバーの恐怖を引き起こしません）が、通常のリダイレクトが発生した場合、彼は住所から消えます。

d。クッキー。別のドメインにリダイレクトすると失われます。

e。カスタムユーザーヘッダー（一部のX-Hello-Fiddler

）を追加します。このようなヘッダーが存在すると、いわゆるプリフライトリクエストが発生し 、インターセプトおよび編集できることが判明しましたが、リダイレクトが続く場合、ブラウザはリクエストを完全に中止します-プリフライトリクエストはリダイレクトと互換性がありません。

よ標準ヘッダーの追加。ここはそれほど単純ではないことがわかりました。セキュリティ上の理由から、ブラウザは一部のヘッダーを追加することを許可せず、それ自体でのみヘッダーを作成できます。ヘッダーの一部は、標準のものであっても、プリフライトリクエストを呼び出します。これを防ぐには、「単純」と見なされる非常に少数の見出しに制限する必要があります。それらについては、 www.w3.org / TR / cors / ＃terminology （ 「単純なヘッダー」 ）を参照してください。

そこで、ブラウザで変更できる通常のヘッダーに安全な変更を加えるという、残りの方法に取りかかりました。そのようなタイトルはAccept-Language

でした。ブラウザーオプションの優先言語設定に従って、ブラウザーによって構成されます。 JavaScriptコードでのそれらのアイデアは、navigator.languagesプロパティを使用して取得できますが、IE11ではサポートされていません（すべてのブラウザーでサポートされているnavigator.languageプロパティは、ブラウザー自体のインターフェイス言語のみを提供します）。たとえば、私の3つのブラウザーでは、コンソールのJSON.stringify([navigator.language, navigator.languages])

コードJSON.stringify([navigator.language, navigator.languages])

は以下を提供します。

 Chrome: "[ "en-US", [ "en-US", "en", "ru", "uk" ] ]" Firefox: "[ "en-US", [ "en-US", "en", "ru", "uk" ] ]" IE11: "[ "ru-RU", null ]"

ブラウザ自体が送信するヘッダーをWebコンソールで確認し、マーカーを追加することでこのコードをスクリプトで使用するのが最も便利です。私のブラウザーは、次のAccept-Language

ヘッダーを提供します。

 Chrome: en-US,en;q=0.8,ru;q=0.6,uk;q=0.4 Firefox: en-US,en;q=0.8,ru;q=0.5,uk;q=0.3 IE11: en-US,en;q=0.8,ru;q=0.5,uk;q=0.3

それらに最小の選好係数を持つまれな言語を追加することは残っています。 Quenyaを選択しました。これは、 qya

コードで標準に既に含まれているqya

です。そのため、 qya;q=0.001

ようなものを追加する必要がありqya;q=0.001

（標準で許容される最小値）、これはFiddlerの最初のテスト条件で少し高くなっています（クロスドメインリクエストサインであるOrigin

ヘッダーをチェックし、 -それなしでは、見出しに干渉することは意味がありません、すべてがとにかく動作します）。

2. 2つの条件をチェックした後、挿入ディレクティブは何をしますか：

a。送信されOrigin

リクエストの発信元はミラーリングされます-これがないと、ブラウザはスクリプトに応答しません（ローカルページからリクエストする場合はnull

になりnull

が、サーバーもそれを返す必要があります）。

b。要求の承認サポートを追加します（ Access-Control-Allow-Credentials

これがないと、ブラウザーはCookieに関連する受信情報へのアクセスを許可しません。つまり、サイトでの承認時に取得するページを取得しません）。

c。保護するために、突然スクリプトに追加できる場合、またはブラウザー自体がそれらを追加したい場合、特別なメソッドとヘッダーに対するブラウザー要求をミラーリングします（これまでのところ、このような場合は発生していません）。

Vary

ヘッダーを追加します。これを使用しない場合、ブラウザーは単に応答をキャッシュし、Fiddlerをバイパスしてキャッシュから受信しますが、同時にAccess-Control-Allow-Origin

別のソースでつまずき、リクエストを中断しますVary

ヘッダーはキャッシュを配置しますそのような応答は、要求のソースに依存します。

3.いくつかの考えられる問題（主にIEで）およびそれらの解決を試みます。

a。 IE11はまだ普及していないP3Pテクノロジーを使用しています。サーバーが実装していない場合（ほとんどの場合これが発生します）、IEはそのようなサーバーが基本でない場合（正確にはクロスドメインXMLHttpRequest

リクエストのルール）、そのようなサーバーにCookieを送信しません。 Firefoxには、サードパーティのCookieがブラウザー設定で許可されていない場合、拡張機能がCookieを送信することさえ許可しない古いバグがあります。 IEでは、似たようなものがあります。 P3P

ルールは非常に複雑であり、ユーザーはFiddlerを使用してそれらの干渉を受けません、私はあえてしませんでした（ただし、Cookieは事前にP3P

ルールと一緒に設定され、Fiddlerはニーズに関係なく常にすべてのセッションでこれに従う必要がありますアプリケーション）。ただし、状況から抜け出す簡単な方法があります。 IEの設定では、これらのウィンドウを開き、次のオプションを確認する必要があります。

その後、IEのXMLHttpRequest

リクエストで認証サポートを受け取ります。ところで、私は奇妙な不具合に遭遇しました：このオプションを一度適用してからキャンセルした後、IEは引き続きサードパーティCookieを送信し続けました。おそらくこれは状況のユニークな組み合わせでした。

また、同じダイアログまたはプライバシーポリシーダイアログで例外を作成する各サイトを作成することもできますが、これは少し落ち着く有用または過度のパラノイアではありますが、これは長く普遍的な方法ではありません。

ChromeおよびFirefoxでは、サードパーティのCookieがデフォルトで有効になっています（Firefoxでは、ほとんどの場合、訪問したサイトからのCookieのみを受け入れる便利なオプションがあります）、オプションで何も設定できません。

b。 IE11には非常に奇妙なバグがあり、その性質は理解できませんでした。一部のサイトでのみ、リダイレクト時にのみ2つの不明瞭なエラーメッセージが表示されます。

SEC7120: null Access-Control-Allow-Origin.

XMLHttpRequest: 0x80070005, .

同時に、ヘッダーのすべてが正常です。リクエストとレスポンスの両方に、リクエストの正しいソースがありnull

が、 null

はありません（リクエストがローカルページから送信されていない場合）。ブラウザが、転送中のリクエストのソースがnull

なったと想定する理由は完全に理解不能です。 , .

c。 , , Fiddler- ( Vary

Origin

), . , , ( ), — , : Chrome Firefox , IE11 . , .

d。一部のページでは、ブックマークレットは別のテクノロジーであるコンテンツセキュリティポリシーのために動作を拒否します。 Firefox はXMLHttpRequest

、厳密なページCSP

（TwitterやGitHabなど）でブックマークレットが実行されない場合でも、ブックマークレットがまったく実行されないバグを修正しません。他のブラウザでCSP

は、クロスドメインリクエストの開始が妨げられる場合があります。この問題は、2つの手順で解決できます（これを許可するブラウザーでCSPを無効にしたくない場合-およびこれが根本的な方法です）：

-Content-Security-Policyヘッダーを一時的に削除する別のFiddlera条件を作成します（挿入が必要です）上記のブロックの後）：

  if (/[?&]tempnocsp=1\b/i.test(oSession.PathAndQuery)) { oSession.oResponse.headers.Remove('Content-Security-Policy'); oSession.oResponse.headers.Remove('X-Content-Security-Policy'); }

— , query- tempnocsp=1

URL ( , ; , , — Fiddler-). :

 javascript:(function(l) { if (!/[?&]tempnocsp=1\b/i.test(l.href)) { l.href += (/\?/.test(l.href) ? "&" : "?") + "tempnocsp=1"; } })(location);

, . , . - Fiddler- , Firefox Chrome — . , . Fiddler, — .

VI.

, , . , , , , ( IE). — .

1. , , / .

HEAD

, Content-Type

, Last-Modified

Content-Length

. , . , . responseURL

IE11 ( , , , Edge).

: Content-Type

Last-Modified

, Content-Length

. , Chrome :

VM117:1 Refused to get unsafe header "Content-Length"

Fiddler-, CORS: , . , :

  if (oSession.RequestMethod == 'HEAD') { if (oSession.oResponse.headers.Exists('Access-Control-Expose-Headers')) { oSession.oResponse.headers['Access-Control-Expose-Headers'] += ', Content-Length'; } else { oSession.oResponse.headers['Access-Control-Expose-Headers'] = 'Content-Length'; } }

, , Fiddler- , :

OnBeforeResponse

  if (oSession.oRequest.headers.ExistsAndContains('Accept-Language', ',qya;q=0.001') && oSession.oRequest.headers.Exists('Origin')) { oSession.oResponse.headers['Access-Control-Allow-Origin'] = oSession.oRequest.headers['Origin']; oSession.oResponse.headers['Access-Control-Allow-Credentials'] = 'true'; if (oSession.oRequest.headers.Exists('Access-Control-Request-Method')) { oSession.oResponse.headers['Access-Control-Allow-Methods'] = oSession.oRequest.headers['Access-Control-Request-Method']; } if (oSession.oRequest.headers.Exists('Access-Control-Request-Headers')) { oSession.oResponse.headers['Access-Control-Allow-Headers'] = oSession.oRequest.headers['Access-Control-Request-Headers']; } if (oSession.oResponse.headers.Exists('Vary')) { oSession.oResponse.headers['Vary'] += ', Origin'; } else { oSession.oResponse.headers['Vary'] = 'Origin'; } if (oSession.RequestMethod == 'HEAD') { if (oSession.oResponse.headers.Exists('Access-Control-Expose-Headers')) { oSession.oResponse.headers['Access-Control-Expose-Headers'] += ', Content-Length'; } else { oSession.oResponse.headers['Access-Control-Expose-Headers'] = 'Content-Length'; } } } if (/[?&]tempnocsp=1\b/i.test(oSession.PathAndQuery)) { oSession.oResponse.headers.Remove('Content-Security-Policy'); oSession.oResponse.headers.Remove('X-Content-Security-Policy'); }

, , , — , , :

 javascript:(function(url, xhr) { if(!url) {return;} xhr = new XMLHttpRequest(); try {xhr.open('HEAD', url, true);} catch (e) { alert(e.name + ': ' + e.message); return; } xhr.setRequestHeader('Accept-Language', 'en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'); xhr.responseType = 'document'; xhr.timeout = 10000; xhr.withCredentials = true; xhr.onload = function(evt, l) { l = this.getResponseHeader('Content-Length'); alert([ this.responseURL || '?', this.getResponseHeader('Content-Type') || '?', this.getResponseHeader('Last-Modified') || '?', l ? [l + ' B', (l / 1024) .toFixed(3) + ' kB', (l / 1048576) .toFixed(3) + ' MB', (l / 1073741824).toFixed(3) + ' GB'].join(' \u2248 ') : '?' ].join('\n\n') + '\n\n'); }; xhr.ontimeout = xhr.onerror = function(evt) {alert(evt.type.charAt(0).toUpperCase() + evt.type.slice(1) + '.');}; try {xhr.send(null);} catch (e) {alert(e.name + ': ' + e.message); return;} })(document.activeElement.href || prompt('URL:'))

, URL , . , ( IE11 — habrastorage.org/files/5c2/1e7/e48/5c21e7e4838b43b0b4f275d041a4e234.png ) Chrome :

Firefox Nightly :

, — . Chrome xhr.onerror

:

XMLHttpRequest cannot load file:///... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Firefox xhr.send()

, , , . :

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

IE11 , xhr.open()

. . IE :

Error: .

2. « »

«Breadcrumbs» , Total Commander, .

Firefox Advanced Locationbar . Chrome Breadcrumb Navigator . IE11, , ( IE Explorer- ).

, , . , , . : ( ), ( ), ( ). , — , XMLHttpRequest

. ( — ).

 javascript:(function(d, l, throbber, div, url, ar, arl, i, str, el, info_url, info_title){ if (d.activeElement.href) {l = d.activeElement;} else {l = location;} throbber = 'data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7'; div = d.createElement('div'); div.setAttribute('data-breadcrumbs-main', ''); div.appendChild(d.createElement('style')).textContent=[ 'div[data-breadcrumbs-main] {position:fixed; top:0px; left:0; z-index:999999; width:100%; padding:10px !important; background-color:white !important; outline:1px solid black !important; font-size: 12pt !important; text-align: left !important;}', 'div[data-breadcrumbs-main] a {font-size: 12pt !important; text-decoration: underline !important;}', 'div[data-breadcrumbs-main] div {margin-top: 20px!important; color: silver !important;}', 'div[data-breadcrumbs-info-title] {background-repeat: no-repeat !important; background-position: left center !important; padding-left: 20px !important;}', ].join('\n'); url = l.protocol + (/:[/][/]/.test(l.href) ? '//' : ''); div.appendChild(d.createElement('span')).textContent = url; ar = l.hostname.split('.'); arl = ar.length; if(arl > 1) { ar.splice(arl - 2, 2, ar.slice(arl - 2).join('.')); arl--; } for (i = 0; i < arl; i++) { str = ar[i]; if (i > 0) {div.appendChild(d.createElement('span')).textContent = '.';} el = div.appendChild(d.createElement('a')); el.textContent = str; el.href = url + ar.slice(i).join('.'); } url += l.hostname; if(l.port && /:\d+$/.test(l.host)) { div.appendChild(d.createElement('span')).textContent = ':'; el = div.appendChild(d.createElement('a')); el.textContent = l.port; url += ':' + l.port; el.href = url; } div.appendChild(d.createElement('span')).textContent = '/'; url += '/'; if(l.pathname.length > 1){ ar = l.pathname.split('/'); ar.shift(); arl = ar.length; for (i = 0; i < arl; i++) { str = ar[i]; if (i < arl-1) { el = div.appendChild(d.createElement('a')); el.textContent = str; url += str; div.appendChild(d.createElement('span')).textContent = '/'; url += '/'; el.href = url; } else if (str !== '') { el = div.appendChild(d.createElement('a')); el.textContent = str; url += str; el.href = url; } } } if(l.search){ ar = l.search.split('&'); arl = ar.length; ar[0] = ar[0].substring(1); div.appendChild(d.createElement('span')).textContent = '?'; url += '?'; for (i = 0; i < arl; i++) { str = ar[i]; if (i > 0) { div.appendChild(d.createElement('span')).textContent = '&'; url += '&'; } el = div.appendChild(d.createElement('a')); el.textContent = str; url += str; el.href = url; } } if(l.hash){ div.appendChild(d.createElement('span')).textContent = '#'; el = div.appendChild(d.createElement('a')); el.textContent = l.hash.substring(1); url += l.hash; el.href = url; } if (div.querySelector('a:last-of-type').href == location.href) { div.querySelector('a:last-of-type').setAttribute('data-breadcrumbs-doc-title', d.title); } info_url = div.appendChild(d.createElement('div')); info_url.setAttribute('data-breadcrumbs-info-url', ''); info_url.textContent = 'URL'; info_title = div.appendChild(d.createElement('div')); info_title.setAttribute('data-breadcrumbs-info-title', ''); info_title.textContent = 'Title'; div.addEventListener('mouseover', function(evt, h, t){ if (h = evt.target.href) { info_url.textContent = h; if (t = evt.target.getAttribute('data-breadcrumbs-doc-title')) { info_title.textContent = t; } else{getTitle(evt.target);} } }); div.addEventListener('dblclick' /*mouseleave*/, function(){div.parentNode.removeChild(div);}); d.body.appendChild(div); function getTitle(lnk, xhr) { info_title.style.backgroundImage = 'url('+ throbber + ')'; xhr = new XMLHttpRequest(); try {xhr.open('GET', lnk.href, true);} catch (e) { info_title.style.backgroundImage = 'none'; info_title.textContent = e.name + ': ' + e.message; return; } xhr.setRequestHeader('Accept-Language', 'en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'); xhr.responseType = 'document'; xhr.timeout = 10000; xhr.withCredentials = true; xhr.onload = function() { info_title.style.backgroundImage = 'none'; if (this.response && this.response.title) { info_title.textContent = this.response.title; lnk.setAttribute('data-breadcrumbs-doc-title', this.response.title); } else { info_title.textContent = '?'; lnk.setAttribute('data-breadcrumbs-doc-title', '?'); } }; xhr.ontimeout = xhr.onerror = function(evt){ info_title.style.backgroundImage = 'none'; info_title.textContent = evt.type.charAt(0).toUpperCase() + evt.type.slice(1) + '.'; }; try {xhr.send(null);} catch (e) { info_title.style.backgroundImage = 'none'; info_title.textContent = e.name + ': ' + e.message; } } })(document)

( , ) - , CORS

. , . , MDN , :

.

IE11 (. ), , UglifyJS :

 javascript:(function(e,t,n,a,A,i,r,o,l,p,d,s){function h(e,t){s.style.backgroundImage='url('+n+')',t=new XMLHttpRequest;try{t.open('GET',e.href,!0)}catch(a){return s.style.backgroundImage='none',void(s.textContent=a.name+': '+a.message)}t.setRequestHeader('Accept-Language','en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'),t.responseType='document',t.timeout=1e4,t.withCredentials=!0,t.onload=function(){s.style.backgroundImage='none',this.response&&this.response.title?(s.textContent=this.response.title,e.setAttribute('data-breadcrumbs-doc-title',this.response.title)):(s.textContent='?',e.setAttribute('data-breadcrumbs-doc-title','?'))},t.ontimeout=t.onerror=function(e){s.style.backgroundImage='none',s.textContent=e.type.charAt(0).toUpperCase()+e.type.slice(1)+'.'};try{t.send(null)}catch(a){s.style.backgroundImage='none',s.textContent=a.name+': '+a.message}}for(t=e.activeElement.href?e.activeElement:location,n='data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7',a=e.createElement('div'),a.setAttribute('data-breadcrumbs-main',''),a.appendChild(e.createElement('style')).textContent='div[data-breadcrumbs-main] {position:fixed; top:0px; left:0; z-index:999999; width:100%; padding:10px !important; background-color:white !important; outline:1px solid black !important; font-size: 12pt !important; text-align: left !important;}\ndiv[data-breadcrumbs-main] a {font-size: 12pt !important; text-decoration: underline !important;}\ndiv[data-breadcrumbs-main] div {margin-top: 20px!important; color: silver !important;}\ndiv[data-breadcrumbs-info-title] {background-repeat: no-repeat !important; background-position: left center !important; padding-left: 20px !important;}',A=t.protocol+(/:[\/][\/]/.test(t.href)?'//':''),a.appendChild(e.createElement('span')).textContent=A,i=t.hostname.split('.'),r=i.length,r>1&&(i.splice(r-2,2,i.slice(r-2).join('.')),r--),o=0;r>o;o++)l=i[o],o>0&&(a.appendChild(e.createElement('span')).textContent='.'),p=a.appendChild(e.createElement('a')),p.textContent=l,p.href=A+i.slice(o).join('.');if(A+=t.hostname,t.port&&/:\d+$/.test(t.host)&&(a.appendChild(e.createElement('span')).textContent=':',p=a.appendChild(e.createElement('a')),p.textContent=t.port,A+=':'+t.port,p.href=A),a.appendChild(e.createElement('span')).textContent='/',A+='/',t.pathname.length>1)for(i=t.pathname.split('/'),i.shift(),r=i.length,o=0;r>o;o++)l=i[o],r-1>o?(p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,a.appendChild(e.createElement('span')).textContent='/',A+='/',p.href=A):''!==l&&(p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,p.href=A);if(t.search)for(i=t.search.split('&'),r=i.length,i[0]=i[0].substring(1),a.appendChild(e.createElement('span')).textContent='?',A+='?',o=0;r>o;o++)l=i[o],o>0&&(a.appendChild(e.createElement('span')).textContent='&',A+='&'),p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,p.href=A;t.hash&&(a.appendChild(e.createElement('span')).textContent='#',p=a.appendChild(e.createElement('a')),p.textContent=t.hash.substring(1),A+=t.hash,p.href=A),a.querySelector('a:last-of-type').href==location.href&&a.querySelector('a:last-of-type').setAttribute('data-breadcrumbs-doc-title',e.title),d=a.appendChild(e.createElement('div')),d.setAttribute('data-breadcrumbs-info-url',''),d.textContent='URL',s=a.appendChild(e.createElement('div')),s.setAttribute('data-breadcrumbs-info-title',''),s.textContent='Title',a.addEventListener('mouseover',function(e,t,n){(t=e.target.href)&&(d.textContent=t,(n=e.target.getAttribute('data-breadcrumbs-doc-title'))?s.textContent=n:h(e.target))}),a.addEventListener('dblclick',function(){a.parentNode.removeChild(a)}),e.body.appendChild(a)})(document)

3.ローカルページのデータの集約。

次の例は、1つのローカルページでさまざまな情報を収集するためのテンプレートとして使用できます。スクリプトの先頭には、sites

新しいタスクをアグリゲーターに追加するための最小限のデータを含む開始オブジェクトがあります。囲まれた各オブジェクトには、2つの必須キーが含まれています。テキストを抽出する要素のサイトアドレスとCSSセレクター。また、2つのオプションのキーを含めることができます：完全に理解するためのリンク追跡ページ（情報要求ページと一致しない場合）および抽出されたテキストによって処理される必要がある正規表現（2つの要素の配列-テンプレートと置換文字列の形式）

ユーザーは、開発者のコンソールのメニュー項目を使用してセレクターをコピーして貼り付けることができます（IE11では、DOMツリーのさまざまな要素が選択されたときにページコードの下で更新される、既に馴染みのあるパン粉のセレクターバリアントの行のみを覗くことができます）。

例の簡略化のために、ドキュメントにはHabrahabrの4つのセクションに同じユーザーのプロファイルページが含まれ、セレクターはユーザーに関する最小限の情報を選択し、同じタイプの正規表現は読みやすくするためにフラグメントの1つを最小化します。

, -. ( , ). , , , .

HTML- :

 <!doctype html> <html> <head> <meta charset='UTF-8'><title>User Data Aggregation</title> <style> body > div > a {display: inline-block; background-repeat: no-repeat;} body > div > pre, body > div > a {padding: 5px 5px 5px 20px; margin: 0px;} </style> <script> /******************************************************************************/ 'use strict'; /******************************************************************************/ var sites = { 'habrahabr.ru': { checkPageURL: 'http://habrahabr.ru/users/vmb/', keyElementSelectors: '#layout > div.inner > div.user_header > div.karma, #layout > div.inner > div.user_header > div.rating, #layout > div.inner > div.content_left > div.user_profile > div.rating-place, #layout > div.inner > div.sidebar_right > div.block.user_info > div.info', re: [ /(\d+) (\d+ .+)/, '$1 ($2)' ] }, 'geektimes.ru': { checkPageURL: 'http://geektimes.ru/users/vmb/', keyElementSelectors: '#layout > div.inner > div.user_header > div.karma, #layout > div.inner > div.user_header > div.rating, #layout > div.inner > div.content_left > div.user_profile > div.rating-place, #layout > div.inner > div.sidebar_right > div.block.user_info > div.info', re: [ /(\d+) (\d+ .+)/, '$1 ($2)' ] }, 'megamozg.ru': { checkPageURL: 'http://megamozg.ru/users/vmb/', keyElementSelectors: '#layout > div.inner > div.user_header > div.karma, #layout > div.inner > div.user_header > div.rating, #layout > div.inner > div.content_left > div.user_profile > div.rating-place, #layout > div.inner > div.sidebar_right > div.block.user_info > div.info', re: [ /(\d+) (\d+ .+)/, '$1 ($2)' ] }, 'toster.ru': { checkPageURL: 'https://toster.ru/user/vmb', keyElementSelectors: '#js-canvas > div.layout__body > section > div.column_main > main > header > div.page-header__stats > ul > li', }, }; /******************************************************************************/ var throbber = 'data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7'; /******************************************************************************/ document.addEventListener('DOMContentLoaded', init); /******************************************************************************/ function init() { for (var site in sites) { var div = document.body.appendChild(document.createElement('div')); var querier = document.createElement('a'); querier.textContent = site; querier.target = '_blank'; querier.href = sites[site].openPageURL || sites[site].checkPageURL; div.appendChild(querier); } if(!location.hash){getAll();} } /******************************************************************************/ function getAll() { var queriers = document.querySelectorAll('a'); for (var i = 0, querier; querier = queriers[i]; i++) { window.setTimeout(getDoc, i*1000, querier); } } /******************************************************************************/ function getDoc(querier) { querier.style.backgroundImage = 'url('+ throbber + ')'; var site = querier.textContent; var xhr = new XMLHttpRequest(); xhr.open('GET', sites[site].checkPageURL, true); xhr.setRequestHeader('Accept-Language','en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'); xhr.responseType = 'document'; xhr.timeout = 10000; xhr.withCredentials = true; xhr.onload = function() { processDoc(this.response, querier); }; xhr.ontimeout = xhr.onerror = function(evt) { querier.parentNode.appendChild(document.createElement('pre')).textContent = evt.type.charAt(0).toUpperCase() + evt.type.slice(1) + '.'; querier.style.backgroundImage = 'none'; }; xhr.send(null); } /******************************************************************************/ function processDoc(doc, querier) { var site = querier.textContent; var keyElements = doc.querySelectorAll(sites[site].keyElementSelectors); if (keyElements.length) { querier.parentNode.appendChild(document.createElement('pre')).textContent = [].map.call(keyElements, function(el) { el = el.textContent.trim().replace(/\s+/g, ' '); if (sites[site].re) {el = el.replace(sites[site].re[0], sites[site].re[1]);} return el; }).join('\n'); } else { querier.parentNode.appendChild(document.createElement('pre')).textContent = 'Parsing error.'; } querier.style.backgroundImage = 'none'; } /******************************************************************************/ </script> </head> <body></body> </html>

4.

. , ( ) , , .

IMDb ( ): 250 250 . : , , .

スクリプトの冒頭で、設定に慣れ親しんでいるオブジェクトに会いますが、ここでは簡単です。ページアドレスとキー要素セレクターのみです（原則として、これらは評価要素に関する詳細情報へのリンクになります）。

スクリプトはこれを使用して結果を保存しますがlocalStorage

、ボリュームクエリの長い履歴を保持する予定がある場合は、を使用してデータの保存と取得を実装することをお勧めしますindexedDB

。

各チャートに対して、スクリプトは現在のニュースのブロックと過去の比較の履歴のブロックを作成します（履歴ボタンをクリアし、それを完全に無効にするオプションを含む見出しを使用します.IMDbの場合、リスト自体が大きく、変更が常に発生するため、履歴をオフにします-特にランキング要素の順に、このようなストーリーを使用すると、ページは急速に成長します）。

保存されたデータを持つオブジェクトには、評価の映画へのリンクの配列、その名前の配列、違いの履歴（クリアされておらず無効化されていない場合）、履歴を維持するオプション、および最後のチェックの日付が含まれます。

Chromeでの比較結果（履歴をオフにした場合）は次のようになります（プラスは新しいムービーを先頭から入力することを意味し、マイナス-ムービーを先頭から削除します（どちらも非常に短時間で発生することがあります-リストの最後の要素は特に不安定です）、矢印は位置の移動を示します上下）。

a。映画の場合：

b。テレビ番組の場合：

ここで最後の重要なポイントを1つ挙げる必要があります。 ChromeとFirefoxが提供するlocalStorage

, IE11 — (, , , Edge). Fiddler . . , , IE11 localStorage

. Fiddler-, «AutoResponder» ( , Fiddler , URL):

: localhost

( 127.0.0.1

; , , ), IE11; . IE11. , , , , status quo:

, :

 <!doctype html> <html> <head> <meta charset='UTF-8'><title>IMDb Charts History</title> <style> body > div > * {padding: 5px 20px 5px 20px; margin: 2px;} body > div > a {display: inline-block; background-repeat: no-repeat; background-position: left center;} body > div > pre {border: 1px solid silver;} body > div > pre:not(:first-of-type) {background-color: gainsboro;} body > div > pre > button {margin: 0px 0px 0px 20px;} </style> <script> /******************************************************************************/ 'use strict'; /******************************************************************************/ var sites = { 'IMDb Top 250': { checkPageURL: 'http://www.imdb.com/chart/top', keyElementsSelector: '#main > div > span > div > div > div.lister > table > tbody > tr > td.titleColumn > a', }, 'IMDb Top 250 TV': { checkPageURL: 'http://www.imdb.com/chart/toptv', keyElementsSelector: '#main > div > span > div > div > div.lister > table > tbody > tr > td.titleColumn > a', }, }; /******************************************************************************/ var netData = JSON.parse(localStorage['IMDbChartsHistory.netData'] || '{}'); var throbber = 'data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7'; /******************************************************************************/ document.addEventListener('DOMContentLoaded', init); /******************************************************************************/ function init() { for (var site in sites) { if(!netData[site]) { netData[site] = {lastEntries: [], lastEntriesTitles: [], history: [], saveHistory: true, lastCheck: ''}; } var div = document.body.appendChild(document.createElement('div')); var watcher = div.appendChild(document.createElement('a')); watcher.textContent = site; watcher.target = '_blank'; watcher.href = sites[site].openPageURL || sites[site].checkPageURL; } localStorage['IMDbChartsHistory.netData'] = JSON.stringify(netData); if(!location.hash){getAll();} } /******************************************************************************/ function getAll() { var watchers = document.querySelectorAll('a'); for (var i = 0, watcher; watcher = watchers[i]; i++) { window.setTimeout(getDoc, i*2000, watcher); } } /******************************************************************************/ function getDoc(watcher) { watcher.style.backgroundImage = 'url('+ throbber + ')'; var site = watcher.textContent; var xhr = new XMLHttpRequest(); xhr.open('GET', sites[site].checkPageURL, true); xhr.setRequestHeader('Accept-Language','en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'); xhr.responseType = 'document'; xhr.timeout = 10000; xhr.withCredentials = true; xhr.onload = function() { processDoc(this.response, watcher); }; xhr.ontimeout = xhr.onerror = function(evt) { watcher.parentNode.appendChild(document.createElement('pre')).textContent = evt.type.charAt(0).toUpperCase() + evt.type.slice(1) + '.'; watcher.style.backgroundImage = 'none'; }; xhr.send(null); } /******************************************************************************/ function processDoc(doc, watcher) { var site = watcher.textContent; var siteData = netData[site]; var keyElements = doc.querySelectorAll(sites[site].keyElementsSelector); var info, news; if (keyElements.length) { var now = new Date(Date.now()).toLocaleString(); var curEntries = [].map.call(keyElements, function(el) { el.search = ''; return el.href; }); var curEntriesTitles = [].map.call(keyElements, function(el) { return el.textContent; }); if (siteData.lastEntries.length) { var added = curEntries.filter(function(el) { return siteData.lastEntries.indexOf(el) == -1; }).map(function(el) { var ci = curEntries.indexOf(el); return '+ ' + (ci + 1) + '\t<a href="' + el + '">' + curEntriesTitles[ci] + '</a>'; }); var removed = siteData.lastEntries.filter(function(el) { return curEntries.indexOf(el) == -1; }).map(function(el) { var li = siteData.lastEntries.indexOf(el); return '- (' + (li + 1) + ')\t<a href="' + el + '">' + siteData.lastEntriesTitles[li] + '</a>'; }); var risen = siteData.lastEntries.filter(function(el, li) { var ci = curEntries.indexOf(el); return ci > -1 && ci < li; }).map(function(el) { var ci = curEntries.indexOf(el); return '↑ ' + (siteData.lastEntries.indexOf(el) + 1) + '\t→\t' + (ci + 1) + '\t<a href="' + el + '">' + curEntriesTitles[ci] + '</a>'; }); var fallen = siteData.lastEntries.filter(function(el, li) { return curEntries.indexOf(el) > li; }).map(function(el) { var ci = curEntries.indexOf(el); return '↓ ' + (siteData.lastEntries.indexOf(el) + 1) + '\t→\t' + (ci + 1) + '\t<a href="' + el + '">' + curEntriesTitles[ci] + '</a>'; }); news = added.length || removed.length || risen.length || fallen.length; info = now + ' (previous check: ' + siteData.lastCheck + ')<hr>' + (news? [added.join('\n'), removed.join('\n'), risen.join('\n'), fallen.join('\n')] .filter(function(el){return el.length;}).join('\n\n') : 'No news.' ); } else { info = now + '<hr>First launch. Data saved (' + curEntries.length + ' entries).'; } watcher.parentNode.appendChild(document.createElement('pre')).innerHTML = info; var historyHeader = watcher.parentNode.appendChild(document.createElement('pre')); var historyOptionLabel = historyHeader.appendChild(document.createElement('label')); var historyOption = historyOptionLabel.appendChild(document.createElement('input')); historyOption.type = 'checkbox'; historyOption.checked = siteData.saveHistory; historyOption.addEventListener('click', toggleHistory); historyOptionLabel.appendChild(document.createTextNode('Save history')); var clearer = historyHeader.appendChild(document.createElement('button')); clearer.type = 'button'; clearer.textContent = 'Clear history'; clearer.disabled = !siteData.history.length; clearer.addEventListener('click', clearHistory); watcher.parentNode.appendChild(document.createElement('pre')).innerHTML = siteData.history.length? siteData.history.join('\n<hr>\n') : 'No history.'; siteData.lastEntries = curEntries; siteData.lastEntriesTitles = curEntriesTitles; if (news && siteData.saveHistory) {siteData.history.unshift(info);} siteData.lastCheck = now; localStorage['IMDbChartsHistory.netData'] = JSON.stringify(netData); } else { watcher.parentNode.appendChild(document.createElement('pre')).textContent = 'Parsing error.'; } watcher.style.backgroundImage = 'none'; } /******************************************************************************/ function toggleHistory(evt) { var site = evt.target.parentNode.parentNode.parentNode.querySelector('a').textContent; var siteData = netData[site]; siteData.saveHistory = evt.target.checked; localStorage['IMDbChartsHistory.netData'] = JSON.stringify(netData); } /******************************************************************************/ function clearHistory(evt) { var site = evt.target.parentNode.parentNode.querySelector('a').textContent; var siteData = netData[site]; siteData.history = []; evt.target.parentNode.parentNode.querySelector('pre:last-of-type').innerHTML = 'History cleared.'; localStorage['IMDbChartsHistory.netData'] = JSON.stringify(netData); evt.target.disabled = true; } /******************************************************************************/ </script> </head> <body></body> </html>

VII. アプリ

1. IE — , HTML-. , IE , :

 <!doctype html> <html> <head><meta charset="UTF-8"><title>Bookmarklets</title></head> <body style="text-align: center; font-family: monospace; font-size: 12pt;"> <p><a href="javascript:(function(url, xhr) {if(!url) {return;}xhr = new XMLHttpRequest();try {xhr.open('HEAD', url, true);}catch (e) {alert(e.name + ': ' + e.message);return;}xhr.setRequestHeader('Accept-Language', 'en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001');xhr.responseType = 'document';xhr.timeout = 10000;xhr.withCredentials = true;xhr.onload = function(evt, l) {l = this.getResponseHeader('Content-Length');alert([this.responseURL || '?',this.getResponseHeader('Content-Type') || '?',this.getResponseHeader('Last-Modified') || '?',l ?[l + ' B',(l / 1024) .toFixed(3) + ' kB',(l / 1048576) .toFixed(3) + ' MB',(l / 1073741824).toFixed(3) + ' GB'].join(' \u2248 '):'?'].join('\n\n') + '\n\n');};xhr.ontimeout = xhr.onerror = function(evt) {alert(evt.type.charAt(0).toUpperCase() + evt.type.slice(1) + '.');};try {xhr.send(null);}catch (e) {alert(e.name + ': ' + e.message); return;}})(document.activeElement.href || prompt('URL:'))"> </a></p> <p><a href="javascript:(function(e,t,n,a,A,i,r,o,l,p,d,s){function h(e,t){s.style.backgroundImage='url('+n+')',t=new XMLHttpRequest;try{t.open('GET',e.href,!0)}catch(a){return s.style.backgroundImage='none',void(s.textContent=a.name+': '+a.message)}t.setRequestHeader('Accept-Language','en-US,en;q=0.8,ru;q=0.6,uk;q=0.4,qya;q=0.001'),t.responseType='document',t.timeout=1e4,t.withCredentials=!0,t.onload=function(){s.style.backgroundImage='none',this.response&&this.response.title?(s.textContent=this.response.title,e.setAttribute('data-breadcrumbs-doc-title',this.response.title)):(s.textContent='?',e.setAttribute('data-breadcrumbs-doc-title','?'))},t.ontimeout=t.onerror=function(e){s.style.backgroundImage='none',s.textContent=e.type.charAt(0).toUpperCase()+e.type.slice(1)+'.'};try{t.send(null)}catch(a){s.style.backgroundImage='none',s.textContent=a.name+': '+a.message}}for(t=e.activeElement.href?e.activeElement:location,n='data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7',a=e.createElement('div'),a.setAttribute('data-breadcrumbs-main',''),a.appendChild(e.createElement('style')).textContent='div[data-breadcrumbs-main] {position:fixed; top:0px; left:0; z-index:999999; width:100%; padding:10px !important; background-color:white !important; outline:1px solid black !important; font-size: 12pt !important; text-align: left !important;}\ndiv[data-breadcrumbs-main] a {font-size: 12pt !important; text-decoration: underline !important;}\ndiv[data-breadcrumbs-main] div {margin-top: 20px!important; color: silver !important;}\ndiv[data-breadcrumbs-info-title] {background-repeat: no-repeat !important; background-position: left center !important; padding-left: 20px !important;}',A=t.protocol+(/:[\/][\/]/.test(t.href)?'//':''),a.appendChild(e.createElement('span')).textContent=A,i=t.hostname.split('.'),r=i.length,r>1&&(i.splice(r-2,2,i.slice(r-2).join('.')),r--),o=0;r>o;o++)l=i[o],o>0&&(a.appendChild(e.createElement('span')).textContent='.'),p=a.appendChild(e.createElement('a')),p.textContent=l,p.href=A+i.slice(o).join('.');if(A+=t.hostname,t.port&&/:\d+$/.test(t.host)&&(a.appendChild(e.createElement('span')).textContent=':',p=a.appendChild(e.createElement('a')),p.textContent=t.port,A+=':'+t.port,p.href=A),a.appendChild(e.createElement('span')).textContent='/',A+='/',t.pathname.length>1)for(i=t.pathname.split('/'),i.shift(),r=i.length,o=0;r>o;o++)l=i[o],r-1>o?(p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,a.appendChild(e.createElement('span')).textContent='/',A+='/',p.href=A):''!==l&&(p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,p.href=A);if(t.search)for(i=t.search.split('&'),r=i.length,i[0]=i[0].substring(1),a.appendChild(e.createElement('span')).textContent='?',A+='?',o=0;r>o;o++)l=i[o],o>0&&(a.appendChild(e.createElement('span')).textContent='&',A+='&'),p=a.appendChild(e.createElement('a')),p.textContent=l,A+=l,p.href=A;t.hash&&(a.appendChild(e.createElement('span')).textContent='#',p=a.appendChild(e.createElement('a')),p.textContent=t.hash.substring(1),A+=t.hash,p.href=A),a.querySelector('a:last-of-type').href==location.href&&a.querySelector('a:last-of-type').setAttribute('data-breadcrumbs-doc-title',e.title),d=a.appendChild(e.createElement('div')),d.setAttribute('data-breadcrumbs-info-url',''),d.textContent='URL',s=a.appendChild(e.createElement('div')),s.setAttribute('data-breadcrumbs-info-title',''),s.textContent='Title',a.addEventListener('mouseover',function(e,t,n){(t=e.target.href)&&(d.textContent=t,(n=e.target.getAttribute('data-breadcrumbs-doc-title'))?s.textContent=n:h(e.target))}),a.addEventListener('dblclick',function(){a.parentNode.removeChild(a)}),e.body.appendChild(a)})(document)"> </a></p> </body> </html>

2. - , , , ( IE):

Internet Explorer 11のブックマークレット：ストレージ形式、制限と暗黙のルール、潜んでいるバグ

ブックマークレット：XPathが利用できず、セレクターとDOMナビゲーションメソッドが十分でない場合

ブックマークレット用の信頼できるlocalStorage

ご清聴ありがとうございました）

PS 仮想マシンをチェックすると、2015年7月22日（ファイルバージョンによる）のMS Edgeバージョン11.00.10240.16397で、20.10240.16384.0（設定の情報による）でもあることが示されます

。基本およびサードパーティのCookieはデフォルトで有効になっているため、追加の設定XMLHttpRequest.withCredentials

は不要です。

b。 null Access-Control-Allow-Origin

リダイレクト中のエラーは発生しなくなりました。リダイレクト後、すべてが意図したとおりに機能するためOrigin

送信されnull

ます。

c。プロパティnavigator.languages

はまだ実装されていません。

d。プロパティXMLHttpRequest.responseURL

はまだ実装されていません。

e。localStorage

ローカルページのローカルページのストレージはまだ実装されていません。

クライアント側のCORSエミュレーション：拡張機能のないいくつかのカスタムタスクのクロスブラウザーソリューション

I.問題は何ですか

II。 解決しようとする私的な試み

III。 ワンストップソリューション。

IV。 クイックスタート

V.メカニズムのいくつかの機能

VI.

VII. アプリ

More articles:

II。解決しようとする私的な試み

III。ワンストップソリューション。

IV。クイックスタート