IFRAMEアップローダー許可

StackOverflow https://stackoverflow.com/questions/4875646

質問

このファイルアップローダーがiframe内にありますが、別のWebサイトに埋め込んだときは、FireBugにこのエラーを表示します。

許可が拒否されましたhttp://www.mywebsite.com>プロパティwindow.documentを取得しますhttp://www.myotherwebsite.com>.

これがこの行に来ます：

$('iframe', top.document).css('border', '1px green solid');

アップロードが完了したら、iframeを境界線でスタイリングしようとしています。

他の質問を見ました。解決策はサーバー側のプロキシを作成することであり、プロキシを機能させる方法がわかりません。

乾杯。

賞金が追加されました。

役に立ちましたか？

解決

サーバー側のプロキシは、この問題を克服するのに役立つ場合があります。ブラウザは同じドメインを使用してサーバーにAjax呼び出しを行うことができますが、サーバー自体は制限なしに他のサーバーに呼び出を行うことができます。

YahooのWeather APIにAjaxリクエストを行う必要があるとしましょう。同じドメインポリシーのためにwww.example.comからwww.yahoo.comにリクエストを行うことはできないため、回避策は最初にサーバーに電話をかけ、次にサーバーにYahooにリクエストを行わせることです。以下は、まさにそれを行うプロキシの例です。

リクエスト： http://www.example.com/weather.php?zip=97015

<? // Yahoo Weather proxy

$zip_code = $_REQUEST["zip"];

// default to Portland, OR for testing
if($zip_code == null || $zip_code == '')
    $zip_code = "97206";

// delegate request to the other server, circumventing the same-domain policy.
$request = "http://weather.yahooapis.com/forecastrss?p=".$zip_code;

$response = file_get_contents($request);

// Retrieve HTTP status code
list($version,$status_code,$msg) = explode(' ',$http_response_header[0], 3);


// Check the HTTP Status code
switch($status_code) {
    case 200:
            // Success
            break;
    case 503:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 503. That means: Service unavailable. An internal problem prevented us from returning data to you.');
            break;
    case 403:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 403. That means: Forbidden. You do not have permission to access this resource, or are over your rate limit.');
            break;
    case 400:
            // You may want to fall through here and read the specific XML error
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 400. That means:  Bad request. The parameters passed to the service did not match as expected. The exact error is returned in the XML response.');
            break;
    default:
            die('Your call to Yahoo Web Services returned an unexpected HTTP status of:' . $status_code);
}


echo $response;
?>

これで、あなたの場合、ファイルがアップロードされたときにiframeをスタイル化する必要があります。簡単な解決策は、親文書のサーバーにポーリングし、プロキシにファイルが見つかるまでアップロードサーバーを投票することです。ファイルが見つかったら、応答を使用して、IFRAMEスタイリングを変更するjQueryコードを呼び出すことができます。

プロキシコンセプトが機能するためには、アップローダーを埋め込んだ各Webサイトでは、ファイルの存在がアップロードされ、その応答をクライアントに返すように、独自の同じドメインプロキシ展開を展開する必要があります。

また、親のドキュメントは、アップロードされているファイルの名前をどうにか知る必要があります。同じドメインポリシーのため、ファイル名を決定できない場合があります。これは、プロキシを使用してファイルの存在を確認するときに課題を提示します。チェックしていることをどうやって知っていますか？

他のヒント

こんにちは私は先日、名前を使用してそれらをロードするウィンドウの間で前後に話し合う方法を見つけようとしている間、記事に出会いました。

http://softwareas.com/cross-domain-communication-with-iframes

デモ - http://ajaxify.com/run/crossframe/duo/

// site 1 code
<iframe name="frame1" src="site2">

最初のサイトが上記のiframeを使用して2番目のサイトにロードされているとします。 2番目のサイトコードには、このコードが追加されている必要があります。

//site 2 code
$(something).load('url', function() {
    parent.frames["frame1"].css('border', '1px green solid');
});

また、サイト1からiframeに関数呼び出しを行うこともできると思います。

//site 1 code
parent.frames["frame1"].functionName(variables);

サーバー側のプロキシ

Apache構成

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

ProxyRequests Off

<Proxy *>
Order deny,allow
Allow from all
</Proxy>

ProxyPass /foo http://mywebsite.com/
ProxyPassReverse /foo http://mywebsite.com/

これが役立つことを願っています

したがって、www.bar.comからwww.bar.com/fooへのリクエストを作成すると、apacheはwww.mywebsite.comに渡されます。

私は逆の方向に進み、含まれるドキュメントから境界線を削除し、iframe内に偽の境界を追加して、それを変更して、Crossdomainの問題が解決しました。

フレームはHTMLコンテンツだけではありませんか？ iframe内のボディタグの周りに境界線を直接追加できませんか？

2つの追加のピクセルのためにコンテンツが移動することを恐れている場合は、最初に同じSiezの透明な境界線を置くだけです。

あなたはこれを行うことができます：

$("iframe").css('border', '1px green solid'); アップロードすると完了します

ここにフィドルの例を作成しました：

http://jsfiddle.net/mutant_stractor/erads/8/

簡単に適用できます EasyXDM この問題に - それはあります デモ 応答データを使用してクロスドメインのアップロードを行う方法の。

の このブログ投稿 また、その背後にある基本についても説明します。

アップロードサーバーやアップロードを展開しているWebサイトなど、すべてのWebサイトを所有している場合、おそらくいくつかの簡単なDNSトリックが克服するのに役立ちます。

  • たとえば、アップロードサーバードメインは次のとおりです。 upload.example.com.
  • サーバーがそうであるとしましょう www.example.com.

上記の場合、Document.domainプロパティを設定して、クロスサイトスクリプトを有効にすることができます。

document.domain = "example.com";

これにより、www.example.comはupload.example.com iframeと通信できます。

サブドメイン間で通信する機能は、Webサイトを所有していると仮定して、他のWebサーバー間で通信するのに役立ちます。

ドメインが違う場合はどうしますか？

以下を仮定しましょう。

  • upload.example.com アップロードサーバーです。
  • www.domain.com あなたのウェブサイトは、アップローダーのiframeを含む親文書です。

ここでも、これらのドメイン名の両方を所有しているか、少なくとも設定にアクセスできると仮定しています。サブドメインでクロスサイトスクリプトを有効にすることについて上記で知っていることを使用すると、いくつかのDNSトリックを使用して役立ちます。

  • DNSマネージャーで、cnameを作成します upload.domain.com そのサブドメインと同じサーバーにポイントします upload.example.com. 。あなたが終わったら、両方 upload.example.com と upload.domain.com どちらも同じサーバーとPHPアプリケーションを指します。
  • の www.domain.com, 、埋め込み upload.domain.com とセット document.domain="domain.com";
  • の www.example.com, 、埋め込み upload.example.com ＆ 設定 document.domain="example.com";

どちらの場合も、Webサイトドメイン名がアップローダードメイン名と一致し、Document.domainプロパティがドメインと一致することがわかります。

あなたが電話するとき $('iframe', top.document).css('border', '1px green solid');, 、許可エラーは得られません。

要約すると、アップローダーIFRAMEを埋め込んだWebサイトについて、Webサイトドメインに一致するアップローダーのcnameエイリアスを作成したこと、およびdocument.domainプロパティがアップローダーとWebサイトの両方で設定されていることを確認してください。 。

使用できます document.referrer iframeのプロパティ親文書のコンテキストを動的に決定して、ドメインプロパティをどのように設定するかを決定するには、

// uploader file code

// array split by period to get domain ["http://uploader", "example", "com/iframe/uploadFile", "php"]
var domainSplit = document.referrer.split(".");  

// the 2nd place in the array is the domain.  You may need to improve this for deeper subdomains
document.domain = domainSplit[1];

ノート： 私はあなたがApacheとPHPを使用していると仮定しています。もしそうなら、あなたはあなたのすべてのためにServerAliasエントリを作成できます upload.XYZ.com ドメイン。別のサーバーを使用している場合、それらのほとんどにサーバーの設定方法があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top