Apakah dasar asal yang sama dalam javascript

Dalam JavaScript, dasar asal yang sama ialah metrik keselamatan yang penting untuk skrip sisi klien (terutamanya Javascript), iaitu, dua halaman dengan protokol (protokol), port, hos (nama domain) yang sama adalah milik sumber yang sama.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Apakah dasar asal yang sama?

Dasar Asal Yang Sama ialah metrik keselamatan yang penting untuk skrip sebelah pelanggan, terutamanya Javascript. Ia pertama kali keluar daripada Netscape Navigator 2.0, dan tujuannya adalah untuk menghalang dokumen atau skrip daripada dimuatkan daripada pelbagai sumber yang berbeza.

Dasar asal, iaitu dua halaman dengan protokol yang sama, port (jika dinyatakan) dan hos (nama domain) tergolong dalam sumber yang sama.

Sebagai contoh, http://www.example.com/dir/page.html URL ini,
protokol ialah http://,
nama domain ialah www.example.com,
port ialah 80 (port lalai boleh diabaikan ). Homologinya adalah seperti berikut.

    http://www.example.com/dir2/other.html：同源
    http://example.com/dir/other.html：不同源（域名不同）
    http://v2.www.example.com/dir/other.html：不同源（域名不同）
    http://www.example.com:81/dir/other.html：不同源（端口不同）

Intipati:

Intipatinya mudah: ia menganggap kandungan dipercayai yang dimuatkan dari mana-mana tapak sebagai tidak selamat. Apabila skrip yang tidak dipercayai oleh penyemak imbas dijalankan dalam kotak pasir, ia hanya dibenarkan untuk mengakses sumber dari tapak yang sama, bukan dari tapak lain yang mungkin berniat jahat.

Mengapa terdapat sekatan asal yang sama?

Mari kita berikan contoh: Contohnya, program penggodam menggunakan IFrame untuk membenamkan halaman log masuk bank sebenar pada halamannya Apabila anda log masuk dengan nama pengguna dan kata laluan sebenar anda, halamannya akan The content of input dalam borang anda boleh dibaca melalui Javascript, supaya nama pengguna dan kata laluan boleh diperolehi dengan mudah.

Tujuan dasar asal yang sama adalah untuk memastikan keselamatan maklumat pengguna dan menghalang tapak web berniat jahat daripada mencuri data.

Bayangkan situasi ini: tapak web A ialah sebuah bank, dan selepas pengguna log masuk, dia melayari laman web lain. Apakah yang berlaku jika tapak web lain boleh membaca kuki tapak web A?

Jelas sekali, jika kuki mengandungi privasi (seperti jumlah deposit), maklumat ini akan dibocorkan. Apa yang lebih menakutkan ialah kuki sering digunakan untuk menyimpan status log masuk pengguna Jika pengguna tidak log keluar, tapak web lain boleh menyamar sebagai pengguna dan melakukan apa sahaja yang mereka mahu. Kerana penyemak imbas juga menetapkan bahawa penyerahan borang tidak dihadkan oleh dasar asal yang sama.

Dapat dilihat bahawa "Dasar Asal Yang Sama" adalah perlu, jika tidak kuki boleh dikongsi dan Internet akan menjadi tidak selamat sama sekali.

Skop sekatan

Dengan perkembangan Internet, "dasar asal yang sama" telah menjadi semakin ketat. Pada masa ini, terdapat tiga tingkah laku yang dihadkan jika mereka bukan dari asal yang sama.

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） Ajax 请求不能发送。

Walaupun sekatan ini perlu, ia kadangkala menyusahkan dan menjejaskan tujuan yang munasabah. Di bawah, saya akan memperkenalkan secara terperinci bagaimana untuk memintas tiga batasan di atas.

Kaedah mengelak

1. pelayan ke penyemak imbas hanya boleh dikongsi oleh halaman web dengan asal yang sama. Walau bagaimanapun, nama domain peringkat pertama bagi kedua-dua halaman web adalah sama, tetapi nama domain peringkat kedua adalah berbeza. Penyemak imbas membenarkan perkongsian kuki dengan menetapkan .

Sebagai contoh, jika halaman web A ialah document.domain dan halaman web B ialah

, maka selagi document.domain yang sama ditetapkan, kedua-dua halaman web tersebut boleh berkongsi kuki.

http://w1.example.com/a.htmlhttp://w2.example.com/b.htmlKini, halaman web A menetapkan Kuki melalui skrip

document.domain = 'example.com';

Halaman web B boleh membaca kuki ini.

document.cookie = "test1=hello";

Kaedah ini hanya digunakan pada tetingkap Cookie dan iframe dan IndexDB tidak boleh menggunakan kaedah ini

Untuk memintas dasar asal yang sama, gunakan API PostMessage yang diperkenalkan di bawah.

var allCookie = document.cookie;

Selain itu, pelayan juga boleh menentukan nama domain kuki sebagai nama domain peringkat pertama apabila menetapkan kuki, seperti .example.com.

Dalam kes ini, kedua-dua nama domain peringkat kedua dan nama domain peringkat ketiga boleh membaca kuki ini tanpa sebarang tetapan.

 Set-Cookie: key=value; domain=.example.com; path=/

2. iframe

Jika kedua-dua halaman web mempunyai sumber yang berbeza, anda tidak boleh mendapatkan DOM pihak yang satu lagi. Contoh biasa ialah tetingkap iframe dan tetingkap yang dibuka dengan kaedah window.open, yang tidak boleh berkomunikasi dengan tetingkap induk.

Sebagai contoh, jika tetingkap induk menjalankan perintah berikut, jika tetingkap iframe bukan dari asal yang sama, ralat akan dilaporkan

Dalam arahan di atas, induk tetingkap ingin mendapatkan DOM tetingkap anak kerana ia adalah asal silang yang mengakibatkan ralat.

document.getElementById("myIFrame").contentWindow.document
 // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

Sebaliknya, tetingkap anak juga akan melaporkan ralat apabila mendapat DOM tetingkap utama.

Jika nama domain peringkat pertama kedua-dua tetingkap adalah sama, tetapi nama domain peringkat kedua berbeza, maka menetapkan atribut

yang diperkenalkan dalam bahagian sebelumnya boleh memintas perkara yang sama -dasar asal dan dapatkan DOM.

 window.parent.document.body    // 报错

Untuk tapak web dengan asal usul yang berbeza, pada masa ini terdapat tiga kaedah untuk menyelesaikan masalah komunikasi tetingkap merentas domain. document.domain

pengecam serpihan

window.name
API pemesejan merentas dokumen (Pemesejan merentas dokumen)
2.1 Pengecam serpihan

片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息写入子窗口的片段标识符。

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

子窗口通过监听hashchange事件得到通知。

window.onhashchange = checkMessage;

    function checkMessage() {
      var message = window.location.hash;
      // ...
    }

同样的，子窗口也可以改变父窗口的片段标识符。

 parent.location.href= target + "#" + hash;

2.2 window.name

浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

window.name = data;

接着，子窗口跳回一个与主窗口同域的网址。

location = 'http://parent.url.com/xxx.html';

然后，主窗口就可以读取子窗口的window.name了。

var data = document.getElementById('myFrame').contentWindow.name;

这种方法的优点是，window.name容量很大，可以放置非常长的字符串；缺点是必须监听子窗口window.name属性的变化，影响网页性能。

2.3 window.postMessage

上面两种方法都属于破解，HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。

这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

举例来说，父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了。

 var popup = window.open('http://bbb.com', 'title');
 popup.postMessage('Hello World!', 'http://bbb.com');

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即”协议 + 域名 + 端口”。也可以设为*，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');

父窗口和子窗口都可以通过message事件，监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

message事件的事件对象event，提供以下三个属性。

    event.source：发送消息的窗口
    event.origin: 消息发向的网址
    event.data: 消息内容

下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。

    window.addEventListener('message', receiveMessage);
    function receiveMessage(event) { 
       event.source.postMessage('Nice to see you!', '*');
    }

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
 function receiveMessage(event) {
   if (event.origin !== 'http://aaa.com') return;
   if (event.data === 'Hello World') {
       event.source.postMessage('Hello', event.origin);
   } else {
     console.log(event.data);
   }
 }

2.4 LocalStorage

通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。

下面是一个例子，主窗口写入iframe子窗口的localStorage。

window.onmessage = function(e) {
   if (e.origin !== 'http://bbb.com') {
        return;
   }   
   var payload = JSON.parse(e.data);
   localStorage.setItem(payload.key, JSON.stringify(payload.data));
 };

上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。

父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
win.postMessage(JSON.stringify({key: 'storage', data: obj}), 'http://bbb.com');

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) {
 if (e.origin !== 'http://bbb.com') return;
 var payload = JSON.parse(e.data);
 switch (payload.method) {
   case 'set':
     localStorage.setItem(payload.key, JSON.stringify(payload.data));
     break;
   case 'get':
     var parent = window.parent;
     var data = localStorage.getItem(payload.key);
     parent.postMessage(data, 'http://aaa.com');
     break;
   case 'remove':
     localStorage.removeItem(payload.key);
     break;
 }
};

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
 var obj = { name: 'Jack' };
 // 存入对象
 win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');
 // 读取对象
 win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
 window.onmessage = function(e) {
   if (e.origin != 'http://aaa.com') return;
   // "Jack"
   console.log(JSON.parse(e.data).name);
 };

3、Ajax

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

    JSONP
    WebSocket
    CORS

3.1 JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入<script>元素，由它向跨源网址发出请求。

   function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }

    window.onload = function () {
      addScriptTag('http://example.com/ip?callback=foo');
    }    function foo(data) {
      console.log('Your public IP address is: ' + data.ip);
    };

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({
  "ip": "8.8.8.8"
});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

3.2 WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com

上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。

正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

3.3 CORS

CORS ialah singkatan kepada Perkongsian Sumber Silang Asal. Ia adalah standard W3C dan merupakan penyelesaian asas untuk permintaan AJAX silang asal. Berbanding dengan JSONP yang hanya boleh menghantar permintaan GET, CORS membenarkan sebarang jenis permintaan.

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Apakah dasar asal yang sama dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!