Maison > interface Web > js tutoriel > Comment utiliser javascript pour réaliser du cross-domain ? Résumer plusieurs façons de JavaScript inter-domaines

Comment utiliser javascript pour réaliser du cross-domain ? Résumer plusieurs façons de JavaScript inter-domaines

伊谢尔伦
Libérer: 2017-06-02 10:12:03
original
1803 Les gens l'ont consulté

Commencez par le domaine

Domaine : Le domaine est la limite de sécurité du système réseau WIN2K. Nous savons que l'unité la plus élémentaire d'un réseau informatique est un « domaine ». Ce n'est pas unique à WIN2K, mais Active Directory peut fonctionner via un ou plusieurs domaines. Sur un ordinateur indépendant, un domaine fait référence à l'ordinateur lui-même. Un domaine peut être distribué sur plusieurs emplacements physiques. Dans le même temps, un emplacement physique peut être divisé en différents segments de réseau en différents domaines. sa relation avec les relations de confiance avec d'autres domaines. Lorsque plusieurs domaines sont connectés via des relations d'approbation, Active Directory peut être partagé par plusieurs domaines d'approbation
Arborescence des domaines : L'arborescence des domaines se compose de plusieurs domaines, qui sont partagés La même table la structure et la configuration forment un espace de noms continu. Les domaines d'une arborescence sont connectés via des relations d'approbation et Active Directory contient une ou plusieurs arborescences de domaines. Les domaines de l'arborescence des domaines sont connectés via des relations de confiance transitives bidirectionnelles. Étant donné que ces relations d'approbation sont bidirectionnelles et transitives, un domaine nouvellement créé dans une arborescence ou une forêt de domaines peut immédiatement établir une relation d'approbation avec tous les autres domaines de l'arborescence ou de la forêt de domaines. Ces relations d'approbation permettent un processus d'authentification unique qui authentifie les utilisateurs sur tous les domaines d'une arborescence ou d'une forêt de domaines, mais cela ne signifie pas nécessairement qu'un utilisateur authentifié dispose des mêmes droits et autorisations sur tous les domaines de l'arborescence de domaines. Étant donné que les domaines constituent des limites de sécurité, les utilisateurs doivent se voir attribuer les droits et autorisations appropriés pour chaque domaine.
Plus le niveau du domaine dans l'arborescence des domaines est bas, plus le niveau "." représente un niveau.
Par exemple, le domaine zhidao.baidu.com (connu de Baidu) a un niveau inférieur au domaine baidu.com (Baidu) car il a deux niveaux de relation, alors que baidu.com n'a qu'un seul niveau.

Qu'est-ce que le cross-domain

Par défaut, un objet XHR ne peut accéder qu'aux ressources du même domaine que la page qui le contient. Cette stratégie de sécurité peut empêcher certains comportements malveillants. Cependant, la mise en œuvre de requêtes cross-origin raisonnables est également cruciale pour le développement de certaines applications de navigateur.
Tant qu'il y a une différence dans le protocole, le nom de domaine ou le port, il sera considéré comme un domaine différent Les différences dans les ports et les protocoles ne peuvent être résolues qu'en arrière-plan. Ce que nous voulons résoudre, c'est le problème des différents noms de domaine

Comment croiser les domaines

( 1) CORS (Cross-Origin Resource Sharing, Cross-Origin Resource Sharing)

1.CORS (Cross-Origin Resource Sharing, Cross-Origin Resource Sharing) est une ébauche de travail du W3C qui définit comment le navigateur et le serveur doivent-ils communiquer lors de l'utilisation de ressources multi-origines ? L'idée de base derrière CORS est d'utiliser des en-têtes HTTP personnalisés pour permettre au navigateur de communiquer avec le serveur afin de déterminer si la demande ou la réponse doit réussir ou échouer.
2. La mise en œuvre de cette fonctionnalité est très simple, il suffit d'envoyer un en-tête de réponse par le serveur.

Prise en charge du navigateur :

  • IE 8+

  • Firefox 3.5 +

  • Opéra 12+

  • Safari 4+

  • Chrome 3+

Supposons que notre page ou application soit déjà sur a.com et que nous prévoyions de commencer à partir de b.com. demande d'extraction de données. Généralement, si nous utilisons AJAX directement pour demander, la demande échouera et le navigateur renverra une erreur.
Avec CORS, b.com peut autoriser les requêtes provenant de .a.com en ajoutant simplement un en-tête.
Ce qui suit est le paramètre utilisant php. Le signe "*" signifie que n'importe quel domaine est autorisé à soumettre des requêtes à notre serveur :

header{"Access-Control-Allow-Origin: *"}
Copier après la connexion

Méthode d'écriture de compatibilité CORS

 function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://example.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }
Copier après la connexion

(2) JSONP (JSON avec Padding JSON rempli ou JSON paramétré)

En js, bien que nous ne puissions pas utiliser directement XMLHttpRequest pour demander des données sur différents domaines temporels, mais il est possible d'introduire des fichiers de script js dans différents domaines de la page. jsonp est implémenté en utilisant cette fonctionnalité

JSONP se compose de deux parties : la fonction de rappel et les données. La fonction de rappel est la fonction qui doit être appelée dans la page lorsque la réponse arrive, et les données sont les données JSON transmises à la fonction de rappel.

Par exemple :

<script type="text/javascript">
 function dosomething(jsondata){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>
Copier après la connexion

Tout d'abord, la première balise de script définit une fonction qui traite les données
Ensuite, la deuxième balise de script charge un fichier js, data.php est l'adresse ; où se trouvent les données, mais comme elles sont introduites comme js, data.php doit renvoyer un fichier js exécutable ; enfin, une fois le fichier js chargé avec succès, la fonction que nous avons spécifiée dans le paramètre url sera exécutée et notre json requis ; les données sont transmises en tant que paramètre. Donc php devrait être comme ceci

<?php
$callback = $_GET[&#39;callback&#39;];//得到回调函数名
$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>
Copier après la connexion

Enfin, le résultat de sortie est : dosomething(['a','b','c']);
Comme le montre ce qui précède, jsonp nécessite un serveur. La page sur le terminal est coordonnée en conséquence.

Avantages et inconvénients de JSONP
Avantages :

它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;
能够直接访问响应文本,支持在浏览器与服务器之间双向通信
缺点:

JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的Web 服务时,一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

这里有三个页面:

a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

app.html

<iframe src="b.com/data.html" id="iframe"></iframe>
<script>
 var iframe = document.getElementById("iframe");
 iframe.src = "a.com/proxy.html";//这是一个与a.com/app.html同源的页面
 iframe.onload = function(){
 var data = iframe.contentWindow.name; //取到数据
 }
</script>
Copier après la connexion

data.html

<script>
 // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
 // 数据格式可以自定义,如json、字符串
 window.name = "数据"
</script>
Copier après la connexion

iframe首先的地址是b.com/data.html,所以能取到window.name数据;
但是iframe现在跟app.html并不同源,app.html无法获取到数据,所以又将iframe的链接跳转至a.com/proxy.html这个代理页面,现在app.html跟iframe就同源了。

注意:iframe由b.com/data.html跳转到a.com/proxy.html页面,window.name的value是不变的

获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)

<script type="text/javascript">
 iframe.contentWindow.document.write(&#39;&#39;);
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
</script>
Copier après la connexion

(四) document.domain + iframe

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。
具体的做法是可以在a.com/a.html 和script.a.com/b.html 两个文件中分别设置document.domain = 'a.com',然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。
a.com/a.html页面

<iframe src="http://script.a.com/b.html" frameborder="0"></iframe>
<script>
 document.domain = &#39;a.com&#39;;
</script>
Copier après la connexion

script.a.com/b.html页面

<script>
 document.domain = &#39;a.com&#39;;
</script>
Copier après la connexion

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲,window.postMessage是一个跨域的无服务器垫片的Ajax。

用法:
otherWindow.postMessage(message, targetOrigin);

  • otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.+open的返回值;通过name或下标从window.frames取到的值。

  • message: 所要发送的数据,string类型。

  • targetOrigin: 用于限制otherWindow,“*”表示不作限制

数据发送端a.com/index.html中的代码:

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById(&#39;ifr&#39;);
 var targetOrigin = &#39;http://b.com&#39;; // 设定接收端的域,*则为不限制   
 ifr.contentWindow.postMessage(&#39;I was there!&#39;, targetOrigin);
};
</script>
Copier après la connexion

数据接收端b.com/index.html中的代码:

<script type="text/javascript">
 window.addEventListener(&#39;message&#39;, function(event){
 // 通过origin属性判断消息来源地址
 if (event.origin == &#39;http://a.com&#39;) {
 alert(event.data); // 弹出"I was there!"
 alert(event.source); // 对a.com、index.html中window对象的引用
   // 但由于同源策略,这里event.source不可以访问window对象
 }
 }, false);
</script>
Copier après la connexion



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal