Politique de même origine
Vous ne pouvez pas accéder à une <iframe>origine différente en utilisant JavaScript, ce serait une énorme faille de sécurité si vous pouviez le faire. Pour la politique de même origine, les navigateurs bloquent les scripts essayant d'accéder à un cadre avec une origine différente .
L'origine est considérée comme différente si au moins l'une des parties suivantes de l'adresse n'est pas conservée:
<protocol>://<hostname>:<port>/...
Le protocole , le nom d'hôte et le port doivent être identiques à ceux de votre domaine, si vous souhaitez accéder à une trame.
REMARQUE: Internet Explorer est connu pour ne pas suivre strictement cette règle, voir ici pour plus de détails.
Exemples
Voici ce qui se passerait en essayant d'accéder aux URL suivantes à partir de http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
solution de contournement
Même si la stratégie de même origine empêche les scripts d'accéder au contenu des sites d'origine différente, si vous possédez les deux pages, vous pouvez contourner ce problème en utilisant window.postMessageet son messageévénement relatif pour envoyer des messages entre les deux pages, comme ceci:
Dans votre page principale:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
Le deuxième argument de postMessage()peut être '*'d'indiquer aucune préférence quant à l'origine de la destination. Une origine cible doit toujours être fournie lorsque cela est possible, pour éviter de divulguer les données que vous envoyez à tout autre site.
Dans votre <iframe>(contenu dans la page principale):
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
Cette méthode peut être appliquée dans les deux sens , en créant également un écouteur dans la page principale et en recevant les réponses du cadre. La même logique peut également être implémentée dans les fenêtres contextuelles et, fondamentalement, dans toute nouvelle fenêtre générée par la page principale (par exemple en utilisant window.open()), sans aucune différence.
Désactiver la politique de même origine dans votre navigateur
Il y a déjà de bonnes réponses à ce sujet (je viens de les trouver sur Google), donc, pour les navigateurs où cela est possible, je lierai la réponse relative. Cependant, n'oubliez pas que la désactivation de la politique de même origine n'affectera que votre navigateur . En outre, l'exécution d'un navigateur avec des paramètres de sécurité de même origine désactivés permet à tout site Web d'accéder à des ressources d'origine croisée, donc c'est très dangereux et ne devrait JAMAIS être fait si vous ne savez pas exactement ce que vous faites (par exemple à des fins de développement) .
Access-Control-Allow-Originne s'applique pas aux iFrames, seulement aux XHR, aux polices, à WebGL etcanvas.drawImage. Je crois quepostMessagec'est la seule option.