关于IndexedDB

前言

大家应该都遇到过需要在浏览器中存储数据的情况吧，我们常用的就是cookie、localStorage、sessionStorage，这些方法一般来说能够满足我们的日常开发使用。但是，不知道大家有没有遇到过需要存储大量的数据的情况，这时候，前面提到的这些方法可能就满足不了我们的要求，这时候IndexedDB或许可以成为一个不错的选择。

什么是IndexedDB？

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。

1. 前言

CSS（层叠样式表）是用于描述 HTML 或 XML 文档外观的样式表语言。随着 Web 技术的不断发展，CSS 也引入了许多新的特性和方法，使得开发者能够更灵活地控制页面的样式和布局。本文将介绍一些现代 CSS 中常用的方法和属性，帮助开发者更好地理解和应用这些特性。

2. CSS 一些特性介绍

steps()

说明:
steps() 是一个用于 animation-timing-function 属性的函数，它允许你将动画分成多个步骤，而不是平滑过渡。这对于创建逐帧动画非常有用。

// 封装一个 DOM 查询方法 function $(selector) { return document.querySelector(selector); } // 接下来我们来获取一下 DOM 节点 let imgBox = $('.imgBox'); // 图片容器 let imgBlock = $('.imgBlock'); // 可以拖动的图片 let imgGap =...

图片拖动验证 /* 整体容器的样式 */ .container { width: 280px; height: 400px; margin: 100px auto; } /* 上方的图片不好看切换一张的样式 */ .con...

/* 整体容器的样式 */ .container { width: 280px; height: 400px; margin: 100px auto; } /* 上方的图片不好看切换一张的样式 */ .container .changeImg { text-align: center; position: relative; font-s...

前言

相信大家都遇到过拖动某块拼图到对应的位置，拖到大致和缺口重合的位置之后，图片验证通过，可以进行后续的操作，那么这种效果是怎么实现的？下面我们来看一下具体的实现。

相关知识

CSS Sprite

XSS攻击

• 定义：跨站脚本攻击（Cross Site Scripting），一种经常出现在web应用中的计算机安全漏洞，允许恶意web用户将代码植入到给其他用户使用的页面中
• 危害：
  • 盗取各类用户账号，如网银、网站管理员账号
  • 读取、串改、添加、删除企业敏感数据
  • 非法转账
  • 控制受害者机器向其他网站发起攻击
• 攻击方式：
  • 存储型攻击：XSS代码被插入到类似个人信息、网站留言、评论、脚本等存储在服务器上的信息中
  • 反射型攻击：脚本隐藏在URL中，欺骗用户自己去点击链接，从而触发隐藏的XSS代码，一般出现在搜索页面、用户登陆口，用以窃取cookie或进行钓鱼欺骗
  • DOM型攻击：客户端脚本通过DOM的冬天检查修改页面内容，不依赖服务器端数据，仅在客户端执行
• 防范手段
  • 陌生的链接尽量不要点，使用正规网站
  • 对内容进行转义或过滤，使恶意脚本失效
  • 设置HttpOnly属性，限制恶意脚本的访问

CSRF攻击

• 定义：跨站请求伪造（Cross-site request forgery）,黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户登录状态发起跨站请求
• 危害：
  • 获取用户的隐私数据
  • 盗用用户身份，发送恶意请求，如转账、发消息、发邮件等
  • 配合其他漏洞发起攻击
• 攻击方式
  • 登录网站后，在未登出的情况下，打开危险网站，导致信息被窃取，危险网站依据获取的信息发起请求
• 防范手段
  • 检查请求头中origin属性和referer属性，明确请求是否从本站发出
  • 加强Token验证

点击劫持

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法

HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法

幂等：如果使用同一种请求方法的多个等效请求对服务器的预期影响，与一个等效请求对服务器的预期影响一样，那么这种请求方法被认为是幂等的。

GET（幂等）

• 一般用于获取/查询资源信息，比如搜索排序、筛选，只能提交字符型数据
• 提交的数据会在地址栏显示出来
• 由于浏览器对地址栏长度的限制而导致传输的数据有限制（所谓的请求长度限制是由浏览器和 web 服务器决定和设置的，各种浏览器和 web 服务器的设定均不⼀样，这依赖于各个浏览器⼚家的规定或者可以根据 web 服务器的处理能⼒来设定）
  • IE：2083个字符
  • Firefox：65536个字符
  • Safari：80000个字符
  • Opera：190000个字符
  • google：8182个字符
• 请求之后，结果会被浏览器缓存收纳，后续请求相同内容，从缓存中获取

HTTP Basic Authentication

• 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个ajax异步请求
• 服务器向客户端发送验证请求代码401
• 符合http1.0或1.1规范的客户端收到401返回值时，将自动弹出一个登录窗口，要求用户输入信息，一般为用户名和密码（注意：此时第一步的请求状态为peding）
• 用户输入信息后，将信息以BASE64加密方式加密，并将密文放入前一条请求信息中，新增：Authorization: Basic XXXXX（浏览器默认加密）
• 服务器收到上述请求信息后，将Authorization字段后的用户信息取出、解密，将解密后的信息与数据库信息进行比较验证，如果正确，根据请求，返回对应的请求资源
• 弊端：加密方式简单，加密可逆，请求头中附带加密信息，安全性较差，一般用于内网

session-cookie

• 服务器在接受客户端首次访问时在服务器端创建seesion，然后保存seesion，为session生成一个唯一的标识字符串,然后在响应头中种下这个唯一标识字符串
• 签名。这一步只是对sid进行加密处理，服务端会根据这个密钥进行解密
• 浏览器中收到请求响应的时候会解析响应头，然后将sid保存在本地cookie中，浏览器在下次http请求的请求头中会带上该域名下的cookie信息
• 弊端：服务器在接受客户端请求时会去解析请求头cookie中的sid，然后根据这个sid去找服务器端保存的该客户端的session，然后判断该请求是否合法；不同客户端需要创建不同的seesion，session保存在服务器内存中，服务器内存消耗大；且基于cookie识别用户，易受到CSRF(跨站伪造攻击：攻击者通过伪造用户的浏览器的请求，向访问一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等)攻击；不同服务器之间存在session共享问题

Token

Document // 1.console.log let name = 'Tom'; let age = 18; console.log(name); // Tom console.log(age); // 18 console.log('Name: %s, Age: %d'...