示例说明cookie中设置httpOnly的作用
经常看到一些cookie设置了httpOnly,设置了httpOnly的cookie可以限制客户端JavaScript操作该cookie。本次通过一个简单的例子来说明一下。
index.html:
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <title>test</title> <style> </style> <script> function test1() { const options = { method: 'GET' } const url = 'http://localhost:3000/getInfo' fetch(url, options).then(res => { return res.text() }).then(res => { console.log(res) console.log('cookie:', document.cookie) }) } function test2() { document.cookie = 'user3=user3val' document.cookie = 'user1=user1valalter' document.cookie = 'user4=user4val;httpOnly=true' document.cookie = 'user2=user2valalter' } </script> </head> <body> <div> <button onclick="test1(1)">测试1</button> <button onclick="test2()">测试2</button> </div> </body> </html>
index.js:
var express = require('express'); var fs = require('fs'); var app = express(); app.get('/', function(req, res) { res.cookie('user1', 'user1val', { httpOnly: true }) res.cookie('user2', 'user2val') fs.readFile(__dirname + '/test.html', 'utf8', function(err, text){ res.send(text); }) }); app.get('/getInfo', function(req, res) { console.log(req.cookies) // undefined res.send('ok1') }); app.listen(3000);
执行了node index.js开启了一个node server,在浏览器中输入http://localhost:3000/可以看到index.html的页面(本次使用的是chrome测试),此时在服务器端设置了2个cookie:
res.cookie('user1', 'user1val', { httpOnly: true }) res.cookie('user2', 'user2val')
cookie为:user1=user1val和user2=user2val
点击”测试1”按钮,发送的/getInfo请求中带有设置的user1和user2的cookie:
浏览器控制台中显示当前document.cookie值为:
cookie: user2=user2val
设置了httpOnly: true的user1 cookie document.cookie访问不到,看一下浏览器应用里面的cookie信息:
user1是 httpOnly的。
再点击 ”测试2”按钮通过document.cookie来设置cookie,然后点击”测试1”按钮,可以看到发送的/getInfo请求中带有设置的user1和user2和user3的cookie:
浏览器控制台中显示当前document.cookie值为:
cookie: user3=user3val; user2=user2valalter
此时浏览器应用里面的cookie信息为:
通过document.cookie不能操作httpOnly的cookie,可以获取和修改非httpOnly的cookie。
在express中如果想要通过req.cookies获取cookie,需要 npm install cookie-parser 并且在代码中 require('cookie-parser'):
var express = require('express'); var fs = require('fs'); const cookieParser = require('cookie-parser'); var app = express(); app.use(cookieParser()) app.get('/', function(req, res) { res.cookie('user1', 'user1val', { httpOnly: true }) res.cookie('user2', 'user2val') fs.readFile(__dirname + '/test.html', 'utf8', function(err, text){ res.send(text); }) }); app.get('/getInfo', function(req, res) { console.log(req.cookies) res.send('ok') }); app.listen(3000);
这样收到浏览器端发送的/getInfo请求后,会在node端控制台上输出cookies信息:
以上通过一个简单示例说明了cookie中设置httpOnly的常规作用~
cookie
httpOnly
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情