
良い一日。
今日は、ユーザースクリプトでクロスドメインクエリを整理するためのオプションを検討します。
このメカニズムまたはそのメカニズムの実装については詳しく説明しませんが、
クロスドメインクエリ用のクロスブラウザシェルの例を示し
ます 。
エントリー
ご存知のように、ブラウザ環境の自然環境における純粋な形では、クロスドメインリクエストは些細なことではありません(
Same originポリシーのおかげです)。
CORSを使用したXMLHttpRequestのサポートは、すべてのブラウザーで使用できるわけではありません(オペラではまだまったく発生していません)。
JSONPではGETリクエストのみが許可されており、フレームを介したプロキシにより、サードパーティのライブラリを使用したり、気味の悪い自転車を作成したりする必要があります。
休憩: この場所まで読んで単語を理解できなかった場合は、休憩を取り、不明な用語をグーグルで飲み、お茶を飲みます。 元気づけて、「指で」とコードでさらに説明があります。 初心者のスクリプトライターは簡単に息を吹き込むことができます。詳細は説明しませんが、動作するコードとすべてのリンクを含む理論のドロップがzashashnikにあります 。
基本
クロスドメインクエリの問題は何ですか? すべてのブラウザは、セキュリティの自由を制限します。 したがって、「信頼できない」ソースからの要求は抑制されます。 しかし、ソースを信頼する場合はどうなりますか? そうです、「クランチ」を使用してください(多くは一般的な方法です)。
ユーザースクリプトの一部として、スクリプトが実行される環境によって課せられる制限(
この記事の詳細)と、追加の重要な条件:
サーバーパーツへのアクセスの可用性(特定の要求メソッドを実装するためのサーバーAPIの可用性(または作成))を考慮する必要があります!
次の表に、いくつかの「クランチ」とユーザースクリプトへの適用性を示します。
メソッド名+リンク | 簡単な説明 | サーバーアクセスが必要 | ユーザースクリプトで使用可能 |
---|
ジョンソン
Habréに関する記事
| GETリクエストのみ 。 ドキュメントの本文に<script>タグを挿入すると、情報が要求されます。 サーバーの応答はスクリプトの本文に分類され、ブラウザによって実行されます。 同時に、「ラッパー」関数をスクリプトで定義する必要があります。これはサーバーから送信され、応答に含まれます。
| アクセスまたはJSONP APIが必要です
| IE7 + オペラ Firefox
|
XHR + CORS
Habréに関する記事 Mozilla Hacksに関する記事
| 要求は、特別な要求ヘッダーの仕様を使用してXMLHttpRequest(XHR)を介して実装されます。
| アクセスが必要またはXHR CORS API
| IE8 + Firefox Chrome(拡張機能)
|
iframeトランスポート
| 要求は、ドキュメントに非表示のiframeを配置することで実行され、親ウィンドウに応答が返されます。 かなり混乱した方法です。
| アクセスが必要です。 最も簡単な方法は、 easyXDMライブラリを使用することです(ChromeとFirefoxには少し変更が必要です)。
| IE7 + Firefox オペラ Chrome(拡張機能)
|
ユーザースクリプトのネイティブ機能
| 各ブラウザに固有。 IEでは、クラスとして存在しません。 Firefox + GreaseMonkeyは、GM_xmlHttpRequest(XMLHttpRequestの類似物)、GET + POST要求を提供します。 Chromeは完全なクロスドメインXMLHttpRequestを提供しますが、拡張機能、GET + POST要求のみに対応しています。 OperaにはbeforeScriptイベントがあり、これを使用して<script>経由でGETリクエストを作成できます(JSONPではないため、サーバーへのアクセスは不要です)。
| サーバーアクセスは不要です 。
| Firefox オペラ Chrome(拡張機能)
|
ほとんどのスクリプトでは
、サーバーへのアクセスが重要なパラメーターです。 さらに、
GET要求が最もよく
使用されます (スクリプトが悪意のない場合、メガインテリジェンスに恵まれていない場合、またはサービスの一部ではない場合)。
テーブルを慎重に検討した後
、クロスブラウザユーザースクリプトのクロスドメインクエリを整理する方法のおおよそのリストを
作成できます 。
- Chrome =パッケージング+ XMLHttpRequestのプロキシ( 3番目の記事で説明 )
- Firefox + GreaseMonkey = GM_xmlHttpRequestを使用
- Opera = beforeScriptイベントとスクリプトトランスポートの使用
- IE7 + = JSONPを使用
短所:
- GETリクエストのみ (90%は重要ではありません)
- IEはサーバーまたはJSONP APIにアクセスする必要があります(90%は重要ではありませんが、残りはYQLで解決できます)
- 輸送エラーの自明でない処理
- オペラには追加のファイルが必要です
GM_xmlHttpRequestの詳細
物件の詳細な説明は
、グリーススポットのウェブサイトにあります。
GM_xmlHttpRequestはXMLHttpRequestの類似物であり、同じプログラミングインターフェイスを提供することを知る必要があります。
リクエストを送信する関数は次のようになります(リクエストの実行時に安全でないウィンドウからユーザースクリプトコードにアクセスするときにセキュリティエラーを回避するためにsetTimeoutハックが適用されました)。
var GMTransport = function(url, onDone){ setTimeout(function(){GM_xmlhttpRequest({ method : "GET", url : url, onload : function(x) { var o = x.responseText; if (onDone) { onDone(o); } } });},0); }
BeforeEvent
このイベントはOperaにのみ関係します。
実行する前にスクリプト要素がドキュメント
に現れると呼び出さ
れます。 イベントをインターセプトし、スクリプトを停止できます。 これを使用します。
重要: Operaの場合、イベントをマウントする別のファイルを提供する必要があります。 これは、カスタムスクリプトの実行の特性によるものです。 注: 追加のスクリプトにメタデータがあってはなりません ! スクリプトの名前はアンダースコアで始まり、スクリプトが最初にロードされます。追加のスクリプトへのリンク:
_opera-xdr-engine.jspastebin.comの追加のスクリプトコード。
要求は、次の関数を呼び出すことによって行われます。
var scriptTransport = function(url, onDone){ var t = document.createElement("script"); t.src = url; t._callback = onDone; document.body.appendChild(t); }
注: Operaには、別のソリューションtytsがあります。 私はそれを選びませんでしたが、おそらくここで紹介するよりはましです。ジョンソン
JSONP実装は宿題のままです:)
幸いなことに、ネット上には実例がたくさんあります。
しかし、最初に、自問する必要があります。IEでのユーザースクリプトのサポートは本当に必要ですか?
Chromeを理解する
Chromeでリクエストを行うには、ユーザースクリプトを拡張機能にパックする必要があります。
この方法については、
以前の記事で詳しく説明して
います 。 クロスドメインリクエストプロキシの例もここに記載されています(リクエスト関数呼び出しは、シェルのテキストに記載されています)。
あなたが記事を読んでスクリプトをパックする方法を知って
いるリンクをたどるのが面倒なら、background.htmlのコード
はpastebinで利用可能です 。
シェル
上記のメソッドはすべてシェルに収集されます。
コードは「ベストコード2011」のふりをしていませんが、動作しており、商用ユーザースクリプトのさまざまなバージョンで使用されています(はい、いくつかあります)。
シェルコードは
pastebin.comにあります。
呼び出しによるクロスドメイン要求
xdr.xget(url, callback);
必要なトランスポートの決定は自動的に行われます。
- ユーザースクリプトの書き方を学ぶ
- ユーザースクリプト もっと深く
- ユーザースクリプト Chromeのユーザースクリプトをパックします
- »Usersctripts。 クロスドメインリクエスト