Javascript

JS之cookie

本文主要是介绍JS之cookie,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前端和后端

前端是展示内容的部分
后端是提供数据支持的部分

 

 

 网络构成图

 

 

 

网络构成分为七层 最底层的物理层 数据链路层(底层维护 需要硬件支持),网络层(基于网络协议白
皮书书写网络协议),传输层(网络传输的支持 tcp(直连)和udp(丢包)) 应用层相关协议(对应
应用支持的协议 http网络传输协议 ftp文件传输协议 SNMP邮件传输协议)

http和https

http,https 都是网络传输协议 是用于网络相关传输,http走的是明文传输,https走的密文传输(内部
采用对称加密以及非对称加密)。对应的https安全性要高于http。https采用加密的原因是底
层采用了openSSL。(open表示开源)

http的特性

  • 无状态 (服务器不知道是谁访问的我)
  • 无连接 (不会建立完整的连接 访问一过去 数据一返回连接就断了)
  • 长连接 (连接可以建立长时间)
  • 短连接(连接对应的内容很短)

 

问题
由于http是无状态的!那么对应的我们在实现某些功能的时候就会出现对应的问题.比如a用户登录了 b
用户也登录了,a用户可能拿到b用户的页面,b用户可以拿到a用户的页面。这个时候我们就出现问题
了。

问题的解决
根据上面的问题我们可以得出对应的a可能会拿到b的内容,原因是因为对应的服务器无法区分a和b,
如果我在a的访问的时候给一个唯一的标识,在b的访问的时候给一个唯一的标识,那么我是否可以区分
a和b。所以对应的解决方案就是a和b拥有不一样的标识,而这个标识是在建立连接的时候。这个标识
叫做sessionId。也就意味这个每个请求去建立连接都会获得一个sessionId。(sessionID服务端给
的)。如果对应的sessionID是存储于服务端的话,那么服务端就会越来越大从影响对应的效率,所以
我们诞生了一个内容来保存这个值到对应浏览器端,这个东西就是cookie。所以cookie的诞生就是为了
保存sessionID,从而解决http无状态的问题。

 cookie

Cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件,它可以包含相关用户的信息。无

论何时用户链接到服务器,Web站点都可以访问Cookie信息 。

  • cookie存在于浏览器端
  • cookie为了保存sessionID出现的
  • cookie的出现解决了http无状态的问题

cookie的特点

  • 禁用Cookie后,无法正常注册登陆。
  • cookie是与浏览器相关的,不同浏览器之间所保存的cookie也是不能互相访问的;

 

  • cookie可以被删除。因为每个cookie都是硬盘上的一个文件;

 

  • cookie安全性不够高-xss攻击
  • cookie是不安全的

  • cookie是可以被篡改和伪造的

  • cookie他是以字符串存储的(单一),有很多的数据类型是不支持的(二进制图片,二进制的视频,base64码的视频等等)

  • cookie他的大小不能超过4kb(大小只有4kb 容量小)

  • cookie会随请求发送

  • cookie可以跨域(domain来设置)

xss攻击

XSS(Cross Site Script)攻击全称跨站脚本攻击,XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧

妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是

JavaScript。

实施XSS攻击需要具备两个条件:

1.需要向web页面注入恶意代码;

2.这些恶意代码能够被浏览器成功的执行。

php解决方法

strip_tags:剥去字符串中的 HTML 标签:

总结:输入过滤、输出转义(编码)。

cookie的访问

//document.cookie
console.log(document.cookie)

cookie的完整格式

name=value;[expires=date];[path=路径];[domain=域名];[secure]

name和value可以随便命名(存的key和value)

document.cookie = 'username=jack'

expires 过期时间设置 (如果没有设置 跟sessionID的过期时间一致 连接一断自动删除)

var date = new Date(2022,7,9,16,20)
document.cookie = 'username=jack;expires='+date

path 只有是这个路径以下的url才携带这个cookie

document.cookie = 'username=jack;expires='+date+';path=http://www.baidu.com'

domain 跨域设置在这个域名下实现了跨域的功能

document.cookie =
'
username=jack;expires='+date+';path=http://www.baidu.com;domain=www.baidu.com'

secure 安全 只有当前访问协议是https的时候才会携带

document.cookie =
'
username=jack;expires='+date+';path=http://www.baidu.com;domain=www.baidu.com;s
ecure
'

cookie的相关操作(增删改查的功能)

Cookie以字符串的形式进行存储的。Key值相同,存储时就会覆盖。

Cookie名称和值可以自己定义,存储的是字符串。不能超过4KB

如果cookie不存在,输出undefined.

添加cookie

document.cookie=‘key = value ; expires=过期时间’;

获取cookie

document.cookie

删除cookie

将cookie的过期时间设为一个过去的时间。

通过控制面板--application--左侧cookie查看浏览器存储的cookie

name:自定义的键值

value:键对应的值

domain:主机(主域名)

path:路径

expires:过期时间

size: cookie的大小, 不能超过4k

httpOnly:跟后端关系比较密切,如果后端设置httpOnly, js代码无法获取,参数为布尔值。

secure:安全,跟http/https设置有关。

samesite:防止CSRF攻击和用户追踪,chrome 51新加的属性。

encodeURIComponent 转码

console.log(encodeURIComponent('{abdejde152}'));

decodeURIComponent 解码

var str = encodeURIComponent('{abdejde152}') //进行编码
console.log(decodeURIComponent(str));//解码

 

这篇关于JS之cookie的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!