二十二）：前端安全"/>
读书笔记（二十二）：前端安全
1.单页应用安全策略
单页应用采用前后端分离的设计方式，路由由前端管理，通过ajax进行通信，用户请求页面时，后端经常无法获取用户身份信息。
- 使用HTTPS来对传输内容（昵称、密码、token等）进行加密。
- 不要在URL query中传递敏感数据。
- 升级npm包，npm在6.0之后可以检测三方库隐患。
# 扫描所有依赖，列出依赖中有安全隐患的包
npm audit# 把不安全的包升级到可兼容的版本
npm audit fix
- 响应头设置
Content-Security-Policy:设置应用是否可以引用某些来源的内容，进而防止XSS。
关闭X-Powered-By，以避免暴露服务器端信息。
增加Public Key Pinning，预防中间人伪造证书。
Strict-Transport-Security：浏览器只能通过HTTPS访问当前资源。
X-Download-Options:IE8及以上支持，用来预防下载内容的安全隐患。
Cache-Control和Pragma header以关闭浏览器端缓存。
X-Content-Type-Options:禁用浏览器内容嗅探。
X-Frame-Options:预防clickjacking漏洞，是否允许在frame或iframe标签中渲染某个页面。
X-XSS-Protection:当检测到跨站脚本攻击时，浏览器会停止加载页面。
2.JWT鉴权
鉴权过程中，为了验证用户身份，需要浏览器向服务器提供一个验证信息，称之为token。通常由JSON数据格式组成，通过散列算法生成一个字符串，JSON Web Token（JWT），任何token持有者都可以无差别用它来访问相关资源。
一个JWT包含：header（消息头）、payload（消息体，储存用户数据）、signature（签名）。signature是基于前两部分生成的签名，前两部分分别通过Base64URL算法生成两组字符串，再和signature结合后通过.号分割，就是最终的token。
当客户端提交用户名/密码并通过认证后，就会获得JWT的token，接着通过js脚本在所有数据请求的header中加上token。服务器端接收到请求后，验证token的signature是否等同于payload，进而得知payload字段是否被中间人更改。一般将token存储在本地session storage中。
隐患：攻击者可以主动注入恶意脚本或使用户输入，通过js代码来偷取token（XSS），一般的防御手段是采用HTML转义来过滤用户输入，需要将用户输入的特殊字符进行转义。
3.Authentication cookie鉴权
cookie是含有有效期和相关domain并存储在浏览器中的键值对组合。
可以用js创建：
document.cookie = '123'
可以在服务器端设置响应头创建：
set-Cookie：123
浏览器会自动在每个请求中加入相关domain下的cookie，一般分为两种：
- session cookie：会随着用户关闭浏览器而被清除，不会被标记任何过期时间Expires或最大时限Max-Age。
- permanent cookie：会在用户关闭浏览器之后被浏览器持久化存储。
cookie安全配置：
- HttpOnly cookie: 在浏览器端，js没有读cookie的权限。
- Secure cookie：只有在特定安全通道（HTTPS）下，传输链路的请求中才会自动加入相关cookie。
- SameSite cookie：在跨域情况下，相关cookie无法被请求携带，主要是为了防止CSRF攻击。
隐患：cookie中直接存储了用户的身份认证信息，如果被读取是很可怕的；跨域访问技术（如CORS，跨域资源共享）的同源策略能保证不同源的客户端脚本在没有明确授权的情况下，无法读写对方资源。同源策略只是针对浏览器的编程脚本语言，如果对一个恶意服务器发送ajax请求，同源策略会限制发送，但如果请求直接通过HTML form发送，那同源策略就毫无办法了。为了防御XSS，设置httpOnly；防御CSRF，设置Samesite。
4.综合鉴权
结合上述两种鉴权方式，JWT的signature部分维护在设置了HttpOnly的cookie中，意味着js无法读取完整的JWT信息。同时，每次请求中都会携带cookie，服务器端将其返回给浏览器后进行存储，这样JWT信息在每次请求时都可以被更新，过期时间也会被自动加入其中。
鉴权流程：
- 对于单页应用中的每个页面，需要检查cookie中是否存在JWT payload，如果存在表示用户已经进行鉴权，否则重定向到登录页面。
- 用户在未授权情况下，在登陆时将用户名和密码提交给服务器端，在服务器端返回的信息中设置Anthentication
cookie，使cookie中含有JWT信息。
更多推荐
读书笔记（二十二）：前端安全
发布评论