web学习路线图.mm
2020-02-11 12:05:00 2 举报AI智能生成
web前端知识图谱，学习资料
作者其他创作
大纲/内容
1：基础阶段：HTML+CSS
HTML
属性
事件
标签
字符集
......
CSS
CSS基础教程
CSS样式
背景
文本
字体
链接
列表
表格
轮廓
CSS框模型
内边距
边框
外边距
CSS定位
相对定位
绝对定位
浮动
CSS选择器
元素选择器
选择器分组
类选择器
ID选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
伪类
伪元素
CSS高级
对齐
尺寸
分类
导航栏
图片库
图片透明
盒子模型
媒体布局
欢迎关注微信公众号：服务：omsoofw 和订阅：jobdata
2：基础阶段：HTML5+CSS3
HTML5
HTML5视频
HTML5音频
HTML5拖放
HTML5画布
HTML5 SVG
HTML5地理定位
HTML5 Web存储
HTML5 应用缓存
HTML5表单
CSS3
CSS3边框
CSS3背景
CSS3文本效果
CSS3字体
CSS3 2D转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
3：基础阶段：JavaScript
认识JavaScript
DOM+BOM综合演练
网页特效
基本语法
变量
数据类型
字符串
数字
布尔
数组
对象
Null
Undefined
函数
内置函数
自定义哈数
运算符
流程控制
DOM对象
String
Array
Date
Boolean
Math
Number
BOM对象
WIndow
Navigator
Screen
History
Location
综合实例
4：实战阶段：项目
Jquery学习
基础语法
选择器
基本选择器
层次选择器
过滤选择器
表单选择器
DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
事件绑定
事件冒泡
动画
show、hide
fadeIn、fadeOut
slideUp、slideDown
自定义动画animate
动画回调以及停止动画
常用工具
浏览器及特性检测
数组和对象操作
Ajax
Jquery插件编写
ES6进阶
Bootstrap，同上
animate.css学习
PS切图学习
5：提升阶段：框架
Vue
Vue基础
模版语法
计算属性侦听器
Class与Style绑定
条件/列表渲染
事件处理
表单输入绑定
组件基础、注册
Prop
自定义事件
Vuex
State
Getter
Mutation
Action
Module
Vue-router
认识路由
动态路由
嵌套路由
编程式导航
路由组件传参
axios
认识axios，全局配置，发送POST、GET请求等
React
认识React
React元素渲染
JSX
组件
Props
条件渲染
组件API
组件声明周期
Node
基础
console（控制台）
crypto（加密）
debugger（调试器）
fs（文件系统）
http（网络）
os（操作系统）
path（路径）
高级
NPM介绍及使用
MVC模式简介
Express框架学习
链接Mysql
链接Redis
项目实战
webpack
概念，主要讲什么是入口，出口，loader，插件等
入口
单个入口语法
对象语法
常见场景
输出
用法
多个入口起点
高级进阶
模式
development
production
loader
实例
配置
插件
剖析
基本配置
多个Target
使用其他语言配置
模块
6：提升阶段：数据可视化
主要的分支
科学可视化
应用
目的
信息可视化
研究抽象数据类型的交互式视觉表示以加强人类的认知
可视分析学
过交互式视觉界面进行分析推理
将交互式视觉表示与基础分析过程（统计过程、数据挖掘技术）结合，能有效执行高级别、复杂的活动（推理、决策）
实现流程
数据空间到图形空间的映射
分支主题
可视化技术栈
基础数学：三角函数、线性代数、几何算法
图形相关：canvas、svg、webgl、计算图形学、图论
工程算法：基础算法、统计算法、常用的布局算法
数据分析：数据清洗、统计学、数据建模
设计美学：设计原则、美学评判、颜色、交互、认知
可视化基础：可视化编码、可视分析、图形交互
可视化解决方案：图表的正确使用、常见的业务的可视化场景
常用的数据可视化工具
值得推荐的 37 款数据可视化工具
类型
关系数据可视化
作用:主要表现为节点和边的关系，比如流程图、网络图、UML 图、力导图等
类库:mxGraph、JointJS、GoJS、G6
统计数据可视化
作用:用于对统计数据进行展示、分析。统计数据一般都是以数据库表的形式提供
类库:HighCharts、ECharts、G2、Chart.js
地理空间数据可视化
作用:地理空间通常特指真实的人类生活空间，地理空间数据描述了一个对象在空间中的位置
类库: Leaflet、Turf、Polymaps
常用库
D3
优势
强大的 SVG 操作能力，可以非常容易的将数据映射为 SVG 属性
集成了大量数据处理、布局算法和计算图形的工具方法
强大的社区和丰富的 demo
劣势
API 太底层，复用性低，学习与使用成本高
HighCharts
使用门槛极低，兼容性好
使用广泛，非常成熟
样式比较陈旧、图表难以扩展
商业上使用需要购买版权
ECharts
丰富的图表类型，覆盖主流常规的统计图表
配置项驱动，三级个性化图表样式管理
移动端优化，交互和布局适配，按需打包
深度的交互式数据探索
地理特效（百度迁徙，百度人气，公交轨迹等效果）
灵活性上不如 Vega 等基于图形语法的类库
复杂关系型图表比较难定制
Leaflet
专门针对地图应用
mobile 兼容性良好
插件机制
功能比较简单，需要具备二次开发能力
Vega
完全基于 JSON 语法，提供从数据到图形的映射规则
支持常见的交互语法
复杂的语法设计，使用和学习成本很高
deck.gl
主要以 3D 地图可视化为主，内置了地理信息可视化常见的场景
支持大规模数据的可视化
需要具备 WebGL 的知识，层的扩展比较复杂
antV
底层绘图引擎 G
可视化语法类库 G2
与 ECharts 等图表库相比，G2 最大的优势是灵活的图形语法能力，可以让用户自由定制出各种各样的图表
关系可视化类库 G6
移动端图表类库 F2
可视化设计指引与使用规范
简单、易用
完备的可视化编码
强大的扩展能力
语法需要一定学习成本
基于 Web 的可视化技术
SVG：可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言（标准通用标记语言的子集）用于描述二维矢量图形的一种图形格式
Canvas 2D：Canvas 通过 JavaScript 来绘制 2D 图形，通过逐像素来进行渲染
Canvas 3D WebGL：WebGL（Web Graphic Library）是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言（GLSL）编写的着色器代码构成，这种语言类似于 C 或 C++，可在 GPU 上执行
7：提升阶段：Web安全
客户端脚本安全
浏览器安全
同源策略
例外标签
但浏览器限制了JS的权限，使其不能读、写返回的内容
限制范围
DOM
Cookie
XMLHttpRequest
XMLHttpRequest受到同源策略的约束，不能跨域访问资源
浏览器沙箱
sandbox，泛指“资源隔离类模块”
设计目的一般是为了让不可信的代码运行在一定的环境中，限制不可信代码访问隔离区之外的资源
恶意网址拦截
挂马网站
利用浏览器的漏洞执行shell code，在用户电脑中植入木马
钓鱼网站
通过模仿知名网站的相似页面来欺骗用户
跨站脚本攻击（XSS）
XSS本质
Cross Site Script => 一种HTML注入
XSS类型
反射型XSS
eg.诱导用户“点击”一个恶意链接才能攻击成功
存储型XSS
eg.保留一个含有恶意JS代码的网页在服务器端，所有访问者都会被执行恶意代码
DOM Based XSS
eg.通过修改DOM节点形成的XSS
XSS Payload
通过读取浏览器的Cookie对象，从而发起“Cookie劫持”攻击
攻击者可以不通过密码而直接登录
XSS钓鱼
通过钓鱼实现“与用户交互”获取用户关键信息
防范措施
针对XSS的Cookie劫持
在Set-Cookie时为Cookie标注“HttpOnly”标识
过滤标签
攻击者可以劫持当前页面中所有使用“相对路径”的标签
输入检查
XSS Filter
客户端JS与服务器端同时检查，阻挡大部分误操作的正常用户
输出检查
安全编码
HtmlEncode
JavascriptEncode
UrlEncode
处理富文本
对标签使用白名单
使用开源XSS Filter项目
eg.Anti-Samy
跨站点请求伪造（CSRF）
CSRF概念
Cross Site Request Forgery => 跨站点请求伪造
攻击者利用用户的身份操作用户账户的一种攻击方式
源于Web的隐式身份验证机制
虽然可以保证一个请求是来自于某个用户的浏览器
但却无法保证该请求是用户批准发送的
验证码
强制用户必须与应用进行交互才能最终完成请求
Referer Check
检查请求是否来自合法的“源”
eg.防止图片盗链应用场景
缺陷在于服务器并非任何时候都能取到Referer
Token
Anti CSRF Token
一定要使用安全的随机数生成器生成Token
同时要注意Token的保密性和随机性
点击劫持（ClickJacking）
基本概念
一种视觉上的欺骗手段
eg.攻击者使用一个透明的、不可见的iframe覆盖在一个网页上诱导用户在该页面上进行操作
点击劫持利用的是与用户产生交互的页面，而CSRF是另外的页面
劫持类型
iframe点击劫持
控制iframe的长、宽以及调整top，left的位置，将iframe页面内的任何部分覆盖到任何地方
同时设置iframe的position为absolute，并将z-index的值设置为最大=>让ifame处于页面最上层
通过设置opacity来控制iframe的透明程度，值为0是完全不可见的
Flash点击劫持
目前Adobe公司已经修复了此漏洞
图片覆盖攻击
利用图片的style或控制css，使图片覆盖到页面上的任意位置形成点击劫持
拖拽劫持与数据窃取
诱导用户从隐藏的不可见iframe中“拖拽”出攻击者希望得到的数据
然后放到攻击者能够控制的另外一个页面中从而窃取数据
触屏劫持
针对触屏操作捕捉手机OS事件，将一个不可见的iframe覆盖到当前网页上来劫持用户的触屏操作
frame busting
通过写JS代码来禁止iframe的嵌套
控制能力并不强，有许多方法可以绕过它
X-Frame-Options
在HTTP Header中增加X-Frame-Options选项
DENY
SAMEORIGN
ALLOW-FROM origin
HTML5安全
新标签的XSS
需要加入XSS Filter黑名单避免发生XSS
iframe的新属性sandbox
新特性
加载的内容会被视为一个独立的“源”，其中脚本将被禁止执行
options
allow-same-origin：允许同源访问
allow-top-navigation：允许访问顶层窗口
allow-forms：允许提交表单
allow-scripts：允许执行脚本
Link Types：noreferer
为和定义了新的Link Types: noreferer
浏览器在请求该标签指定的地址时将不再发送Referer
Canvas
可以让JS在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域
其强大的功能甚至可以用来破解验证码，大大降低了攻击的门槛
其他安全问题
Cross-Origin Resource Sharing
尽量不使用通配符\"*\"，使用更多HTTP Header做更精确的控制
postMessage - 跨窗口传递消息
postMessage允许每一个window对象向其他窗口发送文本消息不受同源策略限制
可能会导致DOM based XSS的产生
Web Storage
Storage类型
Session Storage
Local Storage
安全隐患
攻击者可能会将恶意代码保存在Web Storage中，从而实现跨页面攻击
服务端应用安全
注入攻击
注入攻击类型
SQL注入
恶意查询语句注入
盲注（Blind Injection）
构造简单的条件语句，根据返回页面是否发生变化，来判断SQL语句是否得到执行
Timing Attack
MySQL中有一个BENCHMARK()函数可以让同一个函数执行若干次
通过检查函数结果返回时间长短的变化来判断出注入语句是否执行成功
数据库攻击
防御SQL注入
使用预编译语句，绑定变量（参数化）
使用存储过程（不推荐使用存储过程，不利于维护）
检查数据类型（必须严格参照类型来匹配）
使用安全函数（充分借助各种Web语言提供的编码函数对抗SQL注入）
命令执行
利用“用户自定义函数”即UDF来执行命令
攻击存储过程
利用存储过程执行系统命令
编码问题
尽量统一数据库、操作系统、Web应用所使用的字符集
其他注入攻击
XML注入
需要对用户输入数据中包含的“语言本身的保留字符”进行转义
代码注入
多见于脚本语言中，需要避免使用危险函数
CRLF注入
CRLF是两个字符：CR（\）和LF（\），注入CRLF字符可能会改变原有语义
多用于日志注入、HTTP头注入
需要在使用换行符作为分隔符的应用中处理好\"\\
重要原则
“数据与代码相分离”，在“拼凑”发生的地方进行安全检查
文件上传漏洞
用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力
基于富文本编辑器的漏洞
攻击者可以手动修改上传过程的POST包绕过文件上传检查功能
eg.0x00字符截断的问题
基于Web Server的漏洞
Apache文件解析问题
老版本是从文件名的后方向前方解析，匹配mime.types名单
IIS文件解析问题
老版本存在文件名截断问题
建议取消“脚本资源访问”复选框
利用文件上传钓鱼
老版本IE会将钓鱼图片当做HTML执行
设计安全的文件上传
文件上传的目录设置为不可执行
判断文件类型
对于文件类型检查推荐使用白名单的方式
对于图片采用压缩函数或者resize函数处理可能包含的HTML代码
使用随机数改写文件名和文件路径
极大增加攻击的成本
单独设置文件服务器的域名
浏览器同源策略会导致客户端攻击失效
认证与会话管理
密码安全
长度与复杂度要求
OWASP推荐的一些最佳实践
密码的保存
必须以不可逆的加密算法/单向散列函数算法加密后存在数据库中
计算哈希值时增加一个Salt增加明文的复杂度
多因素认证
密码与多种手段结合（手机动态口令、数字证书、支付盾、第三方证书等），保证用户账户安全
Session与认证
生成SessionID时需要保证足够的随机性（使用足够强的伪随机数生成算法）
Session Fixation攻击
在登录完成后，重写SessionID
需要增加或改变用于认证的Cookie值
Session保持攻击
一定时间后强制销毁Session => 可能会影响一些正常的用户
当用户客户端发生变化时（IP、UserAgent等信息变化了）要求其重新登录
单点登录（SSO）
单点登录有利有弊，风险集中，一旦攻破后果严重！
访问控制
垂直权限管理
基于角色的访问控制（RBAC）
用户-角色-权限
应当使用“最小权限原则”+“默认拒绝”的策略
只在有需要的主体单独配置“允许”的策略
水平权限管理
基于数据的访问控制，缺乏数据级访问控制
OAuth
目前OAuth2.0是广为采用的授权协议标准
加密算法与随机数
密钥管理
不要把密钥硬编码在代码里，而应该存储在配置文件或数据库中，按需读取
伪随机数
不要将时间函数作为随机数使用
在重要系统中一定要使用足够强壮的随机数生成算法
Web框架安全
模板引擎与XSS防御
启用HtmlEncode
对不同场景实现自定义的编码函数
Web框架与CSRF防御
在Session中绑定Token
在form表单中自动填入Token字段
在Ajax请求中自动添加Token
在服务器端对比POST提交参数的Token与Session中绑定的Token是否一致
Http Headers管理
在Web框架中对Http头进行全局化处理，保障基于Http头的安全方案
数据持久层与SQL注入
使用ORM对抗SQL注入
Web框架自身的漏洞
应用层DDOS攻击
DDOS概念
利用合理请求导致资源过载造成服务不可用
常见DDOS攻击
CC攻击
对一些消耗资源较大的应用页面不断发起正常请求以消耗服务端资源
应用层DDOS
限流（Rate Limit）
对每个“客户端”做一个请求评率的限制
常见解决方法
应用代码性能优化
合理利用memcache等分布式缓存转移数据库压力
及时释放资源，减少空连接消耗
网络架构优化
善于利用负载均衡分流避免单点问题
充分利用CDN和镜像站点分流缓解主站压力
实现对抗手段
限制每个IP的请求频率
高级的验证码
核心思想
DDOS本质是对有限资源的无限制滥用
解决核心思路是限制每个不可信任的资源使用者的配额
安全运营体系
安全开发流程（SDL）
参考：微软SDL过程（16个阶段）
敏捷SDL
与项目经理充分沟通，排出足够的时间做安全评估
规范公司的立项流程，确保所有项目都能通知到安全团队，避免遗漏
树立安全部门的权威，项目必须由安全部门审核完成后才能发布
将技术方案写入开发、测试的工作手册中
强化代码规范，使用安全功能
给工程师培训安全方案
记录所有的安全Bug，激励程序员写出安全的代码
安全测试
自动化测试
通过Web安全扫描系统进行漏洞扫描
手动测试
自动化的扫描报告需要结合手动测试结果，最终形成一份安全测试报告
及时修复安全测试报告中提到的问题，再迭代进行安全测试以验证漏洞的修补情况
重要结论
SDL需要从上往下推动，归根到底仍然是“人”的问题
实施SDL一定要得到技术负责人和产品负责人的权利支持，完善软件发布流程
安全运营
漏洞修补流程
建立完善的BugTracker漏洞追踪机制，并为漏洞的紧急程度选择优先级
建立漏洞分析机制，并于开发一起制定修补方案，同时Review补丁的代码实现
对曾经出现的漏洞进行归档，并定期统计漏洞修补情况
安全监控
主要目的是为了探测网站或网站的用户是否被攻击，是否发生了DDOS，从而可以做出反应
入侵检测
物理上主要部署入侵检测产品
应用中实现代码级的安全监控功能
eg.记录安全日志汇总酌情发出安全警报
紧急响应流程
为了在最快时间内做出反应，须建立完善的报警机制
邮件报警
IM报警
短信报警
注意事项
保护安全事件的现场
确保准确的后续分析入侵行为及定损
以最快速度处理完问题
最短时间内找到对应的人并制定出相应的计划
安全运营实施的好坏，将决定公司安全是否能健康地发展
8：提升阶段：项目测试
测试环境
测试工具准备
项目管理工具
禅道，tower，伙伴云表格等
功能测试工具
fiddler等
接口测试工具
jmeter，fiddler，httpRequester，postman，loadrunner等
性能测试工具
jmeter，loadrunner等
持续集成工具
ant，Jenkins，maven等
被测项目环境
服务器/中间件
Tomcat
Apache
Nginx
数据库
MySQL，Oracle，SQL server等
Redis
Linux环境
JDK
Python
项目部署
接口测试环境
开发的联调环境可用
功能测试环境
持续集成搭建，满足测试的基本使用
预上线测试环境
模拟线上环境，为基准（性能）测试做准备
数据部署
测试环境数据
支持历史数据兼容
支持开发接口数据
预上线环境数据
线上数据同步
性能工具接口增加
测试计划
接口测试
编写测试用例
请求方法
请求路径
请求参数
必填项
轮流置空
边界值法
非必填项
测试结果
编写测试脚本
单个用例验收测试
集成用例回归测试
用例执行成功保存，预备性能性能测试
功能测试
精简剖析业务
客户体验
黑盒UI
编写用例
分析业务类型
功能点剥离
前置条件
校验规则
性能测试
针对业务量较大的流程设计用例
主要的流程需要注意前置条件
集成接口测试保存的脚本
添加并发用户设置
性能测试分类
并发测试
并发测试可以理解为很多的用户按照预定的场景并发请求某个业务或功能时是否会出现并发问题。几乎所有的性能测试都会涉及并发测试。并发测试的主要目的是找出并发引起的问题。
负载测试
负载测试可以理解为确定所要测试的业务或系统的负载范围，然后对其进行测试。 负载测试的主要目的是验证业务或系统在给定的负载条件下的处理性能。 负载测试还需要关注响应时间、TPS和其他相关指标。
压力测试
压力测试可以理解为没有预期的性能指标，不断的加压，看系统什么时候崩溃，以此来确定系统的瓶颈或者不能接受的性能拐点，以获得系统的最佳并发数、再打并发数。 压力测试可以看做负载测试的一种，即高负载下的负载测试。
稳定性测试
稳定性测试就是长时间运行，在这段时间内观察系统的出错几率、性能变化趋势等。进而大大减少系统上线后的崩溃等现象。 一般持续的时间为N*24小时。 稳定性测试注意事项 1 一般稳定性测试需要在系统成型后进行，并且没有严重的bug存在。 2. 场景的设计以模拟真实用户的实际操作为佳。
基准测试
基准测试是一种衡量和评估软件性能指标的活动。你可以在某个时候通过基准测试建立一个已知的性能水平（称为基准线），当系统的软硬件环境发生变化之后再进行一次基准测试以确定哪些变化对性能有影响。
配置测试
配置测试是通过调整系统软/硬件环境，了解在不同环境下系统性能指标的情况，从而找到系统的最优配置。
失效恢复测试
失效恢复测试重在关注系统出现问题后能否根据预先制定的策略恢复，且恢复后能否正常运行。 失效恢复测试一般针对有负载均衡的系统进行，主要是为了测试系统局部发生故障时，是否会对全局产生大的影响，产生的影响是否在可以接受的范围内，以及用户是否能继续使用系统。
现网性能测试
现网性能测试，就是在实际网络、实际环境中进行测试，完全和真实用户一样。 现网测试注意事项： 1. 时间段的选择。 2. 垃圾数据处理。 3. 网络限制。
测试实施
接口测试执行
收集测试结果，通过邮箱发送测试报告
功能测试执行
收集测试结果，反馈开发
性能测试执行
保存测试结果
调优参考依据
容量规划依据
回归测试
收集接口测试返回结果，针对性的设计用例执行
收集功能测试返回结果，针对性的设计用例执行
性能性能测试返回结果，针对性的调优
UI自动化
在公司投入的许可下，可以使用UI级自动化投入回归测试
监控调优
页面请求数量
尽量减少页面不必要的请求
零散的小图合并成大图传输
合并压缩CSS样式表和JS脚本
网络环境
增加带宽，优化DNS寻址，优化网络环境等
减少DNS的查询次数
部署CDN服务节点发布静态资源，减少网络拥堵状况
每个请求的内容大小
尽量减少请求的内容大小
图片尽量保存为png格式，能优化图片尽量优化
使用无cookie域名
在www.*.com上设置cookie，利用static.*.com存放静态资源（或者购买另外域名）
加载渲染机制
利用缓存机制，增大资源失效时间，较少重复资源请求
内容排版
图片延迟加载
尽量使用外部CSS样式和js
CSS样式表引用放在头部标签中，避免使用CSS@import
内部的js尽量放在页面的尾部加载（控制页面内容写入的除外）
大量的计算逻辑后台服务端处理
移除重复脚本
9：附加内容
项目管理
SVN使用
认识svn
安装
生命周期
启动模式
创建版本库
检出操作
解决冲突
提交操作
版本回退
查看历史
分支
GIT使用
认识git
安装配置
工作流程
工作区、暂存区和版本库
创建仓库
基本操作
分支管理
查看历史等
github
扩展部分
小程序
了解小程序开发流程
视图容器
view
scroll-view
movable-view
cover-view
cover-image
基础内容
icon
text
rich-text
progress
表单组件
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea
导航
navigator
function-page-navigator
媒体组件
audio
image
video
camera
live-player
live-pusher
地图（map）
画布（canvas）
开放能力
open-data
web-view
ad
official-account
apicloud（移动app开发）
认识apicloud
开发工具讲解
端API
API对象
设备访问
功能扩展
界面布局
导航菜单
小程序模块
云服务对接
云API
数据云API
统计云API
推送云API
云API SDK
小程序模块使用
Mysql
认识mysql
安装mysql
创建数据库、数据表
学习常用的SQL命令，完成增删查改
学习Mysql关联查询，子查询等
学习Mysql常用函数
学习Mysql分组、分页、排序等
学习Mysql高级查询
认识Redis
学习redis的数据类型
redis常用操作
redis事务
常用框架使用篇
iview （vue框架）
element ui （vue框架）
echarts (百度图标库)
阿里巴巴开源图标使用
Sass学习
Swiper学习
zoom.js 学习
web前端学习路线图
0 条评论
回复 删除
下一页
