Rumah >hujung hadapan web >tutorial js >Mengapa JavaScript Tidak Boleh Mengakses Iframe Silang Asal, dan Bagaimana Saya Boleh Mengatasinya?

Mengapa JavaScript Tidak Boleh Mengakses Iframe Silang Asal, dan Bagaimana Saya Boleh Mengatasinya?

DDDasal: 2024-12-23 15:55:16420semak imbas

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

Same-Origin Policy Conundrum: Akses Ditolak untuk Cross-Origin Frames

Apabila cuba mengakses elemen dalam menggunakan JavaScript, anda mungkin menghadapi ralat "SecurityError: Menyekat bingkai dengan asal daripada mengakses bingkai silang asal" yang digeruni. Ini adalah hasil langsung daripada dasar asal yang sama, langkah keselamatan kritikal yang mengasingkan sumber berdasarkan asalnya (protokol, nama hos dan port).</p> <p><h3>Apakah Dasar Asal Sama? </h3></p> <p>Dasar asal yang sama menghalang skrip daripada mengakses kandungan daripada asal yang berbeza. Asal dianggap berbeza jika mana-mana komponen URL berikut berbeza:</p> <ul> <li>Protokol (cth., http lwn. https)</li> <li>Nama hos (cth., www.example.com lwn. data. example.com)</li> <li>Port (mis., 80 lwn. 2251)</li> </ul> <p><h3>Sekatan yang Mengecewakan</h3></p> <p>Dasar ini secara berkesan menghalang skrip anda daripada berinteraksi dengan kandungan daripada tapak web luaran. Sebagai contoh, jika halaman utama anda dimuatkan daripada http://www.example.com dan anda cuba mengakses <iframe> dimuatkan daripada https://www.example.com, anda akan menerima ralat keselamatan.</p> <p><h3>Penyelesaian: Komunikasi Rentas Asal</h3></p> <p>Walaupun anda tidak boleh mengakses terus bingkai silang asal menggunakan JavaScript, anda boleh menggunakan window.postMessage dan acara mesej yang sepadan untuk mewujudkan komunikasi antara halaman. Berikut ialah gambaran ringkas:</p> <ol> <li> <strong>Dalam halaman utama:</strong> Gunakan postMessage untuk menghantar data ke iframe dengan asal yang sepadan.</li> <li> <strong>Dalam iframe :</strong> Dengar acara mesej dan proses data hanya jika asalnya sepadan dengan yang dijangkakan nilai.</li> </ol> <p><h3>Melumpuhkan Dasar Asal Sama (Awas Dinasihatkan)</h3></p> <p>Adalah mungkin untuk melumpuhkan dasar asal yang sama dalam penyemak imbas tertentu, tetapi ini harus dianggap sebagai risiko keselamatan dan hanya dilakukan untuk tujuan pembangunan. Ingat, melumpuhkan dasar memberikan akses tanpa had kepada sumber silang asal, yang berpotensi mendedahkan penyemak imbas anda kepada kelemahan keselamatan.</p><p>Atas ialah kandungan terperinci Mengapa JavaScript Tidak Boleh Mengakses Iframe Silang Asal, dan Bagaimana Saya Boleh Mengatasinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?" href="https://m.php.cn/ms/faq/1796731930.html">Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?" href="https://m.php.cn/ms/faq/1796731947.html">Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/1609.html" title="Analisis mendalam bagi komponen kumpulan senarai Bootstrap" class="aBlack">Analisis mendalam bagi komponen kumpulan senarai Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1640.html" title="Penjelasan terperinci tentang fungsi JavaScript kari" class="aBlack">Penjelasan terperinci tentang fungsi JavaScript kari</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1949.html" title="Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)" class="aBlack">Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/2248.html" title="Angularjs menyepadukan UI WeChat (weui)" class="aBlack">Angularjs menyepadukan UI WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/2351.html" title="Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional" class="aBlack">Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional</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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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>