# 同源訪問策略 * 同源策略是 Netscape 提出的一個著名的安全策略； * 同源策略是瀏覽器最核心最基礎的安全策略； * 現在所有的可支持 Javascript 的瀏覽器都會使用這個策略； * Web 構建在同源策略基礎之上，瀏覽器對非同源腳本的限制措施是對同源策略的具體實現。 # 同源策略的含義詳解 * DOM 層面的同源策略：限制了來自不同源的 document 對象或 JS 腳本，對當前 document 對象的讀取或設置某些屬性。 * Cookie 和 XMLHttpRequest 層面的同源策略：只有和本網頁同源的腳本才會被執行，有時，AJAX 已經加載不同源的腳本，但絕對不會被執行。 * 同源策略的非絕對性： * 同源策略通常允許進行跨域寫操作、通常允許跨域資源嵌入、通常不允許跨域讀操作； * script、img、iframe、link、video、audio 等帶有 src 屬性的標簽可以從不同的域加載和執行資源，同源策略關注的是加載 JS 的頁面所在的域，而不是頁面內存放的 JS 文件的域。 * 其他插件的同源策略：Flash 等瀏覽器加載的第三方插件也有各自的同源策略，只是這些同源策略不屬于瀏覽器原生的同源策略，若有漏洞則可能被黑客利用，從而留下 XSS 攻擊的后患。 # 使用 CROS 實現跨域訪問 增加一個響應頭就可以實現跨域效果了。 ~~~ res.append('Access-Control-Allow-Origin', '*'); ~~~ # 使用 JSONP 實現跨域訪問 雖然我們不能直接使用 AJAX 跨域發送請求，但是我們可以利用一些標簽是可以跨域。 * 在頁面中需要先聲明函數，該函數的名稱需要和服務器端返回的數據對應，該函數接受一個參數； * 大多數情況，會把函數名提交到服務器端。 Express 中的響應對象中有一個方法 jsonp，提供這樣的功能。 ~~~ res.jsonp(null); // => callback(null) ? res.jsonp({user: 'tobi'}); // => callback({"user": "tobi"}) ? res.status(500).jsonp({error: 'message'}); // => callback({"error": "message"}) ~~~ 默認情況下，JSONP 回調名稱是 callback，可以請求參數進行修改。 ~~~ // 調用的時候傳遞參數 ?callback=foo res.jsonp({user: 'tobi'}); // => foo({"user": "tobi"}) ? app.set('jsonp callback name', 'cb'); ? // ?cb=foo res.status(500).jsonp({error: 'message'}); // => foo({"error": "message"}) ~~~ ## JSONP 案列 需求：當輸入框的內容發生變化發送請求（調用百度的 JSONP 接口）來獲取結果顯示出來 * 通過 script 標簽來設置 src 為請求路徑； * 先提供函數聲明。 ``` <input type="text" id="keyword"> <script> function fn(obj) { console.log(obj); var data = obj['s']; var ulEle = document.getElementsByTagName('ul')[0] || document.createElement('ul'); ulEle.innerHTML = ''; // 清空原來的搜索內容 data.forEach(function (ele) { var liEle = document.createElement("li"); liEle.innerText = ele; ulEle.appendChild(liEle); }); document.body.appendChild(ulEle); } </script> <script> var inputEle = document.getElementById('keyword'); inputEle.onkeyup = function () { // 刪除原來的 script 標簽 var oldScriptEle = document.getElementById('baiduJsonp'); if(oldScriptEle){ document.body.removeChild(oldScriptEle); } //創建 script 標簽插入到頁面中 var newScriptEle = document.createElement('script'); newScriptEle.setAttribute('id', 'baiduJsonp'); newScriptEle.setAttribute('src','https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + inputEle.value + '&cb=fn'); document.body.appendChild(newScriptEle); } </script> ```