Heim >Web-Frontend >js-Tutorial >Warum kann JavaScript nicht auf Cross-Origin-Iframes zugreifen und wie kann ich das umgehen?

Warum kann JavaScript nicht auf Cross-Origin-Iframes zugreifen und wie kann ich das umgehen?

DDDOriginal: 2024-12-23 15:55:16332Durchsuche

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

Same-Origin-Richtlinienrätsel: Zugriff für Cross-Origin-Frames verweigert

Beim Versuch, auf Elemente innerhalb eines Wenn Sie JavaScript verwenden, kann der gefürchtete Fehler „SecurityError: Ein Frame mit Ursprung wurde daran gehindert, auf einen Cross-Origin-Frame zuzugreifen“ auftreten. Dies ist ein direktes Ergebnis der Same-Origin-Richtlinie, einer kritischen Sicherheitsmaßnahme, die Ressourcen basierend auf ihrem Ursprung (Protokoll, Hostname und Port) isoliert.</p> <p><h3>Was ist die Same-Origin-Richtlinie? </h3></p> <p>Die Same-Origin-Richtlinie verhindert, dass Skripte auf Inhalte von einem anderen Ursprung zugreifen. Der Ursprung gilt als unterschiedlich, wenn sich eine der folgenden URL-Komponenten unterscheidet:</p> <ul> <li>Protokoll (z. B. http vs. https)</li> <li>Hostname (z. B. www.example.com vs. data. example.com)</li> <li>Port (z. B. 80 vs. 2251)</li> </ul> <p><h3>Frustrierende Einschränkungen</h3></p> <p>Diese Richtlinie verhindert effektiv, dass Ihre Skripte mit Inhalten von externen Websites interagieren. Wenn Ihre Hauptseite beispielsweise von http://www.example.com geladen wird und Sie versuchen, auf ein <iframe> zuzugreifen. von https://www.example.com geladen wurde, erhalten Sie den Sicherheitsfehler.</p> <p><h3>Workaround: Cross-Origin-Kommunikation</h3></p> <p>Während Sie nicht direkt darauf zugreifen können Cross-Origin-Frames mithilfe von JavaScript können Sie window.postMessage und das entsprechende Nachrichtenereignis verwenden, um die Kommunikation zwischen den Seiten herzustellen. Hier eine kurze Übersicht:</p> <ol> <li> <strong>Auf der Hauptseite:</strong>Verwenden Sie postMessage, um Daten mit einem passenden Ursprung an den Iframe zu senden.</li> <li> <strong>Im Iframe :</strong> Lauschen Sie auf das Nachrichtenereignis und verarbeiten Sie Daten nur, wenn der Ursprung mit dem erwarteten übereinstimmt value.</li> </ol> <p><h3>Deaktivieren der Same-Origin-Richtlinie (Vorsicht empfohlen)</h3></p> <p>Es ist möglich, die Same-Origin-Richtlinie in bestimmten Browsern zu deaktivieren, aber Dies sollte als Sicherheitsrisiko betrachtet werden und nur zu Entwicklungszwecken durchgeführt werden. Denken Sie daran, dass das Deaktivieren der Richtlinie uneingeschränkten Zugriff auf Cross-Origin-Ressourcen gewährt und Ihren Browser möglicherweise Sicherheitslücken aussetzt.</p><p>Das obige ist der detaillierte Inhalt vonWarum kann JavaScript nicht auf Cross-Origin-Iframes zugreifen und wie kann ich das umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?" href="https://m.php.cn/de/faq/1796731930.html">Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?</a></span><span>Nächster Artikel：<a class="dBlack" title="Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?" href="https://m.php.cn/de/faq/1796731947.html">Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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>