亮亮的笔记本

# 安全

# 同源

  1. 协议 http https
  2. 域名
  3. 端口

# XSS

恶意注入脚本

  1. 存储型：通过提交存在数据库，等回显时触发
  2. 反射型：和存储型类似，只是不存在数据库中
  3. 拦截网络

解决：

  1. 服务器对输入脚本进行过滤或转码
  2. 充分利用 CSP (opens new window): 头部资源白名单
  3. 使用 HttpOnly 属性：确保 cookie 不被客户端访问

# CSRF

不注入代码，冒用 cookie 来操作请求

解决：

  1. 充分利用好 Cookie 的 SameSite 属性
  2. CSRF Token

# CORS (跨域资源共享) (opens new window)

# 浏览器的同源策略

Origin 字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）

实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信

# 一个跨域的简单请求 (opens new window)

服务器可以接收到请求，会被浏览器同源策略拦截

满足简单请求的四个条件

85AF05B5-CDE7-4330-ACC0-0BD8D9726ADD.png

服务端的跨域设置：

Access-Control-Allow-Origin:*
// 如果只是针对某一个请求源进行设置的话，可以设置为具体的值
Access-Control-Allow-Origin: 'http://www.yourwebsite.com'

# 一个跨域的复杂请求

会先发送一个 options 预检请求，通过后才会发送真正的请求。

服务端的跨域设置：将 OPTIONS 放行

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
// 设置max age，浏览器端会进行缓存。没有过期之前真对同一个请求只会发送一次预检请求
Access-Control-Max-Age: 86400

如果需要 cookie，客户端设置 withCredentials:true,服务端设置：Access-Control-Allow-Credentials: true，Access-Control-Allow-Origin 需要设置为请求源

# HTTPS

  • HttpOnly 确保 cookie 不被客户端访问
  • Secure 确保资源是 https 的
  • SameSite 确保 URL 一致

经典的浏览器安全问题 (opens new window)

← Vue →