这是我参与「第四届青训营 」笔记创作活动的第3天
1、前端设计模式
1、什么是设计模式
指的是软件设计中常见的问题的解决方案模型：
1.历史经验的总结 2.与特定的语言无关
2、设计模式背景
1.模式语言：城镇、建筑、建造
2.设计模式：可复用面向对象软件的基础
3、3种设计模式
- 创建型-如何创建一个对象
- 结构型-如何灵活的将对象组装成较大的结构
- 行为型-负责对象的高效通讯和职责划分
4、浏览器中的设计模式
单例模式
定义：全局唯一访问对象
应用场景：缓存，全局状态管理等
发布订阅模式
定义:一种订阅机制，可在被订阅对象发生变化时通知订阅者。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像订阅邮件，上线订阅等等，应用广泛。
5、JavaScript中的设计模式
原型模式
定义：复制已有对象来创建新的对象
应用场景：JS中对象创建的基本模式
代理模式
定义：可以自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
应用场景：监控，代理工具，前端框架实现等等
迭代器模式
定义：在不暴露数据类型的情况下访问集合中的数据。
应用场景：数据结构中有很多种数据类型，列表，树等，提供通用操作接口。
总结
（设计模式不是银弹）
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景却十分困难
- 现代编程语言的多编程范式带来的更多可能性
- 正优秀的开源项目学习设计模式并不断实践
2、Web安全之旅
1、攻击者角度
1、cross-Site Scripting(XSS)
XSS主要利用了
1.盲目信任用户的提交内容
2.string => DOM（直接将用户提交的字符串转为DOM结构）
-document.write
-element.innerHTML = anyString
-SSR(user_data) //伪代码
XSS的一些特点
- 通常难以从 UI 上感知 （暗地执行脚本）
- 窃取用户信息（cookie/token）
- 绘图 UI （例如弹窗），诱骗用户点击、填写表单
2、Strode XSS（存储型）
- 恶意脚本被存在数据库中
- 访问页面 -> 读数据 = 被攻击
- 危险最大，对全部用户可见
3、Rflected XSS（反射型）
- 不涉及数据库
- 从 URL 上攻击
4、 Muntation-based XSS
- 利用浏览器渲染 DOM 的特性（独特优化）
- 不同浏览器，会有区别（按浏览器进行攻击）
5、Cross-site request forgery(CSRF)(跨站轨道请求)
- 在用户不执行的前提下
- 利用用户权限（cookie）
- 构造指定 HTTP 请求， 窃取或修改用户敏感信息
6、Injection（注入）
1、SQL Injection
- 请求 SQL 参数（恶意注入）
- 参数 -> SQL ,运行 SQL code
- 获取其他数据，修改数据，删除数据
2、Injection 不至于 SQL
- CLI
- OS command
- Srver-Side Requset Forgery(SSRF), 服务端伪造请求（原理相似）
3、Denial of Service（Dos）
通过某种方式（构造特定请求），导致服务器资源被显著消耗，来不及响应更多请求， 导致请求挤压，进而雪崩效应。
攻击特点
- 直接访问 IP
- 任意 API
- 消耗大量带宽（耗尽）
中间人攻击
- 明确传输
- 信息篡改不可知
- 对方身份未验证
2、防御者角度
1、XSS
- 永远不信任用户提交的内容
- 不要将用户提交内容直接转换成 DOM
2、XSS防御现成工具
前端
- 主流框架默认防御 XSS
- Google-colsure-library
服务端（Node）
- DOMPurify
3、Content Security Policy（CSP）
- 那些源（域名）被认为是安全的
- 来自安全源的脚本可以执行，否则直接抛错
- 对 eval + inline script 说不
4、CSRF的防御
if 伪造请求 = 异常来源 then 限制请求来源 -> 限制味道请求 请求头部 -Origin（同源请求中，GET + HEAD 不发送）
- Referer
5、SanmeSite VS CORS
SanmeSite
- cSanmeSiteookie 发送
- domain vs 页面域名
- “我跟你说个事，除了这个屋我可就不认了”
CORS
- 资源读写（HTTP请求）
- 资源域名 vs 页面域名
- 白名单
4、尾声
-
安全无小事
-
使用的依赖（npm package，甚至是 NodeJS）可能成为最薄弱的一环 （npm install 除了带来了黑洞，还可能带来漏洞）
- left-pad 事件
- eslint-scope 事件
- event-stream 事件
-
保持学习
