web-dev-qa-db-ja.com

マッシュアップは同一生成元ポリシーでどのように機能しますか？

Javascriptが同じドメインのスクリプトへのアクセスのみを許可されている場合、Webサイトは、別のドメインのコンテンツを読み取って変更する必要があるマッシュアップをどのように作成できますか？

web-developmentjavascriptweb-applications
11
Jack Richardson

クロスブラウザソリューション

JSONP

アクセスしようとしているAPIがサポートしている場合[〜＃〜] jsonp [〜＃〜]、でjavascript関数名を指定するだけで済みますリクエストすると、JSONPはmyfunc({the:data});のようなjavascriptを返します。これは、通常のjavascriptのように実行できます。そのため、「リクエストを送信」するために新しい<script src="www.website.com/somecall?jsonp=myfunc">タグを作成します（jQueryはこれを自動的に行います） type: jsonpリクエストで$.ajaxを使用する場合）。

欠点は、JSONPをサポートするためにAPIのプロバイダーが必要になることです。

Flash

Flashは、ターゲットWebサイトのルートにcrossdomain.xmlファイルがあり、それが許可されている限り、クロスドメインコンテンツにアクセスできます。これは通常、APIを提供するサーバーの場合です。

欠点は、ユーザーのブラウザにFlashが必要であり、データを取得するWebサイトにクロスドメイン要求を許可するcrossdomain.xmlが必要であることです。

同じドメイン名のサーバーサイドスクリプト

PHPのようなサーバーサイド言語にはBSの同じドメインの制限がないため、プロキシとして機能するスクリプトを作成できます（たとえば、cURLなどのhttp拡張機能の1つを介してダウンロードします）。

追加の利点は、サーバー上のデータをWebページ/ JavaScriptに転送する前にクリーンアップ（または複数のソースをマッシュアップ）できるため、データの有用な部分のみを抽出できることです。これは、モバイルWebアプリを実行するときに便利です。帯域幅が問題になる可能性がある場合。

欠点は、すべてのリクエストがサーバーを経由する必要があるため、サーバーの負荷が増加することです。

ただし、ターゲットがクロスドメインまたはjsonpをサポートする必要がないため、どのリソースでも機能するという利点があります。したがって、他に何も機能しない場合、これは機能します。

一部のブラウザに固有のソリューション

インターネットエクスプローラ

Internet Explorerには クロスドメインリクエスト

Firefox

Firefox 3.5+には クロスオリジン共有標準 がありますが、アクセスしようとしているリソースに特別なヘッダーを含める必要があります。 PHPの場合：

header("content-type: Access-Control-Allow-Origin: *");
header("content-type: Access-Control-Allow-Methods: GET");

他のいくつかの主要なブラウザもこれをサポートしています したがって、古いブラウザをサポートする必要がなく、アクセスしようとしているリソースを取得できる場合それらのヘッダーを送信してください。これが最善の策かもしれません。そうでない場合は、サーバーサイドスクリプトをお勧めします。

Firefoxにもユーザー設定capability.policy.default.XMLHttpRequest.openがありますが、ユーザーがブラウザーで設定を変更することは期待していません。

7
wildpeaks

そのために（別のドメインの）APIを使用できます。 Javascriptは、Webサーバー（ドメイン）上にあるPHPファイル（または他のスクリプトファイル）を呼び出します。これにより、（CURLを使用する別のドメインの）APIが呼び出され、君は。

0
Harish Kurup