如何獲取Cookie?

目錄

Server

Startup

egg-init --type=simple read-cookie-server

cd read-cookie-server && cnpm i

cnpm run dev # localhost:7001
  • 測(cè)試
curl localhost:7001 # hi, egg

Router

vim app/router.js
'use strict';

module.exports = app => {
    const { router, controller } = app;
    router.get('/', controller.home.index);
    router.post('/login', controller.auth.login);
};

Controller

vim app/controller/auth.js
'use strict';

const Controller = require('egg').Controller;

class AuthController extends Controller {
    async login() {
        const ctx = this.ctx;
        ctx.session.user = 1;
        ctx.body = { message: 'success' };
        ctx.status = 200;
    }
}

module.exports = AuthController;
vim config/config.default.js
// 省略了未修改的代碼
    config.session = {
        httpOnly: true,
        encrypt: false,
    };

    config.security = {
        csrf: {
            enable: false,
        },
    };
// 省略了未修改的代碼
  • 測(cè)試
curl -X POST localhost:7001/login # {"message":"success"}

CORS

cnpm i --save egg-cors
vim config/plugin.js
'use strict';

exports.cors = {
    enable: true,
    package: 'egg-cors',
};
vim config/config.default.js
// 省略了未修改的代碼
    config.cors = {
        credentials: true,
        origin: 'http://localhost:8080',
        allowMethods: 'HEAD,OPTIONS,GET,PUT,POST,DELETE,PATCH',
    };
// 省略了未修改的代碼

關(guān)于egg.js更多參考Egg.js實(shí)戰(zhàn)

Client

Startup

vue create read-cookie-client

cd read-cookie-client && yarn serve

View

vim src/App.vue
<template>
    <div id="app">
        <div>
            <button v-on:click="login">登錄</button>
            <a>{{message}}</a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            message: '',
        }
    },
    methods: {
        login() {
            fetch('http://localhost:7001/login', { method: 'POST', credentials: 'include' })
                .then(res => {
                    return res.json();
                }).then(json => {
                    this.message = json;
                }).catch(error => {
                    this.message = error;
                });
        },
    }
}
</script>

<style>
</style>
  • 測(cè)試

使用瀏覽器打開(kāi)http://localhost:8080

方法1

我們知道: 瀏覽器cookie是通過(guò)response的set-cookie header實(shí)現(xiàn)的 效果如下

how-to-get-cookie-01.png

那么是否可以通過(guò)fetch api的response獲取到cookie呢 代碼如下

vim src/App.vue
// 省略了未修改的代碼
    methods: {
        login() {
            fetch('http://localhost:7001/login', { method: 'POST', credentials: 'include' })
                .then(res => {
                    console.log(res.headers.get('content-type'));
                    console.log(res.headers.get('set-cookie'));
                    return res.json();
                }).then(json => {
                    this.message = json;
                }).catch(error => {
                    this.message = error;
                });
        },
    }
// 省略了未修改的代碼

點(diǎn)擊登錄按鈕后 瀏覽器console打印結(jié)果如下

how-to-get-cookie-02.png

為什么fetch api無(wú)法獲取reponse的set-cookie header呢 解釋如下

更多參考Set-Cookie Response header not in response.headers

因此我們知道

方法1: 通過(guò)fetch api response獲取cookie不可行!

方法2

我們知道: 如果cookie的HttpOnly屬性設(shè)置為false 那么就可以通過(guò)document.cookie獲取到cookie

vim src/App.vue
<template>
    <div id="app">
        <div>
            <button v-on:click="login">登錄</button>
            <a>{{message}}</a>
        </div>
        <div>
            <button v-on:click="getCookie">獲取cookie</button>
            <a>{{cookie}}</a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            message: '',
            cookie: '',
        }
    },
    methods: {
        login() {
            fetch('http://localhost:7001/login', { method: 'POST', credentials: 'include' })
                .then(res => {
                    console.log(res.headers.get('content-type'));
                    console.log(res.headers.get('set-cookie'));
                    return res.json();
                }).then(json => {
                    this.message = json;
                }).catch(error => {
                    this.message = error;
                });
        },
        getCookie() {
            this.cookie = document.cookie ? document.cookie : '獲取失敗';
        },
    }
}
</script>

<style>
</style>
  • 測(cè)試

使用瀏覽器打開(kāi)http://localhost:8080

點(diǎn)擊"登錄"后點(diǎn)擊"獲取cookie" 結(jié)果"獲取失敗" 效果如下

how-to-get-cookie-03.png

此時(shí) 修改Server代碼將HttpOnly設(shè)置為false 代碼如下

vim config/config.default.js
// 省略了未修改的代碼
    config.session = {
        httpOnly: false,
        encrypt: false,
    };
// 省略了未修改的代碼
  • 測(cè)試

使用瀏覽器打開(kāi)http://localhost:8080

點(diǎn)擊"登錄"后點(diǎn)擊"獲取cookie"到cookie 效果如下

how-to-get-cookie-04.png

但是此時(shí)有面臨XSS攻擊的危害 因此

方法2: 通過(guò)將cookie的HttpOnly屬性設(shè)置為false獲取cookie不可行!

小結(jié)

關(guān)于cookie操作涉及三個(gè)主體

Javascript App <-> Browser <-> Server

安全的cookie設(shè)計(jì) 基于Browser和Server而非Javascript

這也正是上述兩種方法都無(wú)法獲取cookie的原因

參考

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末媳搪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子楔敌,更是在濱河造成了極大的恐慌蜈漓,老刑警劉巖搁料,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凉驻,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡艳丛,警方通過(guò)查閱死者的電腦和手機(jī)匣掸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)氮双,“玉大人碰酝,你說(shuō)我怎么就攤上這事〈鞑睿” “怎么了送爸?”我有些...
    開(kāi)封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)暖释。 經(jīng)常有香客問(wèn)我袭厂,道長(zhǎng),這世上最難降的妖魔是什么球匕? 我笑而不...
    開(kāi)封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任纹磺,我火速辦了婚禮,結(jié)果婚禮上亮曹,老公的妹妹穿的比我還像新娘橄杨。我一直安慰自己秘症,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布讥珍。 她就那樣靜靜地躺著历极,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衷佃。 梳的紋絲不亂的頭發(fā)上趟卸,一...
    開(kāi)封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音氏义,去河邊找鬼锄列。 笑死,一個(gè)胖子當(dāng)著我的面吹牛惯悠,可吹牛的內(nèi)容都是我干的邻邮。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼克婶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼筒严!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起情萤,我...
    開(kāi)封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鸭蛙,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后筋岛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娶视,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年睁宰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了肪获。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡柒傻,死狀恐怖孝赫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情红符,我是刑警寧澤寒锚,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站违孝,受9級(jí)特大地震影響刹前,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜雌桑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一喇喉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧校坑,春花似錦拣技、人聲如沸千诬。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)徐绑。三九已至,卻和暖如春莫辨,著一層夾襖步出監(jiān)牢的瞬間傲茄,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工沮榜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盘榨,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓蟆融,卻偏偏與公主長(zhǎng)得像草巡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子型酥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理山憨,服務(wù)發(fā)現(xiàn),斷路器弥喉,智...
    卡卡羅2017閱讀 134,720評(píng)論 18 139
  • WKWebView Cookie NSURLCache和NSHTTPCookieStroage無(wú)法操作(WKWeb...
    vicool閱讀 3,981評(píng)論 0 1
  • 本文介紹通過(guò)chrome瀏覽器獲取登錄扣扣群論壇用的cookie的方法郁竟。先進(jìn)入騰訊首頁(yè)。單擊右上角登錄按鈕档桃。登錄后...
    斷橋殘雪1779147閱讀 3,551評(píng)論 0 0
  • 周五又是讀書日,而這周我又開(kāi)始了出門授課憔晒,四點(diǎn)半才從學(xué)校下課藻肄。 今天還下起了雨,周五晚堵車+下雨+上完課很疲憊+時(shí)...
    百合手工閱讀 144評(píng)論 0 0
  • 花開(kāi)萬(wàn)朵一支鮮拒担。 蕊半看嘹屯,滿心酸。 國(guó)香添色幾人奸从撼。 魏姚爭(zhēng)州弟,種牡丹。 攬君穿越大唐前低零。 甕滿貫婆翔,曌空懸。 立碑無(wú)...
    竹蘭答水閱讀 205評(píng)論 0 0