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.postMessage
dan message
kejadian 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) .
Access-Control-Allow-Origin
tidak berlaku untuk iFrames, hanya untuk XHRs, Fonts, WebGL dancanvas.drawImage
. Saya percayapostMessage
adalah satu-satunya pilihan.iframe.src
, dan jika situs itu berbeda dari nama host domain Anda, maka Anda tidak dapat mengakses bingkai itu.~
mengembalikan komplemen angka 2, sehinggan
menjadi-n-1
, artinya hanya-1
akan menjadi0
(yang ditafsirkan sebagaifalse
), dan nilai lain apa pun akan lulus ujian. Yaitu0 = -(-1)-1
tidak-(-1+1)
.location.ancestorOrigins[0]
adalah lokasi bingkai induk. Jika bingkai Anda berjalan di dalam situs lain dan Anda memeriksa menggunakanevent.origin.indexOf(location.ancestorOrigins[0])
Anda memeriksa apakah asal acara berisi alamat bingkai induk, yang selalu akan menjaditrue
, oleh karena itu Anda mengizinkan setiap orangtua dengan asal mana pun untuk mengakses bingkai Anda, dan ini jelas bukan sesuatu yang ingin Anda lakukan. Lagipula,document.referrer
itu juga praktik buruk, seperti yang sudah saya jelaskan di komentar di atas.Melengkapi jawaban Marco Bonelli: cara terbaik saat ini untuk berinteraksi antara frame / iframe yang digunakan
window.postMessage
, didukung oleh semua browsersumber
window.postMessage
kerjanya hanya akan menggandakan jawaban yang diterima yang sudah saya referensi. Selain itu, nilai penting yang ditambahkan oleh jawaban saya persis dengan referensi dokumentasi eksternal.Periksa server web domain untuk mengetahui
http://www.<domain>.com
konfigurasi.X-Frame-Options
Ini adalah fitur keamanan yang dirancang untuk mencegah serangan clickJacking,Bagaimana cara kerja clickJacking?
Secara teknis kejahatan memiliki
iframe
sumber dengan halaman korban.Cara kerja fitur keamanan
Jika Anda ingin mencegah permintaan server web untuk di-render dalam
iframe
add x-frame-optionsOpsinya adalah:
Ini adalah contoh konfigurasi IIS:
Solusi untuk pertanyaan itu
Jika server web mengaktifkan fitur keamanan, itu dapat menyebabkan SecurityError sisi klien sebagaimana mestinya.
sumber
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
induk
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]
sumber
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
...
Browser akan diblokir jika Anda belum menentukan konten eksternal yang aman di sini.
sumber
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
this
parameter html (ya -this
didefinisikan dan mengacu pada jendela induk dari elemen tubuh dalam):<body onload='changeForm(this)'>
Di html dalam:
sumber
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
sumber