Maison >interface Web >js tutoriel >Pourquoi JavaScript ne peut-il pas accéder aux Iframes d'origine croisée et comment puis-je contourner ce problème ?

Pourquoi JavaScript ne peut-il pas accéder aux Iframes d'origine croisée et comment puis-je contourner ce problème ?

DDDoriginal: 2024-12-23 15:55:16381parcourir

Why Can't JavaScript Access Cross-Origin Iframes, and How Can I Work Around It?

Énigme de la politique de même origine : accès refusé aux cadres d'origine croisée

Lors de la tentative d'accès à des éléments dans un en utilisant JavaScript, vous pouvez rencontrer la redoutable erreur « SecurityError: Blocked a frame with origin from access a cross-origin frame ». Il s'agit d'un résultat direct de la politique de même origine, une mesure de sécurité critique qui isole les ressources en fonction de leur origine (protocole, nom d'hôte et port).</p> <p><h3>Qu'est-ce que la politique de même origine ? </h3></p> <p>La politique de même origine empêche les scripts d'accéder au contenu provenant d'une origine différente. L'origine est considérée comme différente si l'un des composants d'URL suivants diffère :</p> <ul> <li>Protocole (par exemple, http contre https)</li> <li>Nom d'hôte (par exemple, www.example.com contre data. example.com)</li> <li>Port (par exemple, 80 vs. 2251)</li> </ul> <p><h3>Restrictions frustrantes</h3></p> <p>Cette stratégie empêche efficacement vos scripts d'interagir avec le contenu de sites Web externes. Par exemple, si votre page principale est chargée depuis http://www.example.com et que vous tentez d'accéder à un fichier <iframe> chargé depuis https://www.example.com, vous recevrez l'erreur de sécurité.</p> <p><h3>Solution : Cross-Origin Communication</h3></p> <p>Bien que vous ne puissiez pas accéder directement cadres d'origine croisée à l'aide de JavaScript, vous pouvez utiliser window.postMessage et son événement de message correspondant pour établir la communication entre les pages. Voici un bref aperçu :</p> <ol> <li> <strong>Dans la page principale :</strong> Utilisez postMessage pour envoyer des données à l'iframe avec une origine correspondante.</li> <li> <strong>Dans l'iframe :</strong> Écoutez l'événement du message et traitez les données uniquement si l'origine correspond à celle attendue valeur.</li> </ol> <p><h3>Désactivation de la politique de même origine (prudence conseillée)</h3></p> <p>Il est possible de désactiver la politique de même origine dans certains navigateurs, mais cela doit être considéré comme un risque de sécurité et effectué uniquement à des fins de développement. N'oubliez pas que la désactivation de la stratégie accorde un accès illimité aux ressources multi-origines, exposant potentiellement votre navigateur à des failles de sécurité.</p><p>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!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">Error</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">Access</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?" href="https://m.php.cn/fr/faq/1796731930.html">Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?</a></span><span>Article suivant：<a class="dBlack" title="Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?" href="https://m.php.cn/fr/faq/1796731947.html">Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>