Разрешения Iframe Uploader

Question

У меня есть этот загрузчик файлов внутри iframe, но когда я встраиваю его в другой веб-сайт, он не позволяет мне, Firebug отображает эту ошибку:

В доступе отказано <<1004 *http://www.mywebsite.com</a>> чтобы получить свойство Window.document из <<a href="http://www.myotherwebsite.com" rel="nofollow">http://www.myotherwebsite.com>.

Что приходит к этой строке:

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

Я пытаюсь стилизовать iframe с рамкой после загрузкизавершен.

Я видел другие вопросы, решение состоит в том, чтобы создать прокси на стороне сервера, и я не знаю, как создать прокси для его работы и позволить jQuery выполнить.

Приветствия.

Награда добавлена.

Answer 1

Серверный прокси может помочь вам решить эту проблему. В то время как браузер может только AJAX-вызов на свой сервер, используя тот же домен, сам сервер может делать вызов на любой другой сервер без ограничений.

Допустим, вам нужно сделать AJAX-запрос к API погоды Yahoo. Поскольку вы не можете сделать запрос с 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 после завершения загрузки файла. Простым решением было бы опросить сервер родительского документа и заставить прокси-сервер опрашивать ваш сервер загрузки, пока файл не будет найден. Как только файл найден, ответ может быть использован для вызова кода JQuery, который изменяет стиль iframe.

Чтобы концепция прокси работала, на каждом веб-сайте, в который вы встраиваете загрузчик, должен быть развернут собственный прокси-сервер в том же домене, который проверит ваш сайт загрузки на наличие файла, а затем вернет этот ответ обратно. клиент.

Родительскому документу также необходимо знать имя загружаемого файла. Из-за одной и той же политики домена вы не сможете определить имя файла, что создает проблему при использовании прокси-сервера для проверки существования файла. Откуда вы знаете, что вы проверяете?

Answer 2

Если вы владеете всеми веб-сайтами, включая сервер загрузки и веб-сайт, на котором вы развертываете загрузчик, возможно, вам помогут преодолеть некоторые простые хитрости DNS.

• Скажем, например, домен вашего сервера загрузки: upload.example.com.
• Допустим, ваш сервер www.example.com.

В приведенном выше случае вы можете включить межсайтовый скриптинг, установив свойство document.domain:

document.domain = "example.com";

Это позволяет www.example.com взаимодействовать с iframe upload.example.com.

Возможность связи между поддоменами может помочь вам общаться между другими веб-серверами, при условии, что вы являетесь владельцем веб-сайтов.

Что вы делаете, если домены разные?

Предположим следующее:

• upload.example.com ваш сервер загрузки.
• www.domain.com - ваш веб-сайт, который является родительским документом, содержащим загрузчик iframe.

Теперь, опять же, мы предполагаем, что вы владеете обоими этими доменными именами или, по крайней мере, имеете доступ к настройкам. Используя то, что мы знаем выше о включении межсайтовых сценариев на поддоменах, вы можете воспользоваться некоторыми хитростями DNS.

• В вашем диспетчере DNS создайте CNAME для upload.domain.com и укажите этот поддомен на том же сервере, что и upload.example.com. Когда вы закончите, оба upload.example.com и upload.domain.com указывают на один и тот же сервер и приложение PHP.
• In www.domain.com, вставьте upload.domain.com и установите document.domain="domain.com";
• В www.example.com, вставка upload.example.com и установка document.domain="example.com";

Вы можете видеть, что в обоих случаях имя домена вашего веб-сайта совпадает с именем домена загрузчика, а свойство document.domain соответствует домену.

При вызове $('iframe', top.document).css('border', '1px green solid'); вы не получите никаких ошибок разрешения.

Подводя итог, просто убедитесь, что для любого веб-сайта, в который вы вставили этот iframe-загрузчик, что вы создали псевдоним CNAME для этого загрузчика, который соответствует домену веб-сайта, и что свойство document.domain установлено в обоих загрузчиках. и веб-сайт.

Вы можете использовать свойство 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 доменов. Если вы используете другой сервер, у большинства из них есть какой-то метод установки ServerAlias.

Answer 3

Вы можете легко применить easyXDM к этой проблеме - у него даже есть демонстрация о том, как выполнять междоменную загрузку с данными ответов.

В этом сообщении в блоге Я также объясняю основы этого.

Answer 4

Вы можете просто сделать это:

$("iframe").css('border', '1px green solid'); после завершения загрузки

Я создал пример скрипки здесь:

http://jsfiddle.net/Mutant_Tractor/erAdS/8/

Answer 5

Разве это не просто фрейм HTML-контента?Нельзя ли добавить рамку вокруг тега body внутри iframe напрямую?

Если вы боитесь, что содержимое будет перемещаться из-за 2 дополнительных пикселей, просто поместите прозрачную рамку того же элемента вначало.

Answer 6

Я бы пошел по другому пути, удалил границу из содержащего документ, добавил бы фальшивую границу внутри фрейма и изменил бы ее, проблема с междоменами решена.

Answer 7

прокси на стороне сервера

конфигурация 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

Answer 8

Привет, на днях я наткнулся на статью, пытаясь найти способ разговаривать между iFrames и окнами, которые загружают их, используя имена.

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

Демонстрация - http://ajaxify.com/run/crossframe/duo/

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

Итак, ваш первый сайт загружается на ваш второй сайт с iFrame выше.Ко второму коду сайта должен быть добавлен этот код.

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

Я считаю, что вы также можете выполнять вызовы функций в iFrame с сайта 1:

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