Explication détaillée des problèmes inter-domaines JS_Connaissances de base

JavaScript est une technologie de script dynamique frontale souvent utilisée dans le développement Web. En JavaScript, il existe une restriction de sécurité très importante appelée « Same-Origin Policy ». Cette politique impose des restrictions importantes sur le contenu de la page auquel le code JavaScript peut accéder, c'est-à-dire que JavaScript ne peut accéder qu'au contenu du même domaine que le document qui le contient.

La stratégie de sécurité JavaScript est particulièrement importante lors de la programmation multi-iframe ou multi-fenêtres, ainsi que de la programmation Ajax. Selon cette politique, le code JavaScript contenu dans les pages sous baidu.com ne peut pas accéder au contenu des pages sous le nom de domaine google.com ; même les pages situées entre différents sous-domaines ne peuvent pas accéder entre elles via le code JavaScript. L'impact sur Ajax est que les requêtes Ajax implémentées via XMLHttpRequest ne peuvent pas soumettre de requêtes à différents domaines. Par exemple, les pages sous abc.example.com ne peuvent pas soumettre de requêtes Ajax à def.example.com, etc.

Cependant, lors de la programmation frontale approfondie, des opérations inter-domaines sont inévitablement nécessaires. À l'heure actuelle, la « même politique d'origine » semble trop stricte. Cet article résume certaines technologies requises pour le cross-domain sur cette question.

Ensuite, nous discutons de la technologie inter-domaines dans deux situations : d'abord, nous discutons de la technologie inter-domaines dans différents sous-domaines, puis nous discutons de la technologie inter-domaines dans des domaines complètement différents.

(1) Technologies inter-domaines dans différents sous-domaines.
Nous aborderons deux questions séparément : la première question est de savoir comment effectuer des appels JavaScript sur différents sous-domaines ; la deuxième question est de savoir comment soumettre des requêtes Ajax à différents sous-domaines.

Résolvons d'abord le premier problème. Supposons qu'il y ait deux sous-domaines différents sous le domaine example.com : abc.example.com et def.example.com. Supposons maintenant qu'il existe une page sous def.example.com, qui définit une fonction JavaScript :

Copier le code Le code est le suivant :

fonction funcInDef() {
.....
>

Nous voulons appeler la fonction ci-dessus dans une page sous abc.example.com. Supposons que la page sous abc.example.com dont nous voulons discuter soit intégrée dans la page sous def.example.com sous la forme d'une iframe. Dans ce cas, nous pouvons essayer de faire l'appel suivant dans l'iframe :

Copier le code Le code est le suivant :

window.top.funcInDef();

D'accord, nous avons remarqué que cet appel est interdit par la "même politique d'origine" mentionnée précédemment, et le moteur JavaScript lèvera directement une exception.

Afin de mettre en œuvre l'appel ci-dessus, nous pouvons le faire en modifiant les attributs de domaine des deux pages. Par exemple, nous pouvons ajouter les extraits de code JavaScript suivants en haut des deux pages au-dessus de abc.example.com et def.example.com :

Copier le code Le code est le suivant :

De cette façon, les deux pages deviennent le même domaine et l'appel précédent peut être exécuté normalement.

Une chose à noter ici est que l'attribut document.domain d'une page ne peut être défini que sur un nom de domaine de niveau supérieur (à l'exception du nom de domaine de premier niveau), mais ne peut pas être défini sur un sous-domaine plus profond que le nom de domaine actuel. Par exemple, la page abc.example.com ne peut définir son domaine que sur example.com, pas sub.abc.example.com, et bien sûr, elle ne peut pas être définie sur le nom de domaine de premier niveau com.

L'exemple ci-dessus traite du cas où deux pages appartiennent à une relation imbriquée iframe Lorsque les deux pages ont une relation ouverte et ouverte, le principe est exactement le même.

Résolvons maintenant le deuxième problème : comment soumettre des requêtes Ajax à différents sous-domaines.

Normalement, nous utiliserons un code similaire au suivant pour créer un objet XMLHttpRequest :

Copier le code Le code est le suivant :

usines = [
Function() { return new XMLHttpRequest(); Function() { return new ActiveXObject("Msxml2.XMLHTTP" },
Function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
];
fonction newRequest() {
for(var i = 0; i < plants.length; i ) {
         essayez{
          var usine = usines[i];
              retour usine();
           } capture(e) {}
>
Renvoie null ;
}

Le code ci-dessus fait référence à ActiveXObject pour la compatibilité avec les navigateurs de la série IE6. Chaque fois que nous appelons la fonction newRequest, nous obtenons un objet Ajax nouvellement créé, puis utilisons cet objet Ajax pour envoyer une requête HTTP. Par exemple, le code suivant envoie une requête GET à abc.example.com :

Copier le code Le code est le suivant :

var requête = newRequest();
request.open("GET", "
http://abc.example.com" ); request.send(null);

En supposant que le code ci-dessus soit inclus dans une page sous le nom de domaine abc.example.com, la requête GET peut être envoyée avec succès sans aucun problème. Cependant, si nous envoyons maintenant une requête à def.example.com, un problème inter-domaines se produit et le moteur JavaScript lève une exception.

La solution est de placer un fichier inter-domaine sous le domaine def.example.com, en supposant qu'il s'appelle crossdomain.html puis de déplacer la définition de la fonction newRequest précédente vers ce fichier inter-domaine ; document comme avant. La valeur du domaine est la même. En haut du fichier crossdomain.html et de la page qui appelle Ajax sous le domaine abc.example.com, ajoutez :

Copier le code Le code est le suivant :

Afin d'utiliser des fichiers inter-domaines, nous intégrons une iframe cachée pointant vers des fichiers inter-domaines dans la page qui appelle Ajax sous le domaine abc.example.com, par exemple :
[code]