Pourquoi mon code JavaScript obtient-il une erreur « SecurityError : Blocked a frame with origin... » lors de l'accès à un IFrame ?

Accès aux cadres d'origine croisée bloqué : compréhension de SecurityError

Dans le développement Web, lorsque vous tentez d'accéder à des éléments dans une iframe qui a un origine différente de celle du document parent, les développeurs peuvent rencontrer l'erreur suivante :

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.

Cette erreur se produit en raison de la politique de même origine mise en œuvre par les navigateurs Web.

Politique de même origine

La politique de même origine empêche les scripts d'accéder aux ressources de sites Web avec des origines pour prévenir les failles de sécurité potentielles. L'origine fait référence à la combinaison du protocole, du nom d'hôte et du port d'une URL.

Considérez les exemples suivants :

• http://www.example.com/home /index.html peut accéder aux ressources de http://www.example.com/home/other.html et http://www.example.com:80.
• https://google.com/search?q=james bond ne peut pas accéder aux ressources de http://www.example.com/home/index.html.

Solution de contournement pour accéder aux cadres d'origine croisée

Bien que l'accès JavaScript direct aux frames d'origine croisée soit interdit, il existe des solutions de contournement pour échanger data:

• window.postMessage() : Permet le passage de messages contrôlés entre deux fenêtres d'origines différentes.
• postMessage() écouteur dans l'iframe : écoute les messages envoyés par le parent document.

// In the main page:
frame.contentWindow.postMessage('message', 'https://your-second-site.example');

// In the iframe:
window.addEventListener('message', (event) => {
  if (event.origin === 'https://your-first-site.example') {
    console.log(event.data); // Received message
  }
});

Désactivation de la politique de même origine (Attention)

La désactivation de la politique de même origine peut être effectuée à des fins de développement, mais ne doit jamais être utilisé dans des environnements de production car il présente des risques de sécurité importants. Voici des liens vers des ressources permettant de désactiver la politique dans divers navigateurs :

• [Google Chrome](https://stackoverflow.com/questions/26982875/how-to-disable-same-origin-policy )
• [Mozilla Firefox](https://superuser.com/questions/287723/temporously-disable-same-origin-policy-in-firefox)
• [Safari](https://apple.stackexchange.com/questions /211467/comment-désactiver-la-politique-de-même-origine-dans-safari)

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!