SecurityError: Memblokir bingkai dengan asal dari mengakses bingkai asal-silang

Saya memuat <iframe>di halaman HTML saya dan mencoba mengakses elemen di dalamnya menggunakan Javascript, tetapi ketika saya mencoba untuk mengeksekusi kode saya, saya mendapatkan kesalahan berikut:

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

Bisakah Anda membantu saya menemukan solusi agar saya dapat mengakses elemen dalam bingkai?

Saya menggunakan kode ini untuk pengujian, tetapi sia-sia:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

Kebijakan asal yang sama

Anda tidak dapat mengakses <iframe>dengan asal yang berbeda menggunakan JavaScript, itu akan menjadi kelemahan keamanan yang sangat besar jika Anda bisa melakukannya. Untuk browser kebijakan asal yang sama, blokir skrip yang mencoba mengakses bingkai dengan asal yang berbeda .

Asal dianggap berbeda jika setidaknya salah satu bagian alamat berikut ini tidak dikelola:

<protocol>://<hostname>:<port>/...

Protokol , nama host , dan port harus sama dengan domain Anda, jika Anda ingin mengakses sebuah bingkai.

^{CATATAN: Internet Explorer diketahui tidak sepenuhnya mengikuti aturan ini, lihat di sini untuk detailnya.}

Contohnya

Inilah yang akan terjadi ketika mencoba mengakses URL berikut dari http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

Penanganan masalah

Meskipun kebijakan yang sama-asal memblokir skrip untuk mengakses konten situs dengan asal yang berbeda, jika Anda memiliki kedua halaman, Anda dapat mengatasi masalah ini menggunakan window.postMessagedan messagekejadian relatifnya untuk mengirim pesan antara dua halaman, seperti ini:

• Di halaman utama Anda:

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

  Argumen kedua untuk postMessage()dapat '*'menunjukkan tidak ada preferensi tentang asal tujuan. Asal target harus selalu disediakan bila memungkinkan, untuk menghindari pengungkapan data yang Anda kirim ke situs lain.

• Di <iframe>(terkandung di halaman utama) Anda:

  window.addEventListener('message', event => {
      // IMPORTANT: check the origin of the data! 
      if (event.origin.startsWith('http://your-first-site.com')) { 
          // The data was sent from your site.
          // Data sent with postMessage is stored in event.data:
          console.log(event.data); 
      } else {
          // The data was NOT sent from your site! 
          // Be careful! Do not use it. This else branch is
          // here just for clarity, you usually shouldn't need it.
          return; 
      } 
  }); 
  

Metode ini dapat diterapkan di kedua arah , membuat pendengar di halaman utama juga, dan menerima tanggapan dari bingkai. Logika yang sama juga dapat diimplementasikan dalam pop-up dan pada dasarnya setiap jendela baru yang dihasilkan oleh halaman utama (misalnya menggunakan window.open()) juga, tanpa perbedaan apa pun.

Menonaktifkan kebijakan yang sama-asal pada browser Anda

Sudah ada beberapa jawaban bagus tentang topik ini (saya baru saja menemukan mereka googling), jadi, untuk browser yang memungkinkan, saya akan menautkan jawaban relatif. Namun, harap diingat bahwa menonaktifkan kebijakan asal yang sama hanya akan memengaruhi browser Anda . Selain itu, menjalankan peramban dengan pengaturan keamanan asal-sama yang dinonaktifkan memberikan akses situs web apa pun ke sumber daya lintas-asal, sehingga sangat tidak aman dan TIDAK PERNAH dilakukan jika Anda tidak tahu persis apa yang Anda lakukan (mis. Tujuan pengembangan) .

• Google Chrome
• Mozilla Firefox
• Safari
• Opera
• Microsoft Edge: tidak mungkin
• Microsoft Internet Explorer

Melengkapi jawaban Marco Bonelli: cara terbaik saat ini untuk berinteraksi antara frame / iframe yang digunakan window.postMessage, didukung oleh semua browser

Periksa server web domain untuk mengetahui http://www.<domain>.comkonfigurasi. X-Frame-Options Ini adalah fitur keamanan yang dirancang untuk mencegah serangan clickJacking,

Bagaimana cara kerja clickJacking?

1. Halaman jahat terlihat persis seperti halaman korban.
2. Kemudian itu menipu pengguna untuk memasukkan nama pengguna dan kata sandi mereka.

Secara teknis kejahatan memiliki iframesumber dengan halaman korban.

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

Cara kerja fitur keamanan

Jika Anda ingin mencegah permintaan server web untuk di-render dalam iframeadd x-frame-options

X-Frame-Options MENYANGKAL

Opsinya adalah:

1. SAMAORIGIN // hanya izinkan domain saya membuat HTML saya di dalam iframe.
2. DENY // jangan izinkan HTML saya di-render di dalam iframe apa pun
3. "ALLOW-FROM https://example.com/ " // izinkan domain tertentu untuk merender HTML saya di dalam iframe

Ini adalah contoh konfigurasi IIS:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

Solusi untuk pertanyaan itu

Jika server web mengaktifkan fitur keamanan, itu dapat menyebabkan SecurityError sisi klien sebagaimana mestinya.

Bagi saya, saya ingin menerapkan jabat tangan 2 arah, yang berarti:
- jendela induk akan memuat lebih cepat dari iframe
- iframe harus berbicara ke jendela induk segera setelah siap
- induk siap menerima pesan iframe dan memutar ulang

kode ini digunakan untuk mengatur label putih di iframe menggunakan kode [CSS custom property]
:
iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

induk

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

secara alami Anda dapat membatasi asal dan teks, ini mudah-untuk-bekerja-dengan kode
saya menemukan ujian ini sangat membantu:
[Pesan Lintas Domain Dengan postMessage]

Saya ingin menambahkan konfigurasi khusus Java Spring yang dapat mempengaruhi ini.

Di situs Web atau aplikasi Gateway ada pengaturan contentSecurityPolicy

di Spring Anda dapat menemukan implementasi subkelas WebSecurityConfigurerAdapter

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

Browser akan diblokir jika Anda belum menentukan konten eksternal yang aman di sini.

Jika Anda memiliki kontrol atas konten iframe - yaitu, jika hanya dimuat dalam pengaturan asal-silang seperti di Amazon Mechanical Turk - Anda dapat menghindari masalah ini dengan <body onload='my_func(my_arg)'>atribut untuk html dalam.

Misalnya, untuk html dalam, gunakan thisparameter html (ya - thisdidefinisikan dan mengacu pada jendela induk dari elemen tubuh dalam):

<body onload='changeForm(this)'>

Di html dalam:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

• Buka menu mulai
• Ketik windows + R atau buka "Run
• Jalankan perintah berikut.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security