Introduction détaillée aux entretiens frontaux de même origine et inter-domaines

Le cross-domain est dû à la politique de même origine du navigateur. Il fait référence à l'adresse URL demandée par la page et doit être dans le même domaine que l'adresse URL du navigateur (c'est-à-dire le nom de domaine, le port et le protocole sont les mêmes). L'article suivant explique Permettez-moi de vous présenter les informations pertinentes sur la même origine et le même domaine qui sont nécessaires pour les entretiens frontaux. L'article le présente en détail à travers un exemple de code. j'en ai besoin, je peux y faire référence.

Avant-propos

Comme nous le savons tous, la politique de même origine et les méthodes inter-domaines du navigateur sont également des problèmes très courants en front-end Cet article que j'ai principalement partagé avec vous sur les problèmes de même origine et inter-domaines qui seront rencontrés lors des entretiens front-end, je n'entrerai pas dans les détails ci-dessous.

Qu'est-ce que la politique de même origine

La politique de même origine est utilisée pour restreindre la façon dont les documents ou les scripts chargés à partir d'une source peuvent interagir avec les documents ou des scripts chargés à partir d'une autre source. Il s'agit d'un mécanisme de sécurité clé pour isoler les fichiers potentiellement malveillants.

Quelle est la même origine ?

Si le protocole, le nom de domaine et le port sont les mêmes pour deux pages, alors les deux pages sont de même origine. Par exemple : http://www.hyuhan.com/index.html Ce site, le protocole est http, le nom de domaine est www.hyuhan.com, le port est 80 (port par défaut), son origine est la suivante :

• http://www.hyuhan.com/other.html : même origine

• http://hyuhan.com/other.html : origine différente (Différents noms de domaine)

• https://www.hyuhan.com/other.html : Différentes sources (différents protocoles)

• http://www.hyuhan.com:81/other.html : Différentes sources (différents ports)

La politique de même origine vise à protéger la sécurité des informations des utilisateurs. Les principales restrictions restreintes par la politique de même origine sont les comportements suivants :

1. Cookie, LocalStorage et IndexDB ne peuvent pas être lus

2. DOM ne peut pas être lu exploité

3. La requête AJAX ne peut pas être envoyée

Comment effectuer un accès inter-domaines

Comment faire une requête AJAX inter-domaines

Il existe trois méthodes principales pour contourner les restrictions de la politique de même origine pour effectuer des requêtes AJAX inter-domaines.

JSONP

JSONP est une méthode courante de communication interdomaine entre le client et le serveur. Utilisez l'élément

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

Le paramètre de rappel de src est utilisé pour définir le nom de la fonction de rappel qui doit être appelée par le backend. renvoyé par le serveur est le suivant :

test({
    "name": "小明",
    "age": 24
    })

De cette façon, le front-end peut lire les données du back-end sur tous les domaines. Cependant, jsopn ne peut effectuer que des requêtes get et ne peut pas envoyer de requêtes de publication.

WebSocket

WebSocket est un nouveau protocole réseau basé sur TCP. Il n'implémente pas la politique de même origine et permet l'accès entre domaines tant que le serveur le prend en charge. il. Et WebSocket ne se limite pas à la communication Ajax, car la technologie Ajax nécessite que le client lance une requête, et le serveur WebSocket et le client peuvent se transmettre des informations.

CORS

CORS est l'abréviation de Access-Control-Allow-Origin (partage de ressources inter-domaines), qui est une norme du W3C. CORS doit être pris en charge à la fois par le navigateur et par le serveur. Actuellement, pratiquement tous les navigateurs prennent en charge cette fonctionnalité. La prise en charge côté serveur de CORS est principalement effectuée en définissant Access-Control-Allow-Origin. Si le navigateur détecte les paramètres correspondants, il peut autoriser l'accès inter-domaines Ajax.

document.domain

Le cookie est une information écrite par le serveur sur le navigateur. Pour des raisons de sécurité, seules les pages Web ayant la même origine peuvent être partagées. Toutefois, si les noms de domaine de premier niveau des deux pages Web sont identiques mais que les noms de domaine des écouteurs sont différents, vous pouvez partager des cookies en définissant document.domain.

Par exemple, le nom de domaine d'une page Web est http://w1.example.com/a.html et le nom de domaine d'une autre page Web est http://w2.example.com/b .html Tant qu’elles ont le même document.domain, les deux pages Web peuvent partager des cookies.

API postMessage

La méthode postMessage() permet aux scripts de différentes sources d'utiliser une communication asynchrone pour une communication limitée et peut réaliser des communications multi-documents, multi-fenêtres et messagerie inter-domaines . Utilisez la fonction postMessage() pour transmettre le message et la page cible écoute l'événement de message de la fenêtre pour recevoir le message. En utilisant postMessage, nous pouvons lire les données LocalStorage, IndexDB et DOM sur tous les domaines.

window.name

La fenêtre du navigateur a l'attribut window.name Cet attribut stipule que peu importe qu'elle ait la même source ou non, du moment qu'elle. est dans une fenêtre, la page web précédente est définie. Cet attribut peut être lu par la page web suivante. Autrement dit, dans le cycle de vie d'une fenêtre (window), toutes les pages chargées par la fenêtre partagent un window.name. Chaque page dispose d'autorisations de lecture et d'écriture pour window.name. Window.name persiste dans une fenêtre de toutes les pages chargées. . Évidemment, cela peut permettre un accès inter-domaines.

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!