读《现代前端技术解析》

远子 •  2020年05月25日

这本书介绍了协议、Web 安全、浏览器渲染机制、前端交互框架、同构应用、JS全栈应用等内容

一、协议

1) HTTP

HTTP(HyperText Transport Protocol) 超文本传输协议.

2) 实时协议

WebSocket 协议

WebSocket 可以很方便的推送消息到浏览器, 缺点是浏览器兼容问题, IE11以下不支持.

Poll 和 Long-poll

Poll 是轮询, 浏览器每个一秒向服务器发送请求, 如果有更新则返回, 实时性差, 耗费服务器资源.

Long-poll 长轮询, 是 Poll 的改进方案, 服务器不立刻返回请求, 而是等待一段时间.

相比 Poll 来说实时性好, 常用的场景是二维码登录, 浏览器自动响应手机端的扫码结果.

DDP 协议

DDP(Distributed Data Protocol) 分布式数据协议, 是一种新型的客户端与服务端的实时通信协议,
Meteor Web 框架的双向实时数据更新机制底层使用的是 DDP.

3) RESTFul 交互协议

REST(Representational State Transfer) 表述性状态转化, 是一套客户端与服务端数据传输的约束规范.

HTTP方法URI描述
POST/v1/user新增用户
DELETE/v1/user/:id删除用户
PUT/v1/user/:id全量更新用户
DISPATCH/v1/user/:id更新部分信息
GET/v1/user/:id获取用户信息

4) Web 与 APP 交互

  • Web 调用 APP, 有两种通用的方法:

    1. 通过 URI 请求
    2. 通过 addJavascriptInterface 注入方法到 Web 中
  • APP 调用 Web
  • JSBridge

二、Web 安全

1) XSS 攻击

XSS(Cross Site Script) 跨站脚本攻击, 分为存储型、反射型、DOM型三种.

存储型XSS:

前端提交的数据未经处理直接存储到数据库中, 从数据库重新读取后插入页面时, 有可能发生 XSS.

<div>{{ content }}</div>

以上模板引擎中如果 content 变量为: <script>window.location.href = 'www.ad.com'</script>,
则页面会渲染为:

<div><script>window.location.href = 'www.ad.com'</script></div>

当用户访问时, 会重定向到的广告页面.

反射型XSS:

从URL中读取参数, 直接渲染到页面时会发生 XSS.

let name = req.query.name;
this.body = `<div>${name}</div>`;

name 的值为: <script>window.location.href = 'www.baidu.com'</script> 时, 会重定向到的广告页面.

DOM型XSS:

和存储型类似:

<div class="hey {{ helloClass }}">Hello</div>  

helloClass 的值为: "></div><script>window.location.href = 'www.baidu.com'</script><div class="b 时, DOM会解析为:

<div class="hey "></div><script>window.location.href = 'www.baidu.com'</script><div class="b">Hello</div>  

此时当用户访问时, 会重定向到的广告页面.

2) SQL注入攻击

SQL注入攻击是因为页面提交的数据未经处理直接拼装到SQL语句中执行, 造成数据泄漏等问题.

3) CSRF

CSRF(Cross-site Request Forgery) 跨站请求伪造, 通过钓鱼站点获取用户用户登录信息, 之后利用调用源站点数据.

解决办法: 通过加密计算的 Token 验证.

4) DNS劫持

DNS是指攻击者通过某些手段获取了某个域名的DNS解析记录控制权, 进而修改域名的解析结果.

5) HTTP劫持

在用户浏览器和服务器之间传输数据时监控数据包, 当满足一定条件时就会在正常的数据包中插入或修改恶意代码,
或者以弹窗的形式在页面展示广告等.

6) DDoS 攻击

DDos(Distributed Denial of Service) 即分布式拒绝服务攻击, 是目前最为强大、最难以防御的攻击方式之一.

原理: 发起大量的合理的客户请求来占用服务器资源, 从而使合法用户无法得到服务器响应.

(完)