localstorage和cookie的跨域解決方案

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來進行的,如下圖:

image.png

打開淘寶首頁培愁,回向天貓發(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ù):

  1. 在a.haorooms.com/text.html頁面創(chuàng)建一個iframe供嚎,嵌入b.haorooms.com/text.html頁面。
  2. a.haorooms.com/text.html頁面通過postMessage傳遞指定格式的消息給b.haorooms.com/text.html頁面旦签。
  3. b.haorooms.com/text.html頁面解析a.haorooms.com/text.html頁面?zhèn)鬟f過來的消息內容查坪,調用localStorage API 操作本地數(shù)據(jù)。
  4. b.haorooms.com/text.html頁面包裝localStorage的操作結果宁炫,并通過postMessage傳遞給a.haorooms.com/text.html頁面偿曙。
  5. a.haorooms.com/text.html頁面解析b.haorooms.com/text.html頁面?zhèn)鬟f回來的消息內容,得到 localStorage 的操作結果羔巢。

原文鏈接

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末望忆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子竿秆,更是在濱河造成了極大的恐慌启摄,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幽钢,死亡現(xiàn)場離奇詭異歉备,居然都是意外死亡,警方通過查閱死者的電腦和手機匪燕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門蕾羊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人帽驯,你說我怎么就攤上這事龟再。” “怎么了尼变?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵利凑,是天一觀的道長。 經(jīng)常有香客問我,道長哀澈,這世上最難降的妖魔是什么牌借? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮割按,結果婚禮上走哺,老公的妹妹穿的比我還像新娘。我一直安慰自己哲虾,他們只是感情好丙躏,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著束凑,像睡著了一般晒旅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上汪诉,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天废恋,我揣著相機與錄音,去河邊找鬼扒寄。 笑死鱼鼓,一個胖子當著我的面吹牛,可吹牛的內容都是我干的该编。 我是一名探鬼主播迄本,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼课竣!你這毒婦竟也來了嘉赎?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤于樟,失蹤者是張志新(化名)和其女友劉穎公条,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體迂曲,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡靶橱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了路捧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片关霸。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鬓长,靈堂內的尸體忽然破棺而出谒拴,到底是詐尸還是另有隱情尝江,我是刑警寧澤涉波,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響啤覆,放射性物質發(fā)生泄漏苍日。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一窗声、第九天 我趴在偏房一處隱蔽的房頂上張望相恃。 院中可真熱鬧,春花似錦笨觅、人聲如沸拦耐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杀糯。三九已至,卻和暖如春苍苞,著一層夾襖步出監(jiān)牢的瞬間固翰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工羹呵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留骂际,地道東北人。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓冈欢,卻偏偏與公主長得像歉铝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凑耻,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內容

  • 什么是跨域犯戏?跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這里跨域是廣義的拳话。 廣義的跨域: 資源跳轉: ...
    薛定諤的盯襠貓閱讀 1,278評論 1 38
  • 什么是跨域先匪? 轉載的安靜de沉淀老板整理的跨域文章原文地址 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源...
    蘭溪暮雨閱讀 291評論 0 2
  • <轉>詳解跨域(最全的解決方案) 什么是跨域跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本弃衍。它是由瀏覽器的同源策略造成的呀非,...
    涅槃快樂是金閱讀 4,743評論 0 3
  • 什么是跨域 跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本镜盯。它是由瀏覽器的同源策略造成的岸裙,是瀏覽器對JavaScript實...
    他方l閱讀 1,064評論 0 2
  • 什么是跨域 跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本速缆。它是由瀏覽器的同源策略造成的降允,是瀏覽器對JavaScript實...
    Yaoxue9閱讀 1,299評論 0 6