Maneiras de contornar a política de mesma origem

A mesma política de origem

Eu queria criar um wiki da comunidade sobre políticas de mesma origem HTML / JS para ajudar a quem procura esse tópico. Este é um dos tópicos mais pesquisados ​​sobre SO e não existe um wiki consolidado, então aqui vou eu :)

A mesma política de origem impede que um documento ou script carregado de uma origem obtenha ou defina propriedades de um documento de outra origem. Essa política remonta ao Netscape Navigator 2.0.

Quais são algumas das suas formas favoritas de adotar políticas de mesma origem?

Por favor, mantenha exemplos detalhados e, de preferência, também vincule suas fontes.

O document.domainmétodo

• Tipo de método: iframe .

Observe que este é um método iframe que define o valor de document.domain como um sufixo do domínio atual. Se fizer isso, o domínio mais curto será usado para verificações de origem subsequentes. Por exemplo, suponha que um script no documento em http://store.company.com/dir/other.htmlexecute a seguinte instrução:

document.domain = "company.com";

Após a execução dessa instrução, a página passaria na verificação de origem com http://company.com/dir/page.html. No entanto, pelo mesmo raciocínio, company.com não poderia definir document.domain a othercompany.com.

Com esse método, você poderá executar o javascript de um iframe originado em um subdomínio em uma página originada no domínio principal. Este método não é adequado para recursos entre domínios, pois navegadores como o Firefox não permitem alterar o domínio document.domainpara um domínio completamente estranho.

Fonte: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

O método de compartilhamento de recursos de origem cruzada

• Tipo de método: AJAX .

O compartilhamento de recursos de origem cruzada (CORS) é um rascunho de trabalho do W3C que define como o navegador e o servidor devem se comunicar ao acessar fontes de origens. A idéia básica por trás do CORS é usar cabeçalhos HTTP personalizados para permitir que o navegador e o servidor saibam o suficiente um sobre o outro para determinar se a solicitação ou resposta deve ter êxito ou falhar.

Para uma solicitação simples, que usa um GETou POSTsem cabeçalhos personalizados e cujo corpo é text/plain, a solicitação é enviada com um cabeçalho extra chamado Origin. O cabeçalho Origin contém a origem (protocolo, nome de domínio e porta) da página solicitante, para que o servidor possa determinar facilmente se deve ou não servir uma resposta. Um Origincabeçalho de exemplo pode ser assim:

Origin: http://www.stackoverflow.com

Se o servidor decidir que a solicitação deve ser permitida, ele envia um Access-Control-Allow-Origincabeçalho ecoando a mesma origem que foi enviada ou *se é um recurso público. Por exemplo:

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

Se esse cabeçalho estiver ausente ou as origens não corresponderem, o navegador não permitirá a solicitação. Se tudo estiver bem, o navegador processará a solicitação. Observe que nem as solicitações nem as respostas incluem informações sobre cookies.

A equipe da Mozilla sugere em seu post sobre o CORS que você deve verificar a existência da withCredentials propriedade para determinar se o navegador suporta o CORS via XHR. Você pode associar a existência do XDomainRequestobjeto a todos os navegadores:

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();
}

Observe que, para que o método CORS funcione, você precisa ter acesso a qualquer tipo de mecânico de cabeçalho do servidor e não pode simplesmente acessar qualquer recurso de terceiros.

Fonte: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

O window.postMessagemétodo

• Tipo de método: iframe .

window.postMessage, quando chamado, faz com que um MessageEventseja despachado na janela de destino quando qualquer script pendente que deve ser executado for concluído (por exemplo, os manipuladores de eventos restantes, se window.postMessagefor chamado de um manipulador de eventos, tempos limite pendentes definidos anteriormente, etc.). A MessageEventtem o tipo de mensagem, uma datapropriedade que está definido para o valor da cadeia do primeiro argumento fornecido para window.postMessage, uma originpropriedade que corresponde à origem do documento principal na janela chamando window.postMessageno momento window.postMessagefoi chamado, e uma sourcepropriedade que é a janela de qual window.postMessageé chamado.

Para usar window.postMessage, um ouvinte de evento deve ser anexado:

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

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

E uma receiveMessagefunção deve ser declarada:

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

O iframe externo também deve enviar eventos corretamente via postMessage:

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

Qualquer janela pode acessar esse método em qualquer outra janela, a qualquer momento, independentemente do local do documento na janela, para enviar uma mensagem. Conseqüentemente, qualquer ouvinte de evento usado para receber mensagens deve primeiro verificar a identidade do remetente da mensagem, usando a origem e possivelmente as propriedades de origem. Isso não pode ser subestimado: a falha em verificar as propriedades origine possivelmente sourceativa os ataques de script entre sites.

Fonte: https://developer.mozilla.org/en/DOM/window.postMessage

O método de proxy reverso

• Tipo de método: Ajax

A configuração de um proxy reverso simples no servidor permitirá que o navegador use caminhos relativos para as solicitações do Ajax, enquanto o servidor atuaria como proxy para qualquer local remoto.

Se estiver usando mod_proxy no Apache, a diretiva de configuração fundamental para configurar um proxy reverso é a ProxyPass. É normalmente usado da seguinte maneira:

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

Nesse caso, o navegador poderia solicitar /ajax/web_service.xmlcomo um URL relativo, mas o servidor serviria como um proxy para http://other-domain.com/ajax/web_service.xml.

Uma característica interessante desse método é que o proxy reverso pode distribuir facilmente solicitações para vários back-ends, atuando como um balanceador de carga .

Eu uso JSONP.

Basicamente, você adiciona

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

na sua página.

some_func () deve ser chamado para que você seja notificado de que os dados estão.

O AnyOrigin não funcionou bem em alguns sites https, então acabei de escrever uma alternativa de código aberto chamada Whateverorigin.org que parece funcionar bem com https.

Código no github .

A maneira mais recente de superar a política de mesma origem que eu encontrei é http://anyorigin.com/

O site foi criado para você fornecer apenas um URL e gerar código javascript / jquery para você, permitindo que você obtenha o html / data, independentemente de sua origem. Em outras palavras, torna qualquer URL ou página da Web uma solicitação JSONP.

Eu achei bastante útil :)

Aqui está um exemplo de código javascript de anyorigin:

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

Não posso reivindicar crédito por esta imagem, mas ela corresponde a tudo que sei sobre esse assunto e oferece um pouco de humor ao mesmo tempo.

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

O JSONP vem à mente:

JSONP ou "JSON com preenchimento" é um complemento ao formato de dados JSON base, um padrão de uso que permite que uma página solicite e use JSON de forma mais significativa de um servidor que não seja o servidor principal. JSONP é uma alternativa a um método mais recente chamado Compartilhamento de Recursos de Origem Cruzada.

Pessoalmente, window.postMessageé a maneira mais confiável que eu encontrei para navegadores modernos. Você precisa fazer um pouco mais de trabalho para se certificar de não se deixar abrir para ataques de XSS, mas é uma troca razoável.

Também existem vários plug-ins para os kits de ferramentas Javascript populares, window.postMessageque oferecem funcionalidade semelhante aos navegadores mais antigos usando os outros métodos discutidos acima.

Bem, eu usei curl no PHP para contornar isso. Eu tenho um serviço da web em execução na porta 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;

?>

Aqui está o javascript que faz a chamada para o arquivo 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();
}

Meu HTML é executado no WAMP na porta 80. Então, lá vamos nós, a mesma política de origem foi contornada :-)

Aqui estão algumas soluções alternativas e explicações sobre a mesma política de origem:
Thiru's Blog - Solução alternativa para a mesma origem do navegador

Isso analisa praticamente o que está disponível no mercado: http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

Para a solução postMessage, consulte:

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

e uma versão ligeiramente diferente:

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