123

docs/src/pages/FixedArticle/JavaScript/index.md

@@ -1085,4 +1085,91 @@ function strip(num, precision = 12) {
 - 窗口大小，只需要窗口调整完成之后，计算窗口大小，防止重复渲染
 节流在间隔一段时间执行一次会调的场景有：
 - 滚动加载：加载更多或滚到底部监听
-- 搜索框，搜索联想功能
+- 搜索框，搜索联想功能
+# 判断一个元素是否在可视区域
+## 用途：
+在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如：100px），从而实现一些常用的功能，例如：
+- 图片懒加载
+- 列表的无限滚动
+- 计算广告元素的曝光情况
+- 可点击链接的预加载
+## 实现方式
+判断一个元素是否在可视区域，我们常用的有三种方法：
+- offsetTop、scrollTop
+- getBoundingClientRect
+- Intersection Observer 
+
+# 大文件断点续传
+## 是什么？
+上传大文件时，以下几个变量会影响我们的用户体验
+- 服务器处理数据的能力
+- 请求超时
+- 网络波动
+上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等
+## 解决方案
+### 分片上传
+分片上传就是将所上传的文件，按照一定大小，将整个文件分割成多个数据块来进行上传，上传完成之后再由服务端对所上传的文件进行汇总整合成原始的文件
+- 大致流程如下：
+  1. 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
+  2. 初始化一个分片上传任务，返回本次分片上传唯一标识；
+  3. 按照一定的策略（串行或并行）发送各个分片数据块；
+  4. 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件
+### 断点续传
+断点续传指的是在下载或者上传时，将下载活上传任务人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以继续从已经上传或下载的部分继续上传下载未完成的部分，而没有必要从头开始上传或下载，用户可以节省时间，提高速度
+- 两种实现方式：
+  1. 服务端返回，告知从哪里开始
+  2. 浏览器端自行处理
+上传过程中将文件在服务器写作临时文件，等全部写完(上传完毕)，将此临时文件重命名为正式文件即可，如果中途上传过程中断，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可
+
+## 使用场景
+- 大文件加速上传：当文件大小超过预期大小时，使用分片上传可实现并行上传多个part，以加快上传速度
+- 环境网络较差：建议使用分片上传，当出现上传失败时，仅需要重传上传失败的part
+- 流式上传：可以在需要上传文件大小还不确定的情况下开始上传，这种场景在视频监控等行业应用中非常常见
+
+# 单点登录
+## 概念
+-  单点登录简称SSO，是现代比较流行的企业业务整合的解决方案之一
+- SSO的定义：是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统
+- SSO一般都需要一个独立的认证中心（passPort）子系统的登陆都需要通过`passPort`,子系统本身将不参与登陆操作
+- 当一个系统成功登陆后，`passPort` 将会颁发一个令牌给各个子系统，子系统可以通过令牌来获取各自受保护的资源。为了减少频繁认证，各个子系统在被`passPort`授权后，会建立一个局部对话，在一定时间内可以无需再次向 `passPort` 发起认证
+## 实现方式
+### 同域名下的单点登录
+- `cookie`的`domain`属性设置为当前域的父域，并且父域的cookie会被子域所共享 path属性默认为web应用的上下文路径
+- 利用cookie的这个特点，我们只需要将cookie的domain属性设置为父域的域名（主域名），同时将cookie的path属性设置为根路径，将Session ID或者Token保存到父域中，这样所有的子域都可以访问到这个cookie了
+- 不过需要注意的是：他要求应用系统的域名需要建立在同一个主域名之下
+### 不同域名下的单点登录（一）
+- 如果是不同域名，那么cookie肯定是不能共享的，那么这个时候我们就需要建立一个认证中心了，专门用来处理登陆请求独立的web服务
+- 用户统一在认证中心进行登录，登陆成功后，认证中心记录用户登录的状态，并将token写入cookie中（注意：这个cookie是认证中心的，应用系统是访问不到的）
+- 应用系统检查当前有没有token，如果没有，说明用户在当前系统中尚未登录，那么就将页面跳转至认证中心
+- 由于这个操作会将认证中心的cookie自动带过去，因此，认证中心能够根据Cookie知道用户是否已经登陆过了
+- 如果认证中心发现用户未登录，就会返回登陆页面，等待用户登录
+- 如果认证中心发现用户已经登陆过了，则不会返回登录页面，而是会跳转到目标的URL，并且在跳转前生成一个Token，拼接在目标的URL后面，回传给目标应用系统
+- 应用系统拿到Token之后，还需要向认证中心确认下token的合法性，防止用户伪造，确认无误后，应用系统记录用户的登录状态，并将token写入cookie，然后给本次访问放行，（注意这个cookie是当前系统的），当用户再次访问当前应用系统时，就会自动带上这个token，应用系统验证这个token，发现是已登录状态，则不会询问认证中心
+### 不同域名下的单点登录（二）
+- 可以选择将 Session ID （或Token）保存到浏览器的localStorage当中，让前端每次再向后端发送请求时，主动将localStorage的数据发送到服务端
+- 这些都是由前端来控制的，后端需要做的仅仅只是在用户登陆成功后，将SessionID或者token放在响应体中传递给前端
+- 单点登录完全可以在前端实现，前端拿到SessionID或token后，除了将它写入自己的localStorage当中以外，还可以通过其他手段写入多个其他域下的localStorage当中
+- 前端通过iframe+pastMessage() 方式，将同一份token写到多个域下的localStorage当中前端在每次向后端发送请求之前，都会主动从LocalStorage中读取token并在请求中携带，这样就实现了同一份token被多个域所共享
+- 这个方式完全有前端控制，几乎不需要后端来进行参与，同样支持跨域
+# web常见的攻击方式以及防御
+## 概念
+- web攻击是针对用户上网行为或网站服务器等设备进行攻击的行为
+- 如:植入恶意代码，修改网站权限。获取用户网站隐私信息等等
+- web程序的安全性是任何基于web业务的重要组成部分
+- 确保web应用程序安全十分重要，即使是代码中很小的bug也有可能会导致隐私信息被泄露
+- 站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践
+常见的web攻击方式有：
+- XSS跨站脚本攻击
+- CSRF 跨站请求伪造
+- SQL注入攻击
+
+## XSS
+- xss 跨站脚本攻击，允许攻击者将恶意代码植入到提供给其他用户使用的页面当中
+- XSS 涉及到第三方，即攻击者、客户端和web应用
+- XSS 的目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法的身份信息后，攻击者就可以假冒合法用户与网站进行交互
+根据攻击来源，XSS攻击可以分为：
+- 存储型
+- 反射型
+- DOM型
+### 存储型
+