Cara untuk menghindari kebijakan asal yang sama

Kebijakan asal yang sama

Saya ingin membuat wiki komunitas tentang kebijakan yang sama asal HTML / JS untuk semoga membantu siapa pun yang mencari topik ini. Ini adalah salah satu topik yang paling dicari di SO dan tidak ada wiki yang dikonsolidasikan untuk itu jadi di sini saya lanjutkan :)

Kebijakan asal yang sama mencegah dokumen atau skrip yang diambil dari satu sumber dari mendapatkan atau mengatur properti dokumen dari sumber lain. Kebijakan ini berlaku sejak Netscape Navigator 2.0.

Apa beberapa cara favorit Anda untuk berkeliling di kebijakan yang sama-asal?

Harap simpan contoh-contoh dengan bertele-tele dan sebaiknya tautkan sumber Anda.

The document.domainmetode

• Jenis metode: iframe .

Perhatikan bahwa ini adalah metode iframe yang menetapkan nilai document.domain ke sufiks domain saat ini. Jika melakukannya, domain yang lebih pendek digunakan untuk pemeriksaan asal berikutnya. Misalnya, asumsikan skrip dalam dokumen di http://store.company.com/dir/other.htmljalankan pernyataan berikut:

document.domain = "company.com";

Setelah pernyataan itu dieksekusi, halaman akan melewati pemeriksaan asal dengan http://company.com/dir/page.html. Namun, dengan alasan yang sama, company.com tidak dapat diatur document.domain ke othercompany.com.

Dengan metode ini, Anda akan diizinkan untuk mengeksekusi javascript dari iframe yang bersumber pada subdomain pada halaman yang bersumber pada domain utama. Metode ini tidak cocok untuk sumber daya lintas-domain karena browser seperti Firefox tidak akan memungkinkan Anda untuk mengubah document.domainke domain yang sepenuhnya asing.

Sumber: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

Metode Berbagi Sumber Daya Silang-Asal

• Jenis metode: AJAX .

Cross-Origin Resource Sharing (CORS) adalah W3C Working Draft yang mendefinisikan bagaimana browser dan server harus berkomunikasi ketika mengakses sumber di seluruh asal. Gagasan dasar di balik CORS adalah menggunakan header HTTP khusus untuk memungkinkan browser dan server mengetahui cukup banyak tentang satu sama lain untuk menentukan apakah permintaan atau respons harus berhasil atau gagal.

Untuk permintaan sederhana, permintaan yang menggunakan salah satu GETatau POSTtanpa tajuk khusus dan yang badannya adalah text/plain, permintaan dikirim dengan tajuk tambahan yang disebut Origin. Header Asal berisi asal (protokol, nama domain, dan port) dari halaman yang meminta sehingga server dapat dengan mudah menentukan apakah harus melayani respons atau tidak. Contoh Origintajuk mungkin terlihat seperti ini:

Origin: http://www.stackoverflow.com

Jika server memutuskan bahwa permintaan harus diizinkan, ia mengirim Access-Control-Allow-Originheader yang menggemakan asal yang sama dengan yang dikirim atau *jika itu adalah sumber daya publik. Sebagai contoh:

Access-Control-Allow-Origin: http://www.stackoverflow.com

Jika tajuk ini tidak ada, atau asal-usulnya tidak cocok, maka peramban tidak mengizinkannya. Jika semuanya baik-baik saja, maka browser memproses permintaan. Perhatikan bahwa baik permintaan maupun respons tidak menyertakan informasi cookie.

Tim Mozilla menyarankan dalam posting mereka tentang CORS bahwa Anda harus memeriksa keberadaan withCredentials properti untuk menentukan apakah browser mendukung CORS melalui XHR. Anda kemudian dapat berpasangan dengan keberadaan XDomainRequestobjek untuk menutupi 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 agar metode CORS berfungsi, Anda harus memiliki akses ke semua jenis mekanisme header server dan tidak bisa begitu saja mengakses sumber daya pihak ketiga.

Sumber: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

The window.postMessagemetode

• Jenis metode: iframe .

window.postMessage, ketika dipanggil, menyebabkan a MessageEventuntuk dikirim di jendela target ketika skrip yang tertunda yang harus dieksekusi selesai (misalnya penangan peristiwa yang tersisa jika window.postMessagedipanggil dari penangan peristiwa, batas waktu pending yang ditetapkan sebelumnya, dll.). The MessageEventmemiliki pesan jenis, sebuah dataproperti yang diatur ke nilai string dari argumen pertama yang diberikan kepada window.postMessage, sebuah originproperti yang sesuai dengan asal-usul dokumen utama di jendela menelepon window.postMessagepada waktu itu window.postMessagedisebut, dan sourceproperti yang jendela dari yangwindow.postMessage disebut.

Untuk menggunakan window.postMessage, pendengar acara harus dilampirkan:

    // Internet Explorer
    window.attachEvent('onmessage',receiveMessage);

    // Opera/Mozilla/Webkit
    window.addEventListener("message", receiveMessage, false);

Dan suatu receiveMessagefungsi harus dinyatakan:

function receiveMessage(event)
{
    // do something with event.data;
}

Iframe luar-situs juga harus mengirim acara dengan benar melalui postMessage:

<script>window.parent.postMessage('foo','*')</script>

Jendela apa pun dapat mengakses metode ini di jendela lain, kapan saja, apa pun lokasi dokumen di jendela itu, untuk mengirimkannya pesan. Akibatnya, pendengar acara apa pun yang digunakan untuk menerima pesan harus terlebih dahulu memeriksa identitas pengirim pesan, menggunakan asal dan kemungkinan sumber properti. Ini tidak dapat dikecilkan: Kegagalan untuk memeriksa origindan mungkinsource properti memungkinkan serangan skrip lintas situs.

Sumber: https://developer.mozilla.org/en/DOM/window.postMessage

Metode Reverse Proxy

• Jenis metode: Ajax

Menyiapkan proxy terbalik sederhana di server, akan memungkinkan browser untuk menggunakan jalur relatif untuk permintaan Ajax, sementara server akan bertindak sebagai proxy ke lokasi jauh.

Jika menggunakan mod_proxy di Apache, arahan konfigurasi mendasar untuk mengatur proxy terbalik adalah ProxyPass. Biasanya digunakan sebagai berikut:

ProxyPass     /ajax/     http://other-domain.com/ajax/

Dalam hal ini, browser akan dapat meminta /ajax/web_service.xmlsebagai 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 proxy terbalik dapat dengan mudah mendistribusikan permintaan ke beberapa back-end, sehingga bertindak sebagai penyeimbang beban .

Saya menggunakan JSONP.

Pada dasarnya, Anda menambahkan

<script src="http://..../someData.js?callback=some_func"/>

di halaman Anda.

some_func () harus dipanggil agar Anda diberi tahu bahwa datanya ada.

AnyOrigin tidak berfungsi dengan baik dengan beberapa situs https, jadi saya hanya menulis alternatif open source bernama whateverorigin.org yang tampaknya berfungsi baik dengan https.

Kode di github .

Cara terbaru untuk mengatasi kebijakan asal-sama yang saya temukan adalah http://anyorigin.com/

Situs ini dibuat sehingga Anda hanya memberikan url apa pun dan menghasilkan kode javascript / jquery untuk Anda yang memungkinkan Anda mendapatkan html / data, terlepas dari asalnya. Dengan kata lain, itu membuat url atau halaman web permintaan JSONP.

Saya merasa cukup berguna :)

Berikut beberapa contoh kode javascript dari anyorigin:

$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
    $('#output').html(data.contents);
});

Saya tidak bisa mengklaim kredit untuk gambar ini, tetapi cocok dengan semua yang saya tahu tentang hal ini dan menawarkan sedikit humor pada saat yang sama.

http://www.flickr.com/photos/iluvrhinestones/5889370258/

The JSONP datang ke pikiran:

JSONP atau "JSON with padding" adalah pelengkap format data JSON dasar, pola penggunaan yang memungkinkan halaman untuk meminta dan lebih bermakna menggunakan JSON dari server selain dari server utama. JSONP adalah alternatif untuk metode yang lebih baru yang disebut Cross-Origin Resource Sharing.

Secara pribadi, window.postMessageadalah cara paling andal yang saya temukan untuk peramban modern. Anda harus melakukan sedikit lebih banyak pekerjaan untuk memastikan Anda tidak membiarkan diri Anda terbuka terhadap serangan XSS, tetapi itu adalah tradeoff yang masuk akal.

Ada juga beberapa plugin untuk toolkit Javascript populer di luar sana yang membungkus window.postMessageyang menyediakan fungsionalitas yang mirip dengan browser lama menggunakan metode lain yang dibahas di atas.

Yah, saya menggunakan curl di PHP untuk menghindari ini. Saya memiliki layanan web 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 adalah javascript yang melakukan 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();
}

HTML saya berjalan di WAMP di port 80. Jadi begini, kebijakan asal yang sama telah dielakkan :-)

Berikut adalah beberapa solusi dan penjelasan tentang kebijakan asal yang sama:
Blog Thiru - Browser solusi kebijakan asal yang sama

Ini menganalisis cukup banyak apa yang tersedia di luar sana: http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

Untuk solusi postMessage lihat:

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