Saya ingin membuat sebuah komunitas wiki mengenai HTML/JS sama-asal kebijakan mudah-mudahan membantu siapa saja yang mencari topik ini. Ini adalah salah satu yang paling dicari-untuk topik JADI dan tidak ada konsolidasi wiki untuk itu jadi di sini aku pergi :)
asal-usul Yang sama kebijakan mencegah dokumen atau naskah yang dimuat dari satu asal dari mendapatkan atau pengaturan sifat-sifat dari dokumen lain asal. Kebijakan ini tanggal semua cara kembali ke Netscape Navigator 2.0.
Mohon jauhkan contoh verbose dan sebaiknya juga link sumber anda.
dokumen.domain
metodeCatatan bahwa ini adalah sebuah iframe metode yang menetapkan nilai dari dokumen.domain yang akhiran domain saat ini. Jika hal itu terjadi, maka domain yang lebih pendek digunakan untuk selanjutnya asal cek. Sebagai contoh, asumsikan sebuah script dalam dokumen di http://store.company.com/dir/other.html
mengeksekusi pernyataan berikut:
document.domain = "company.com";
Setelah pernyataan itu dijalankan, halaman akan lulus asal periksa dengan http://company.com/dir/page.html
. Namun, dengan alasan yang sama, company.com tidak bisa diatur dokumen.domain
untuk othercompany.com
.
Dengan metode ini, anda akan diizinkan untuk exectue javascript dari iframe bersumber pada subdomain pada halaman bersumber pada domain utama. Metode ini tidak cocok untuk cross-domain sumber daya sebagai browser seperti Firefox tidak akan memungkinkan anda untuk mengubah dokumen.domain
untuk yang benar-benar asing domain.
Sumber: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
Cross-Origin Resource Sharing (CORS) adalah W3C Bekerja Rancangan yang mendefinisikan bagaimana browser dan server harus berkomunikasi ketika mengakses sumber-sumber di asal-usul. Ide dasar di balik CORS adalah dengan menggunakan custom header HTTP untuk memungkinkan kedua browser dan server untuk cukup tahu tentang satu sama lain untuk menentukan apakah permintaan atau respon yang harus berhasil atau gagal.
Untuk permintaan sederhana, satu yang menggunakan MENDAPATKAN
atau POST
dengan custom header dan tubuh yang text/plain
, permintaan akan dikirim dengan tambahan header yang disebut Asal
. Asal header berisi asal (protokol, nama domain, dan port) meminta halaman sehingga server dapat dengan mudah menentukan apakah atau tidak itu harus melayani respon. Contoh Asal
header akan terlihat seperti ini:
Origin: http://www.stackoverflow.com
Jika server memutuskan bahwa permintaan harus diperbolehkan, ia akan mengirimkan sebuah Access-Control-Allow-Origin
header bergema kembali asal-usul yang sama yang dikirim atau *
jika sumber daya publik. Misalnya:
Access-Control-Allow-Origin: http://www.stackoverflow.com
Jika header ini hilang, atau asal-usul yang tidak cocok, maka browser tidak mengizinkan permintaan. Jika semua baik-baik, maka browser memproses permintaan. Perhatikan bahwa baik permintaan atau tanggapan mencakup informasi cookie.
Mozilla tim menunjukkan di mereka posting tentang CORS bahwa anda harus memeriksa keberadaan dari withCredentials
properti untuk menentukan apakah browser mendukung CORS melalui XHR. Anda kemudian dapat pasangan dengan keberadaan XDomainRequest
objek untuk menutup semua browser:
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
var request = createCORSRequest("get", "http://www.stackoverflow.com/");
if (request){
request.onload = function() {
// ...
};
request.onreadystatechange = handler;
request.send();
}
Perhatikan bahwa untuk CORS metode untuk bekerja, anda harus memiliki akses ke semua jenis server header mekanik dan dapat't hanya akses pihak ketiga sumber daya.
Sumber: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
Jendela.postMessage
metodejendela.postMessage
, saat dipanggil, menyebabkan MessageEvent
akan dikirim pada target jendela ketika pending script yang harus dijalankan selesai (misalnya sisa event handler jika jendela.postMessage
disebut dari sebuah event handler, yang sebelumnya mengatur pending timeout, dll.). The MessageEvent
memiliki jenis pesan, data
properti yang diatur ke nilai string argumen pertama yang disediakan untuk jendela.postMessage
, sebuah asal
properti yang sesuai dengan asal-usul dokumen utama di jendela dan memanggil jendela.postMessage
pada waktu jendela.postMessage
dipanggil, dan sumber
properti yang merupakan jendela yang jendela.postMessage
disebut.
Untuk menggunakan jendela.postMessage
, sebuah acara pendengar harus dilampirkan:
// Internet Explorer
window.attachEvent('onmessage',receiveMessage);
// Opera/Mozilla/Webkit
window.addEventListener("message", receiveMessage, false);
Dan receiveMessage
fungsi harus dideklarasikan:
function receiveMessage(event)
{
// do something with event.data;
}
Off-site iframe juga harus mengirim peristiwa dengan benar melalui postMessage
:
<script>window.parent.postMessage('foo','*')</script>
Setiap jendela dapat mengakses metode ini pada jendela lain, pada setiap saat, terlepas dari lokasi dokumen di jendela, untuk mengirim pesan. Akibatnya, setiap event listener digunakan untuk menerima pesan harus terlebih dahulu memeriksa identitas pengirim pesan, dengan menggunakan asal dan kemungkinan sumber dan offline. Ini tidak dapat understated: Kegagalan untuk memeriksa asal
dan mungkin sumber
properties memungkinkan cross-site scripting serangan.
Sumber: https://developer.mozilla.org/en/DOM/window.postMessage
Menyiapkan sederhana reverse proxy di server, akan memungkinkan browser untuk menggunakan jalur relatif untuk permintaan Ajax, sementara server akan bertindak sebagai proxy untuk lokasi terpencil.
Jika menggunakan mod_proxy di Apache, dengan konfigurasi mendasar petunjuk untuk mendirikan sebuah reverse proxy adalah ProxyPass
. Hal ini biasanya digunakan sebagai berikut:
ProxyPass /ajax/ http://other-domain.com/ajax/
Dalam hal ini, browser akan mampu untuk permintaan /ajax/web_service.xml
sebagai URL relatif, tetapi server akan melayani ini dengan bertindak sebagai proxy untuk http://other-domain.com/ajax/web_service.xml
.
Salah satu fitur menarik dari metode ini adalah bahwa reverse proxy dapat dengan mudah mendistribusikan permintaan terhadap beberapa back-ujungnya, dengan demikian bertindak sebagai load balancer.
AnyOrigin didn't berfungsi dengan baik dengan beberapa situs https, jadi aku hanya menulis sebuah open source alternatif yang disebut whateverorigin.org yang tampaknya bekerja dengan baik dengan https.
Saya dapat't mengklaim kredit untuk gambar ini, tapi itu pertandingan semua yang saya tahu tentang hal ini dan menawarkan sedikit humor pada waktu yang sama.
Terbaru cara mengatasi sama-asal kebijakan itu aku've ditemukan http://anyorigin.com/
Situs's dibuat sehingga anda hanya memberikan url dan menghasilkan javascript/kode jquery untuk anda yang memungkinkan anda mendapatkan html/data, terlepas dari itu's asal. Dengan kata lain, itu membuat url atau halaman web yang JSONP permintaan.
I've ternyata cukup berguna :)
Berikut ini's beberapa contoh kode javascript dari anyorigin:
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
$('#output').html(data.contents);
});
The JSONP yang datang ke pikiran:
JSONP atau "JSON dengan padding" adalah untuk melengkapi basis data JSON format, pola penggunaan yang memungkinkan halaman untuk meminta dan lebih bermakna menggunakan JSON dari server lain selain server utama. JSONP adalah alternatif untuk metode yang lebih baru disebut Cross-Origin Resource Sharing.
Analisa ini cukup banyak apa yang tersedia di luar sana: http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier
Untuk postMessage solusi lihatlah ke:
https://github.com/chrissrogers/jquery-postmessage/blob/master/jquery.ba-postmessage.js
dan versi yang sedikit berbeda:
https://github.com/thomassturm/ender-postmessage/blob/master/ender-postmessage.js
Nah, saya menggunakan curl di PHP untuk menghindari hal ini. Saya memiliki jejaring yang berjalan di port 82.
<?php
$curl = curl_init();
$timeout = 30;
$ret = "";
$url="http://localhost:82/put_val?val=".$_GET["val"];
curl_setopt ($curl, CURLOPT_URL, $url);
curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt ($curl, CURLOPT_MAXREDIRS, 20);
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5");
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
$text = curl_exec($curl);
echo $text;
?>
Berikut ini adalah javascript yang membuat panggilan ke file PHP
function getdata(obj1, obj2) {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","phpURLFile.php?eqp="+obj1+"&val="+obj2,true);
xmlhttp.send();
}
Saya HTML yang berjalan pada WAMP di port 80. Jadi di sana kita pergi, asal yang sama kebijakan yang telah dielakkan :-)
Berikut ini adalah beberapa cara dan penjelasan yang sama-asal-kebijakan: Thiru's Blog - Browser yang sama asal kebijakan pemecahan masalah
Secara pribadi, jendela.postMessage
adalah cara yang paling dapat diandalkan yang saya've ditemukan untuk browser modern. Anda harus melakukan sedikit sedikit lebih banyak pekerjaan untuk memastikan anda'kembali tidak meninggalkan diri anda terbuka untuk serangan XSS, tapi itu's yang wajar tradeoff.
Ada juga beberapa plugin untuk Javascript populer toolkit di luar sana yang membungkus jendela.postMessage
yang menyediakan fungsionalitas mirip dengan browser yang lebih tua menggunakan metode lain yang dibahas di atas.