浏览器"同源策略"：
ajax跨域限制、iframe跨域限制、 LocalStorage跨域限制、Cookie跨域限制、

W3C标准的浏览器：运行在不同域的JavaScript无法读写其他域的cookie和localstorage

cookie作用
保存信息、验证

用户追踪：cookie与session

因为HTTP协议无状态，所以使用cookie和session来跟踪浏览器用户身份的会话方式，但是位置不同：
cookie数据存放在客户的浏览器上，session数据放在服务器上 ，是一个容器，可以存放会话过程中的任何对象。其创建与使用总是在服务端，浏览器从来都没有得到过session对象。

安全应当使用session ：别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
减轻服务器负担：应当使用COOKIE ；

新开的浏览器窗口会生成新的Session，但子窗口除外。子窗口会共用父窗口的Session。例如，在链接上右击，在弹出的快捷菜单中选择“在新窗口中打开”时，子窗口便可以访问父窗口的Session。
同一个浏览器窗口的不同页面输出window.sessionStorage

使用session机制的时候也需要cookie的帮助保存session_id
如果客户端浏览器将Cookie功能禁用，或者不支持Cookie怎么办？绝大多数的手机浏览器都不支持Cookie。
Java Web提供了另一种解决方案：URL地址重写。
在URL参数的前面添加了字符串“jsessionid=XXX”。其中XXX为Session的id。分析一下可以知道，增添的jsessionid字符串既不会影响请求的文件名，也不会影响提交的地址栏参数。用户单击这个链接的时候会把Session的id通过URL提交到服务器上，服务器通过解析URL地址获得Session的id。

身份验证：cookie、token

cookie

C输入登陆凭据
S验证凭据
S创建会话，然后把会话数据存储在数据库中
S返回保存会话id的cookie给用户浏览器
后续请求中，S会根据数据库验证会话id
一旦用户登出，C和S销毁该会话。

token 也称作令牌，由uid+time+sign[+固定参数]
token 的认证方式类似于临时的证书签名, 并且是一种服务端无状态的认证方式, 非常适合于 REST API 的场景. 所谓无状态就是服务端并不会保存身份认证相关的数据。

C输入登陆凭据
S验证凭据
S返回一个经过签名的token
C负责存储token
后续的请求需要携带token；
S对JWT进行解码，如果token有效，则处理该请求；
一旦用户登出，C销毁token。

实现token有很多方法， JSON Web Tokens（JWT）是一种较为认可的标准.。
JWT是JSON Web Token，为JSON对象， 用于将各方之间的信息安全地传输。
尺寸小，JWT可以通过URL，POST参数或者HTTP头发送。
自包含：token中包含了用户的所有必须信息，避免了多次查询数据库

云信SDK的身份验证实现，就是登录之后返回Token

token的优势

后端服务不需要记录token，而是验证传入的token是否有效，以及在成功的登陆请求上签署token
而且相比查找数据库，计算更快，提升了性能

Token最好保存在SessionStorage而不是localstorage中，之后每次页面加载时，使用JS遍历整个DOM树，向DOM中所有的a和form标签后加入Token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的HTML代码，还需要程序员在编码时手动添加Token。
一般也不会放在 Cookie 里自动发送，更好的做法是放在 HTTP Header 的 Authorization字段中：Authorization: Token

相对cookie来说,基于token的验证的优点：
多站点使用
cookie绑定到单个域，foo.com域产生的cookie无法被bar.com域读取。不同窗口/tab 同一域操作的 cookies 是同一个。

支持移动平台
在移动平台上，cookie是不被支持的。

token可以抵抗csrf，cookie+session不行
token是开发者为了防范csrf而特别设计的令牌，浏览器不会自动添加到headers里，攻击者也无法访问用户的token 。

CSFR攻击

CSRF（Cross-site request forgery）跨站请求伪造

受害者登录a.com，并保留了登录凭证（Cookie）。
攻击者引诱受害者访问了b.com。
b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie。
a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
a.com以受害者的名义执行了act=xx。
攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”
CSRF通常是跨域的，因为外域通常更容易被攻击者掌控。所以本域下要注意不能有容易被利用的功能，比如可以发图和链接的论坛和评论区，攻击可以直接在本域下进行，更加危险。
CSRF攻击者不能获取到Cookie等信息，只是使用

其他解决方法在客户端页面增加伪随机数可以阻挡csrf？
防护
同源检测
CSRF Token
双重Cookie验证

验证referer
在 HTTP 头中有一个字段， Referer记录HTTP 请求的来源地址。
服务器可以验证客户端的请求来源，如果本网站请求的则响应，否则不响应。
存在安全隐患
一些浏览器， IE6、 FF2有一些方法可以篡改 Referer 值
用户自己可以设置浏览器使其在发送请求时不再提供 Referer

cookie的SameSite属性
Chrome 51 开始，浏览器的 Cookie 新增，用来防止 CSRF 攻击和用户追踪。
有三个值

Strict：完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
Lax：大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外
None

Set-Cookie: flavor=choco; SameSite=None; Secure

xss与csrf区别

通常来说 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还可以是直接通过命令行发起请求等）。
本质上讲，XSS 是代码注入问题，CSRF 是 HTTP 问题。XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面。

XSS攻击

cookie的HttpOnly属性
cookie中可以设置HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。

前端缓存

cookie

JavaScript通过 Document.cookie 属性可创建新的 Cookie，也可通过该属性访问非HttpOnly标记的Cookie。

allCookies = document.cookie; // 读取
document.cookie = newCookie; //写 ：newCookie是一个键值对形式的字符串。需要注意的是，用这个方法一次只能对一个cookie进行设置或更新。
cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值)

cookie的删除和新建是通过expires来控制的，使用前可以定义一个库来包装它的增删查改
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

在客户端存储会话信息，这个规范要求服务器在响应HTTP请求会通过发送Set-Cookie HTTP头部包含会话信息。
构成

当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项，将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

S返回：
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

C再次发起请求：
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

  1. storedId cookie的id
  2. name名称：不区分大小写，唯一标识
  3. Path ：指定了主机下的哪些路径可以接受 Cookie（该 URL 路径必须存在于请求 URL 中）。以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。
  4. value值，必须经过URL编码
  5. path域：发往这些域
  6. domain路径：指定了哪些主机可以接受 Cookie。如果不指定，默认为 origin，不包含子域名。如果指定了Domain，则一般包含子域名。因此，指定 Domain 比省略它的限制要少。如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）
  7. expires过期时间
  8. 安全标志(非必需）
  9. session：是否是session cookie
  10. HttpOnly ：防止通过 JavaScript 访问 cookie 值，JavaScript 可以通过跨站脚本攻击（XSS）的方式来窃取 Cookie。
  11. SameSite
document.cookie返回上述字符串document.cookie=endodeURIComponent(name)+"="+endodeURIComponent(value);CookieUtil.get("名称“);

子cookie

发送回服务器
绕过浏览器对每个域cookie数的限制，提出了子cookie的概念，在单个cookie存储的小块数据，本质上是使用cookie的值在单个cookie中存储多个名值对

name=name1=value1&name2=value2&name3=value3

实际开发中注意大小，不要超过对单个cookie的限制
操作子cookie需要添加辅助方法，解析和序列化子cookie串
cookie数据不是保存在安全的环境中，不要存储敏感重要信息

数据存储

web Storage
浏览器提供的存储API
Web SQL Database

注意这些方法都不会加密数据，如果有这方面考虑应该先加密，e.g:MD5加密

web Storage(同步）

关注一下storage改变事件

webstorage是本地存储，存储在客户端，HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装

客户端数据的大小限制是按照源（协议，端口、域）来设置的，通过客户端存储不需要频繁发送回服务器的数据。一般5MB
同步阻塞写入数据。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的key和length属性实现遍历
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。被存储的键值对总是以UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。

应用场景：
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登

storage类型：
基类，只能存储字符串

sessionStorage

数据保存在session对象，不适用于跨会话持久存储。只存储会话数据（即存储到浏览器关闭），不受页面刷新影响，可以在浏览器崩溃并重启后恢复。

页面中一般的js对象的生存期仅在当前页面有效，刷新页面、转到另一页面等重新加载页面的情况，数据消失；sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在

sessionStorage 属性允许你访问一个，对应当前源（包括特定协议）的 session Storage 对象。同源的页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

存储在sessionStorage或localStorage中的数据特定于页面的协议。也就是说http://example.com 与 https://example.com的sessionStorage相互隔离。

会话： 输入账户密码进入系统——退出系统，TCP 的三次握手也创建了一次会话，TCP 四次挥手关闭连接则关闭了会话。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。所以通过浏览器右键新开的tab不能访问原页面的，见图：

cookies 的运作方式不是复制，不同窗口/tab 同一域操作的 cookies 是同一个。

关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

后面收到一个博主的回复，得知
浏览器版本更新导致了上述方案失效，更新修稿了a属性的rel默认属性为"noopener"，而noopener是不会复制sessionStorage的

// rel 属性用于指定当前文档与被链接文档的关系
<a rel="opener" target='_blank' href='file:///C:/Users/Administrator/Desktop/%E7%AB%96%E6%8E%92.html'>打开</a>

localStorage

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

本地html文件共享localStorage,访问百度页面并不会共享本地的localStorage

localStorage 属性是只读的。
在客户端持久存储数据的机制，数据保存在客户端本地的硬件设备，会保留到通过JavaScript删除或者用户清除浏览器缓存。

相同浏览器的多个同源页面间可以共享相同的 localStorage。localStorage和cookie在所有同源窗口中都是共享的

var userData = {name : 'Lucy',age: 18}localStorage.setItem('userDate', JSON.stringify(userData));var newUserData = JSON.parse(localStorage.getItem('userData'));

应用：
离线应用：web应用可在没有网络时候访问，对应可以开发离线应用

web storage事件处理程序

利用storage事件实时监控web storage 中的数据

window.addEventListener('storage',function (event) {}

在事件处理函数中，触发事件的事件对象（event参数值）具有如下几个属性
event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。
event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。
event.newValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改后的值
event.url 属性：属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象

IndexDB数据库(异步)

在浏览器的开发者选项中的resources选项卡中可以查看

与页面源绑定，不管用户链接状态如何都可以访问
浏览器中存储结构化数据的一个方案，类似My SQL的数据库，区别在使用对象存储而不是表格
事务型对象存储数据库
按照事务分组
Window. indexedDB.open（）;//返回请求而非数据库连接
版本化，修改则添加新版本
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

对象存储

let db,request,version=1;
//存在则打开，不存在就创建
request =indexedDB.open("admin",version);
request.onerror=(event)=>alert（‘Failed to open:${event.target.errorCode}');
request.onsuccess=(event)=>{
//获取数据库对象db=event.target.result;
};
//对象记录,存入DB中需要指定一个键keyPath
let user={username:"001",firstname:"ja",password:"fff"
};
//DB数据库有一个对象存储属性objectStore属性后面都有用到
if(db.objectStoreNames.contains("users")){db.deleteObjectStore("users");
}else{db.createObjectStore("users",{keyPath:"usernames"});
}

拿到DB的对象存储后，可以add、put写入数据

let request,requests=[];
for(let user of  users){
//store=db.objectStore("users");request=store.add(user);request.onerror=(event)=>{//};request.oncomplete=(event)=>{//};requests.push(request);
]

事务

读取和修改数据都是通过事务操作
事务对象本身也有事件处理程序onerror和oncomplete获取事务的错误、成功状态

let transaction=db.transaction("users"，”访问读写模式“);
//不指定对象时，默认所有对象；也可以传入对象数组；不指定访问读写模式，默认只读
transaction.onerror=(event)=>{//
}
transaction.oncomplete=(event)=>{//
}

事务transaction实现增删查改

// new 一个blob对象
var obj1 = {hello: "world"};
var blob = new Blob([JSON.stringify(obj1, null, 2)], {type : 'application/json'});function add() {var request = db.transaction(['imgLists'],  'readwrite').objectStore('imgLists').add({ id: 1, name: '图片1', path: '/static/image', blob:  blob});request.onsuccess = function (event) {console.log('数据写入成功');};request.onerror = function (event) {console.log('数据写入失败');}
}

获取记录

通过已知键取得一条记录，如果想取得多条数据，在事务中创建游标，一个指向结果集的指针。
可以传入两个参数：键范围和方向
null//所有对象
next、prev
nextunique、prevunique

const transaction=db.transaction("users"，”访问读写模式");
store=transaction.objectStore("users");request=store.openCursor();//request.onerror=(event)=>{//};request.onsuccess=(event)=>{//const cursor=event.target.result;if(cursor){//检查console.log(`Key:${cursor.key},Value:${JSON.stringify(cursor.value)}`);cursor.continue();}else{console.log("done");}};

键范围

const onlyRange=IDBKeyRange.only("007");
const lowerRange=IDBKeyRange.lowerBound("007");//007后面的
const upperRange=IDBKeyRange.upperBound("007");//007前面的
const boundRange=IDBKeyRange.bound("007","ace");//007-"ace"，
const boundRange=IDBKeyRange.bound("007","ace",true,true);//007的下一条-"ace"的前一条，

索引
除了主键之外的其他特定属性作为索引

有关cookie：验证_token、CSRF攻击、保存信息_cookie与本地存储、indexDB、相关推荐

  1. SameSite Cookie，防止 CSRF 攻击

    因为 HTTP 协议是无状态的,所以很久以前的网站是没有登录这个概念的,直到网景发明 cookie 以后,网站才开始利用 cookie 记录用户的登录状态.cookie 是个好东西,但它很不安全,其中 ...

  2. JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)

    文章目录 BOM简介 定时器-延时函数 5秒关闭广告案例 递归模拟setInterval函数 两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...

  3. 学生信息表（本地存储）

    html部分 <h1>新增学员</h1><form class="info" autocomplete="off">姓名:& ...

  4. 前端安全系列（二）：如何防止CSRF攻击？

    背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...

  5. 「安全系列之CSRF」如何防范csrf攻击

    背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...

  6. 前端安全系列：如何防止CSRF攻击？

    背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...

  7. 使用ASP.NET Core、JavaScript和Angular防止CSRF攻击

    目录 介绍 关于源代码 CSRF示例 攻击剖析 保护您的Web应用程序 CSRF攻击实战 防伪令牌 ASP.NET Core中的防伪 令牌生成:手动方式 令牌生成:自动方式 令牌验证 JavaScri ...

  8. CSRF攻击原理和防护措施讲解

    CSRF攻击原理讲解 CSRF(Cross Site Request Forger)跨站请求伪造 CSRF是如何攻击的 这样的,比如你在 http://wwww.aaa.com 网站里面, 你现在登录 ...

  9. Android_WebView加载网页保存信息到Cookie

    WebView加载网页保存信息到Cookie     一．知识点     1．WebView加载INTERNET网页        2．Android Activity和网页jsp之间传递参数     ...

最新文章

  1. Windows 技术篇 - 远程桌面连接不保存密码、每次都要输入密码问题解决
  2. 过滤某一个时间段的日志----sed
  3. DataScience：数据可视化的简介(意义+六大优势)、使用工具之详细攻略
  4. 写给MongoDB开发者的50条建议Tip14
  5. java并发：线程同步机制之计数器Exechanger
  6. Permission denied (publickey) 解决方案
  7. 用户、角色、权限表的设计(mysql)
  8. python函数递归调用时对深度没有限制_在Python程序中设置函数最大递归深度
  9. aac蓝牙编解码协议_蓝牙协议总结
  10. 计算机毕业设计JAVA微美试营销系统mybatis+源码+调试部署+系统+数据库+lw
  11. 邮箱总是被垃圾邮件轰炸？来试试这个临时邮箱生成器吧！
  12. mysql中key的用法_数据库中KEY的用法
  13. 演绎、归纳与前言结构——Leo鉴书83
  14. python转换js_python转换Javascript
  15. 【2021最后一波官方福利】七天玩转Redis | 打卡还能领周边活动开始啦
  16. 如何设置阿里云Web应用攻击防护？
  17. 天天炫斗服务器维修,【天天炫斗】弱网处理及断线重连方案
  18. 揭密巴西Banrisul银行网站遭遇5小时劫持的原因
  19. 现在, Delphi 的多线程已经非常易用了!
  20. 怎么去理解JAVA中类与对象的关系

热门文章

  1. Java开发实战项目分享
  2. c语言人脸口罩检测,使用ModelArts 0代码实现人脸口罩检测
  3. 详解双向链表的基本操作(C语言)
  4. 【数据结构】双向链表
  5. 【开源计划预告】医学图像非刚性配准实践项目开源计划（5-5更新）
  6. 常见设计模式代码加类图
  7. 【android】实现图片的三级缓存。工具类
  8. 【算法篇-字符串匹配算法】BF算法和KMP算法
  9. Java微信服务号的开发(简单入门)
  10. 李宏毅机器学习-代码实践