示例说明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. 微信支付商户申请接入流程
微信支付，是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案，包括多种支付方式，如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
3. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料，包含：房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书（由于我们公司其中一区域已有注册另外一公司，所以必须需要承诺书）
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》，国家对非经营性互联网信息服务实行备案制度，对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似，同时微信小程序支持通过已认证的微信公众号进行注册申请，无需进行单独认证即可使用，同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情
