Comment surmonter « SecurityError : accès cross-origine bloqué » lors de l'utilisation d'Iframes ?

Erreur de sécurité : accès cross-origine bloqué

Lorsque vous tentez d'intégrer une iframe dans votre page HTML et d'accéder à ses éléments à l'aide de JavaScript, vous pouvez rencontrer l'erreur suivante :

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

Cette erreur provient de l'adhésion du navigateur à la politique de même origine, une mesure de sécurité qui empêche les scripts d'accéder aux frames avec origines différentes. Une origine englobe le protocole, le nom d'hôte et le port.

Solution de contournement

Bien que l'accès direct aux scripts d'origine croisée soit interdit, vous pouvez utiliser window.postMessage et son événement de message correspondant pour établir une communication entre le cadres :

Principal Page :

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe :

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

Cette approche permet une communication bidirectionnelle entre les frames. La transmission de messages d'origine croisée peut également être appliquée aux pop-ups et autres nouvelles fenêtres générées à partir de la page principale.

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!