Sposoby obchodzenia polityki tego samego pochodzenia

Ta sama polityka pochodzenia

Chciałem stworzyć wiki społeczności dotyczące zasad HTML / JS tego samego pochodzenia, aby pomóc każdemu, kto szuka tego tematu. Jest to jeden z najczęściej wyszukiwanych tematów w SO i nie ma dla niego skonsolidowanej wiki, więc zaczynam :)

Ta sama zasada pochodzenia zapobiega pobieraniu lub ustawianiu właściwości dokumentu z innego źródła przez dokument lub skrypt załadowany z jednego źródła. Ta polityka sięga aż do Netscape Navigator 2.0.

Jakie są Twoje ulubione sposoby obchodzenia zasad dotyczących tego samego pochodzenia?

Prosimy o rozwiązywanie przykładów, a najlepiej także łączenie źródeł.

document.domainmetoda

• Typ metody: iframe .

Zauważ, że jest to metoda iframe, która ustawia wartość document.domain na przyrostek bieżącej domeny. Jeśli tak się stanie, krótsza domena jest używana do kolejnych kontroli pochodzenia. Na przykład załóżmy, że skrypt w dokumencie http://store.company.com/dir/other.htmlwykonuje następującą instrukcję:

document.domain = "company.com";

Po wykonaniu tej instrukcji strona przeszłaby sprawdzenie pochodzenia http://company.com/dir/page.html. Jednak tego samego rozumowania, company.com nie może ustawić document.domain się othercompany.com.

Dzięki tej metodzie możliwe byłoby wykonanie javascript z elementu iframe pochodzącego z subdomeny na stronie pochodzącej z domeny głównej. Ta metoda nie jest odpowiednia dla zasobów międzydomenowych, ponieważ przeglądarki takie jak Firefox nie pozwalają na zmianę document.domaindomeny na całkowicie obcą.

Źródło: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

Metoda udostępniania zasobów między źródłami

• Typ metody: AJAX .

Współdzielenie zasobów między źródłami (CORS) to robocza wersja robocza W3C, która definiuje sposób komunikacji przeglądarki i serwera podczas uzyskiwania dostępu do źródeł z różnych źródeł. Podstawową ideą CORS jest użycie niestandardowych nagłówków HTTP, aby umożliwić zarówno przeglądarce, jak i serwerowi wzajemne poznanie się, aby określić, czy żądanie lub odpowiedź powinny się powieść, czy nie.

W przypadku prostego żądania, które używa niestandardowych nagłówków GETlub POSTbez nich i którego treść jest text/plain, żądanie jest wysyłane z dodatkowym nagłówkiem o nazwie Origin. Nagłówek Origin zawiera pochodzenie (protokół, nazwę domeny i port) strony żądającej, dzięki czemu serwer może łatwo określić, czy powinien dostarczyć odpowiedź. Przykładowy Originnagłówek może wyglądać następująco:

Origin: http://www.stackoverflow.com

Jeśli serwer zdecyduje, że żądanie powinno być dozwolone, wysyła Access-Control-Allow-Originnagłówek powracający do tego samego źródła, które zostało wysłane, lub *jeśli jest to zasób publiczny. Na przykład:

Access-Control-Allow-Origin: http://www.stackoverflow.com

Jeśli brakuje tego nagłówka lub źródła nie są zgodne, przeglądarka odrzuca żądanie. Jeśli wszystko jest w porządku, przeglądarka przetwarza żądanie. Należy pamiętać, że ani żądania, ani odpowiedzi nie zawierają informacji o plikach cookie.

Zespół Mozilli sugeruje w swoim poście na temat CORS , aby sprawdzić istnienie withCredentials właściwości, aby określić, czy przeglądarka obsługuje CORS przez XHR. Następnie możesz powiązać istnienie XDomainRequestobiektu, aby objąć wszystkie przeglądarki:

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://www.stackoverflow.com/");
if (request){
    request.onload = function() {
        // ...
    };
    request.onreadystatechange = handler;
    request.send();
}

Zwróć uwagę, że aby metoda CORS działała, musisz mieć dostęp do dowolnego typu mechaniki nagłówka serwera i nie możesz po prostu uzyskać dostępu do zasobów stron trzecich.

Źródło: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

window.postMessagemetoda

• Typ metody: iframe .

window.postMessage, po wywołaniu, powoduje wywołanie a MessageEventw oknie docelowym, gdy jakikolwiek oczekujący skrypt, który musi zostać wykonany, zakończy się (np. pozostałe programy obsługi zdarzeń, jeśli window.postMessagejest wywoływane z modułu obsługi zdarzeń, wcześniej ustawione oczekujące limity czasu itp.). MessageEventMa wiadomość typu, datanieruchomości, który jest ustawiony na wartość ciągu pierwszego argumentu dostarczonych window.postMessageAn originnieruchomość odpowiadającą pochodzenia głównego dokumentu w oknie wywołującego window.postMessagew momencie window.postMessagenazwano oraz sourcemienia, które jest okno z który window.postMessagejest nazywany.

Aby użyć window.postMessage, należy dołączyć detektor zdarzeń:

    // Internet Explorer
    window.attachEvent('onmessage',receiveMessage);

    // Opera/Mozilla/Webkit
    window.addEventListener("message", receiveMessage, false);

A receiveMessagefunkcja musi zostać uznana:

function receiveMessage(event)
{
    // do something with event.data;
}

Element iframe poza witryną musi również prawidłowo wysyłać zdarzenia za pośrednictwem postMessage:

<script>window.parent.postMessage('foo','*')</script>

Każde okno może uzyskać dostęp do tej metody w dowolnym innym oknie, w dowolnym momencie, niezależnie od lokalizacji dokumentu w oknie, aby wysłać do niego wiadomość. W związku z tym każdy detektor zdarzeń używany do odbierania wiadomości musi najpierw sprawdzić tożsamość nadawcy wiadomości, używając pochodzenia i prawdopodobnie właściwości źródła. Nie można tego bagatelizować: brak sprawdzenia origini prawdopodobnie sourcewłaściwości umożliwia ataki typu cross-site scripting.

Źródło: https://developer.mozilla.org/en/DOM/window.postMessage

Metoda odwrotnego proxy

• Typ metody: Ajax

Skonfigurowanie prostego odwrotnego proxy na serwerze pozwoli przeglądarce na użycie ścieżek względnych dla żądań Ajax, podczas gdy serwer będzie działał jako proxy do dowolnej lokalizacji zdalnej.

Jeśli używasz mod_proxy w Apache, podstawową dyrektywą konfiguracyjną do skonfigurowania zwrotnego proxy jest ProxyPass. Zwykle jest używany w następujący sposób:

ProxyPass     /ajax/     http://other-domain.com/ajax/

W takim przypadku przeglądarka mogłaby zażądać /ajax/web_service.xmljako względnego adresu URL, ale serwer mógłby to obsłużyć, działając jako serwer proxy http://other-domain.com/ajax/web_service.xml.

Jedną z interesujących cech tej metody jest to, że zwrotny serwer proxy może z łatwością dystrybuować żądania do wielu zaplecza, działając w ten sposób jako moduł równoważenia obciążenia .

Używam JSONP.

Zasadniczo dodajesz

<script src="http://..../someData.js?callback=some_func"/>

na Twojej stronie.

Powinna zostać wywołana some_func (), aby otrzymać powiadomienie, że dane są w środku.

AnyOrigin nie działał dobrze z niektórymi witrynami https, więc właśnie napisałem alternatywę o otwartym kodzie źródłowym o nazwie whatorigin.org, która wydaje się dobrze działać z https.

Kod na github .

Najnowszym sposobem na obejście zasad tego samego pochodzenia, które znalazłem, jest http://anyorigin.com/

Witryna została stworzona tak, że po prostu podajesz jej dowolny adres URL i generuje dla Ciebie kod javascript / jquery, który umożliwia pobranie html / data, niezależnie od ich pochodzenia. Innymi słowy, sprawia, że ​​dowolny adres URL lub strona internetowa jest żądaniem JSONP.

Uważam, że to całkiem przydatne :)

Oto przykładowy kod javascript z anyorigin:

$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
    $('#output').html(data.contents);
});

Nie mogę przypisać sobie zasługi dla tego obrazu, ale pasuje do wszystkiego, co wiem na ten temat, a jednocześnie oferuje odrobinę humoru.

http://www.flickr.com/photos/iluvrhinestones/5889370258/

Na myśl przychodzi JSONP :

JSONP lub „JSON z dopełnieniem” to uzupełnienie podstawowego formatu danych JSON, wzorca użycia, który umożliwia stronie wysyłanie żądań i bardziej sensowne używanie formatu JSON z serwera innego niż serwer podstawowy. JSONP jest alternatywą dla nowszej metody o nazwie Cross-Origin Resource Sharing.

Osobiście window.postMessagejest to najbardziej niezawodny sposób, jaki znalazłem dla nowoczesnych przeglądarek. Musisz trochę więcej pracy, aby upewnić się, że nie jesteś narażony na ataki XSS, ale jest to rozsądny kompromis.

Istnieje również kilka wtyczek do popularnych zestawów narzędzi Javascript, window.postMessagektóre zapewniają podobną funkcjonalność do starszych przeglądarek, wykorzystując inne metody omówione powyżej.

Cóż, użyłem curl w PHP, aby to obejść. Mam usługę sieciową działającą na porcie 82.

<?php

$curl = curl_init();
$timeout = 30;
$ret = "";
$url="http://localhost:82/put_val?val=".$_GET["val"];
curl_setopt ($curl, CURLOPT_URL, $url);
curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt ($curl, CURLOPT_MAXREDIRS, 20);
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5");
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
$text = curl_exec($curl);
echo $text;

?>

Oto javascript, który wywołuje plik PHP

function getdata(obj1, obj2) {

    var xmlhttp;

    if (window.XMLHttpRequest)
            xmlhttp=new XMLHttpRequest();
    else
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","phpURLFile.php?eqp="+obj1+"&val="+obj2,true);
    xmlhttp.send();
}

Mój HTML działa na WAMP w porcie 80. No więc, tak, ta sama polityka pochodzenia została ominięta :-)

Oto kilka obejść i wyjaśnienie zasad tego samego pochodzenia:
Blog Thiru - obejście zasad dotyczących tego samego pochodzenia w przeglądarce

Ta analiza prawie tego, co jest tam dostępne: http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

W przypadku rozwiązania postMessage spójrz na:

https://github.com/chrissrogers/jquery-postmessage/blob/master/jquery.ba-postmessage.js

i nieco inna wersja:

https://github.com/thomassturm/ender-postmessage/blob/master/ender-postmessage.js