Aynı menşe politikası
Sen olamaz bir erişmek <iframe>bunu eğer JavaScript kullanarak farklı kökenli olan, büyük bir güvenlik açığı olacaktır. İçin aynı kökenli ilke tarayıcılar komut farklı bir kökene sahip bir çerçeve erişmeye çalışıyor engellemek .
Adresin aşağıdaki bölümlerinden en az biri korunmazsa orijin farklı kabul edilir:
<protocol>://<hostname>:<port>/...
Bir çerçeveye erişmek istiyorsanız, protokol , ana makine adı ve bağlantı noktası alan adınızla aynı olmalıdır.
NOT: Internet Explorer'ın bu kurala tam olarak uymadığı bilinmektedir, ayrıntılar için buraya bakın.
Örnekler
Aşağıdaki URL’lere erişmeye çalışırken neler olacağı aşağıda açıklanmıştır: 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
Geçici çözüm
Aynı köken ilkesi, komut dosyalarının farklı bir kökene sahip sitelerin içeriğine erişmesini engellemesine rağmen, her iki sayfaya da sahipsenizwindow.postMessagemessage , aşağıdaki gibi iki sayfa arasında ileti göndermek için bu sorunu ve göreceli etkinliğini kullanarak bu sorunu çözebilirsiniz :
Ana sayfanızda:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
İkinci argüman , hedefin kökeni hakkında hiçbir tercih belirtmemek postMessage()olabilir '*'. Başka bir siteye gönderdiğiniz verileri ifşa etmekten kaçınmak için her zaman mümkün olduğunda bir hedef menşe sağlanmalıdır.
In sizin <iframe>(ana sayfada bulunan):
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;
}
});
Bu yöntem, her iki yönde de uygulanabilir , ana sayfada da bir dinleyici oluşturur ve çerçeveden yanıtlar alır. Aynı mantık, pop-up'larda ve temelde ana sayfa tarafından oluşturulan herhangi bir yeni pencerede (örn. Kullanarak window.open()), herhangi bir fark olmadan da uygulanabilir.
Aynı kaynak politikasını devre dışı bırakılması için tarayıcınızda
Bu konu hakkında bazı iyi cevaplar var (onları sadece googling buldum), bu yüzden bunun mümkün olduğu tarayıcılar için göreceli cevabı bağlayacağım. Ancak, lütfen unutmayın aynı kaynak politikası devre dışı sadece etkileyecektir sizin tarayıcınızı . Ayrıca, aynı kökenli güvenlik ayarları devre dışı bırakılmış bir tarayıcı çalıştırmak, web siteleri arası kaynaklara herhangi bir erişim sağlar, bu nedenle çok güvensizdir ve ne yaptığınızı tam olarak bilmiyorsanız ASLA yapılmamalıdır (örn. Geliştirme amaçları) .
Access-Control-Allow-Originiçin geçerli olmadığını, yalnızca XHR'ler, Fontlar, WebGL ve için geçerli olduğunu gösterircanvas.drawImage.postMessageTek seçenek olduğuna inanıyorum .