cookie跨域
業(yè)務場景
場景1: 同一個主域下邊的跨域問題
- 百度www域名下邊登錄了简十,發(fā)現(xiàn)yun域名下面也自然的登錄了
path
cookie一般都是用于用戶訪問頁面而被創(chuàng)建的,但是==并不是只有在創(chuàng)建cookie的頁面才可以訪問這個cookie== 在默認情況下哨毁,處于安全方面的考慮,只有與創(chuàng)建cookie的頁面處于同一個目錄或者在創(chuàng)建cookie頁面的子目錄下的網(wǎng)頁才可以訪問源武。如果希望其父級或者整個網(wǎng)頁都能使用cookie就需要進行路徑的設置扼褪。
path表示cookie所在的目錄,haorooms.com默認為/,就是根目錄粱栖。在同一個服務器上有目錄如下
/post/,/post/id/,/tag/,/tag/haorooms/话浇,/tag/id/
現(xiàn)在假設
cookie1的path為/tag/,
cookie2的path為/tag/id/,
那么tag下的所有頁面都可以訪問到cookie1,而/tag/和/tag/haorooms/的子頁面不能訪問cookie2闹究,因為cookie2能讓其path路徑下的頁面進行訪問幔崖。
讓這個設置的cookie能被其他目錄或者父級的目錄訪問的方法
document.cookie = "name = value; path=/";
domain
domain表示的是cookie所在的域,默認是請求的地址
如網(wǎng)址為 http://www.haorooms.com/post/long_lianjie_websocket 渣淤,那么domain默認為www.haorooms.com赏寇。
而跨域訪問,
如域A為love.haorooms.com价认,域B為resource.haorooms.com嗅定,
那么在域A生產(chǎn)一個令域A和域B都能訪問的cookie就要將該cookie的domain設置為.haorooms.com;
如果要在域A生產(chǎn)一個令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設置為resource.haorooms.com用踩。
這樣渠退,我們就知道為什么www.百度 和yun.baidu共享cookie,我們只需要設置domain為.baidu.com就可以了【注:點是必須的】
場景2:
淘寶登錄了脐彩,發(fā)現(xiàn)天貓也登錄了碎乃,淘寶和天貓是完全不一樣的兩個域名
cookie跨域解決方案一般有如下幾種:
1、nginx反向代理
反向代理(Reverse Proxy)方式是指以代理服務器來接受Internet上的連接請求丁屎,然后將請求轉發(fā)給內部網(wǎng)絡上的服務器荠锭;并將從服務器上得到的結果返回給Internet上請求連接的客戶端旱眯,此時代理服務器對外就表現(xiàn)為一個服務器晨川。
反向代理服務器對于客戶端而言它就像是原始服務器,并且客戶端不需要進行任何特別的設置删豺」猜牵客戶端向反向代理 的命名空間(name-space)中的內容發(fā)送普通請求,接著反向代理將判斷向何處(原始服務器)轉交請求呀页,并將獲得的內容返回給客戶端妈拌,就像這些內容 原本就是它自己的一樣。
nginx配置如下:
upstream web1{
server 127.0.0.1:8089 max_fails=0 weight=1;
}
upstream web2 {
server 127.0.0.1:8080 max_fails=0 weight=1;
}
location /web1 {
proxy_pass http://web1;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie;
log_subrequest on;
}
location /web2 {
proxy_pass http://web2;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie;
log_subrequest on;
}
2、jsonp方法
其實尘分,淘寶和天貓cookie的傳遞猜惋,應該也是利用jsonp來進行的,如下圖:
打開淘寶首頁培愁,回向天貓發(fā)送一個請求著摔。
說白了,這個jsonp 的cookie跨域和我們平時用的jsonp跨域是一樣的定续,關于jsonp跨域谍咆,請看 瀏覽器跨域解決方案
jsonp會通過回調函數(shù)來處理服務器端返回的數(shù)據(jù),因為返回的可以執(zhí)行的js代碼(也就是重寫cookie的path和域)私股,然后自動執(zhí)行返回的js代碼摹察,從而達到目的。
localstorage跨域
使用postMessage和iframe
假設有a.haorooms.com/text.html和b.haorooms.com/text.html兩個頁面倡鲸。
通過a.haorooms.com/text.html頁面去修改b.haorooms.com/text.html頁面的本地數(shù)據(jù):
- 在a.haorooms.com/text.html頁面創(chuàng)建一個iframe供嚎,嵌入b.haorooms.com/text.html頁面。
- a.haorooms.com/text.html頁面通過postMessage傳遞指定格式的消息給b.haorooms.com/text.html頁面旦签。
- b.haorooms.com/text.html頁面解析a.haorooms.com/text.html頁面?zhèn)鬟f過來的消息內容查坪,調用localStorage API 操作本地數(shù)據(jù)。
- b.haorooms.com/text.html頁面包裝localStorage的操作結果宁炫,并通過postMessage傳遞給a.haorooms.com/text.html頁面偿曙。
- a.haorooms.com/text.html頁面解析b.haorooms.com/text.html頁面?zhèn)鬟f回來的消息內容,得到 localStorage 的操作結果羔巢。