糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

示例说明cookie中设置httpOnly的作用

示例说明cookie中设置httpOnly的作用

原创 新闻资讯

于 2023-10-26 10:11:31 发布

17832 浏览

经常看到一些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. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情