O JavaScript é uma tecnologia de script dinâmica front-end que é frequentemente usada no desenvolvimento da Web. No JavaScript, existe uma limitação de segurança muito importante chamada "política da mesma origem". Essa estratégia coloca restrições importantes no conteúdo da página que o código JavaScript pode acessar, ou seja, o JavaScript pode acessar apenas o conteúdo no mesmo domínio que o documento que o contém.
O JavaScript é uma estratégia de segurança que é particularmente importante ao programar multi-frame ou múltiplas janelas e Ajax. De acordo com essa estratégia, o código JavaScript contido na página em Baidu.com não pode acessar o conteúdo da página no nome de domínio do Google.com; Mesmo as páginas entre diferentes subdomínios não podem ser acessadas um pelo outro através do código JavaScript. O impacto no AJAX é que as solicitações do AJAX implementadas através do XMLHTTPREQUEST não podem enviar solicitações para diferentes domínios. Por exemplo, as páginas do abc.example.com não podem enviar solicitações de Ajax para def.example.com, etc.
No entanto, ao realizar algumas programas de front-end aprofundados, as operações de domínio cruzado são inevitavelmente necessárias e a "estratégia da mesma origem" parece exigente demais. Este artigo resume algumas das tecnologias necessárias em todo o domínio sobre esse assunto.
Abaixo, discutimos as tecnologias de domínio cruzado em duas situações: discutir primeiro as tecnologias de domínio cruzado em diferentes subdomínios e depois discutir tecnologias de domínio cruzado em domínios completamente diferentes.
(I) Tecnologia de domínio cruzado de diferentes subdomínios.
Discutimos isso separadamente em duas perguntas: a primeira pergunta é como fazer chamadas de JavaScript em diferentes subdomínios; A segunda pergunta é como enviar solicitações de Ajax a diferentes subdomínios.
Vamos resolver o primeiro problema primeiro, supondo que haja dois subdomínios diferentes no domínio do exemplo.com: abc.example.com e def.example.com. Agora, suponha que haja uma página em Def.example.com que defina uma função JavaScript:
A cópia do código é a seguinte:
função funcindef () {
.....
}
Queremos chamar a função acima em uma página em abc.example.com. Suponha que a página abaixo abc.example.com que estamos discutindo esteja incorporada na página abaixo de def.example.com na forma de um iframe, para que possamos tentar fazer as seguintes chamadas no iframe:
A cópia do código é a seguinte:
window.top.funcndef ();
OK, notamos que essa chamada é proibida pela "política da mesma origem" mencionada anteriormente, e o mecanismo JavaScript fará uma exceção diretamente.
Para implementar a chamada acima, podemos fazê -lo modificando o atributo de domínio das duas páginas. Por exemplo, podemos adicionar o seguinte snippet de código JavaScript na parte superior das duas páginas em abc.example.com e def.example.com:
A cópia do código é a seguinte:
<script type = "text/javascript">
document.domain = "exemplo.com";
</script>
Dessa forma, as duas páginas se tornam o mesmo domínio e as chamadas anteriores podem ser executadas normalmente.
Uma coisa a observar aqui é que a propriedade Document.Domain de uma página só pode ser definida como um nome de domínio mais de nível superior (exceto o nome de domínio de primeiro nível), mas não pode ser definido como um nome de subdomínio mais profundo do que o nome de domínio atual. Por exemplo, a página do abc.example.com só pode definir seu domínio como exemplo.com, não pode ser definido como sub.abc.example.com e, é claro, não pode ser definido como nome de domínio de primeiro nível com.
O exemplo acima discute a situação em que duas páginas pertencem a relacionamentos aninhados. Quando as duas páginas estão abertas e abertas, o princípio é exatamente o mesmo.
Vamos resolver o segundo problema: como enviar solicitações de Ajax a diferentes subdomínios.
Normalmente, usaremos o código semelhante ao seguinte para criar um objeto xmlHttPrequest:
A cópia do código é a seguinte:
fábricas = [
function () {return new XmlHttPrequest (); },
function () {return new ActivexObject ("msxml2.xmlHttp"); },
function () {return new ActiveXObject ("Microsoft.xmlHttp"); }
];
função newRequest () {
for (var i = 0; i <</span> fábricas.length; i ++) {
tentar{
var fábrica = fábricas [i];
retornar fábrica ();
} catch (e) {}
}
retornar nulo;
}
O código acima refere -se ao ActiveXObject para compatibilidade com os navegadores da série IE6. Toda vez que chamamos a função NewRequest, obtemos um objeto Ajax que acabamos de criar e, em seguida, usamos esse objeto Ajax para enviar uma solicitação HTTP. Por exemplo, o código a seguir envia uma solicitação GET para abc.example.com:
A cópia do código é a seguinte:
var request = newRequest ();
request.open ("get", "http://abc.example.com");
request.send (null);
Supondo que o código acima esteja incluído em uma página no nome do domínio abc.example.com, a solicitação GET pode ser enviada com sucesso normalmente sem problemas. No entanto, se você está enviando uma solicitação para def.example.com, há um problema de domínio cruzado e o mecanismo JavaScript lança uma exceção.
A solução é colocar um arquivo de domínio cruzado no domínio def.example.com, assumindo que ele seja chamado de crossDomain.html; Em seguida, mova a definição da função anterior NewRequest para este arquivo de domínio cruzado; Finalmente, assim como a prática anterior de modificar o documento.
A cópia do código é a seguinte:
<script type = "text/javascript">
document.domain = "exemplo.com";
</script>
Para usar arquivos de domínio cruzado, incorporamos um iframe oculto apontando para arquivos de domínio cruzado na página chamando Ajax sob o domínio abc.example.com, por exemplo:
[código]
<iframe name = "xd_iframe" style = "display: nenhum" src = "http://def.example.com/crossDomain.html"> </frame>
No momento, a página no domínio abc.example.com e o crossDomain.html estão no mesmo domínio (exemplo.com). Podemos chamar a função NewRequest em CrossDomain.html na página sob o domínio abc.example.com:
A cópia do código é a seguinte:
var request = window.frames ["xd_iframe"]. newRequest ();
O objeto de solicitação obtido dessa maneira pode enviar uma solicitação HTTP para http://def.example.com.
(Ii) tecnologia de domínio cruzado com domínios completamente diferentes.
Se os nomes de domínio de nível superior forem diferentes, por exemplo, se você deseja se comunicar no front-end via JavaScript entre o exemplo1.com e o exemplo2.com, a tecnologia necessária é mais complicada.
Antes de explicar as tecnologias de domínio cruzado de diferentes domínios, vamos primeiro deixar claro que a tecnologia sobre a qual queremos falar abaixo também é aplicável às situações anteriores de domínio cruzado, porque os domínios cruzados são apenas um caso especial do problema de domínio cruzado. Obviamente, o uso da tecnologia certa nas circunstâncias certas pode garantir uma melhor eficiência e maior estabilidade.
Em suma, de acordo com diferentes necessidades de domínio cruzado, as tecnologias de domínio cruzado podem ser classificadas nas seguintes categorias:
1.
2. Implementação de domínio cruzado através do iframe
3. Solicitação HTTP de domínio cruzado flash
4. Window.PostMessage
Este artigo terminará aqui primeiro. Introduziremos as quatro tecnologias cruzadas mencionadas acima em detalhes. Vamos apresentá -lo mais tarde!