JavaScript est une technologie de script dynamique frontale qui est souvent utilisée dans le développement Web. Dans JavaScript, il existe une limitation de sécurité très importante appelée "politique d'origine homosexuelle". Cette stratégie apporte des restrictions importantes sur le contenu de la page auxquels le code JavaScript peut accéder, c'est-à-dire que JavaScript ne peut accéder qu'à contenu que dans le même domaine que le document contenant.
JavaScript est une stratégie de sécurité qui est particulièrement importante lors de la programmation multi-imrames ou multi-fenêtres et Ajax. Selon cette stratégie, le code JavaScript contenu dans la page sous baidu.com ne peut pas accéder au contenu de la page sous le nom de domaine Google.com; Même les pages entre différents sous-domaines ne sont pas accessibles les unes des autres via le code JavaScript. L'impact sur AJAX est que les demandes AJAX implémentées via XMLHTTPRequest ne peuvent pas soumettre des demandes à différents domaines. Par exemple, les pages sous abc.example.com ne peuvent pas soumettre des demandes AJAX à Def.example.com, etc.
Cependant, lors de l'exécution d'une programmation frontale approfondie, les opérations intermédiaires croisées sont inévitablement nécessaires et la "stratégie d'origine homosexuelle" semble trop exigeante. Cet article résume certaines des technologies requises dans le domaine sur cette question.
Ci-dessous, nous discutons des technologies du domaine transversal dans deux situations: discutez d'abord des technologies du domaine transversal dans différents sous-domaines, puis discutez des technologies de domaine croisé dans des domaines complètement différents.
(I) Technologie du domaine croisé de différents sous-domaines.
Nous en discutons séparément en deux questions: la première question est de savoir comment passer des appels JavaScript sur différents sous-domaines; La deuxième question est de savoir comment soumettre des demandes AJAX à différents sous-domaines.
Résolvons d'abord le premier problème, en supposant qu'il existe deux sous-domaines différents dans le domaine Exemple.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:
La copie de code est la suivante:
fonction funCindef () {
.....
}
Nous voulons appeler la fonction ci-dessus dans une page sous abc.example.com. Supposons que la page ci-dessous abc.example.com dont nous discutons est intégrée dans la page ci-dessous def.example.com sous la forme d'un iframe, afin que nous puissions essayer de passer les appels suivants dans l'IFRAME:
La copie de code est la suivante:
window.top.funcindef ();
OK, nous avons remarqué que cet appel est interdit par la "politique d'origine homosexuelle" mentionnée précédemment, et le moteur JavaScript lancera directement une exception.
Afin d'implémenter l'appel ci-dessus, nous pouvons le faire en modifiant l'attribut de domaine des deux pages. Par exemple, nous pouvons ajouter l'extrait de code JavaScript suivant en haut des deux pages sous abc.example.com et def.example.com:
La copie de code est la suivante:
<script type = "text / javascript">
document.domain = "example.com";
</cript>
De cette façon, les deux pages deviennent le même domaine et les appels précédents peuvent être exécutés normalement.
Une chose à noter ici est que la propriété Document.Domain d'une page ne peut être définie que sur un nom de domaine plus de niveau supérieur (à l'exception du nom de domaine de premier niveau), mais ne peut pas être défini sur un nom de sous-domaine plus profond que le nom de domaine actuel. Par exemple, la page d'ABC.Example.com ne peut définir son domaine que sur example.com, ne peut pas être défini sur sub.abc.example.com, et bien sûr, il ne peut pas être défini sur le nom de domaine de premier niveau com.
L'exemple ci-dessus traite de la situation où deux pages appartiennent à des relations imbriquées iframe. Lorsque les deux pages sont des relations ouvertes et ouvertes, le principe est exactement le même.
Résolvons le deuxième problème: comment soumettre des demandes AJAX à différents sous-domaines.
Normalement, nous utiliserons du code similaire à ce qui suit pour créer un objet XMLHTTPRequest:
La copie de code est la suivante:
usines = [
function () {return new xmlHttpRequest (); },
function () {return new activeXObject ("msxml2.xmlhttp"); },
function () {return new activeXObject ("Microsoft.xmlhttp"); }
]]
fonction newRequest () {
pour (var i = 0; i << / span> usine.length; i ++) {
essayer{
var factory = usines [i];
return factory ();
} catch (e) {}
}
retourner 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 que nous venons de créer, puis utilisons cet objet Ajax pour envoyer une demande HTTP. Par exemple, le code suivant envoie une demande GET à ABC.Example.com:
La copie de code est la suivante:
var demande = newRequest ();
request.open ("get", "http://abc.example.com");
request.send (null);
En supposant que le code ci-dessus est inclus dans une page sous le nom de domaine ABC.Example.com, la demande GET peut être envoyée avec succès normalement sans aucun problème. Cependant, si vous envoyez maintenant une demande à Def.example.com, il y a un problème de domaine croisé et le moteur JavaScript lance une exception.
La solution consiste à placer un fichier inter-domaine sous le domaine def.example.com, en supposant qu'il s'appelle Crossdomain.html; Déplacez ensuite la définition de la fonction NewRequest précédente dans ce fichier inter-domaine; Enfin, tout comme la pratique précédente pour modifier la valeur document.domain, ajoutez le haut de la page appelant Ajax sous le fichier crossdomain.html et le domaine ABC.Example.com:
La copie de code est la suivante:
<script type = "text / javascript">
document.domain = "example.com";
</cript>
Pour utiliser des fichiers inter-domaines, nous intégrons un iframe caché pointant vers des fichiers inter-domaines dans la page appelant Ajax sous le domaine ABC.Example.com, par exemple:
[code]
<iframe name = "xd_iframe" style = "affiche: aucun" src = "http://def.example.com/crossdomain.html"> </ iframe>
À l'heure actuelle, la page du domaine ABC.Example.com et le Crossdomain.html sont toutes deux dans le même domaine (Example.com). Nous pouvons appeler la fonction NewRequest dans CrossDomain.html dans la page du domaine ABC.Example.com:
La copie de code est la suivante:
var request = window.frames ["xd_iframe"]. newRequest ();
L'objet de demande obtenu de cette manière peut envoyer une demande HTTP à http://def.example.com.
(Ii) la technologie du domaine croisé avec des domaines complètement différents.
Si les noms de domaine de niveau supérieur sont différents, par exemple, si vous souhaitez communiquer sur le front-end via JavaScript entre Example1.com et Example2.com, la technologie requise est plus compliquée.
Avant d'expliquer les technologies de domaine transversal de différents domaines, indiquons d'abord que la technologie dont nous voulons parler ci-dessous est également applicable aux situations précédentes du domaine croisé, car le domaine transversal n'est qu'un cas particulier du problème du domaine croisé. Bien sûr, l'utilisation de la bonne technologie dans les bonnes circonstances peut assurer une meilleure efficacité et une stabilité plus élevée.
En bref, selon différents besoins inter-domaines, les technologies de domaine croisé peuvent être classées dans les catégories suivantes:
1. Demande de get-domaine JSONP Cross-Domain
2. Implémentation inter-domaine via iframe
3. Demande HTTP de Domaine Cross Flash
4. Window.PostMessage
Cet article se terminera ici en premier. Nous présenterons en détail les quatre technologies inter-domaines mentionnées ci-dessus. Nous le présenterons plus tard!