Web安全之XSS、CSRF和点击劫持

常见的前端攻击方式

XSS 攻击、CSRF 攻击、点击劫持、URL 跳转漏洞。
什么是 XSS 攻击？

XSS 即跨站脚本攻击，是一种代码注入攻击。恶意代码未经过滤，与网站正常代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
XSS 攻击有几种攻击类型？如何防范 XSS 攻击？

XSS 攻击包括反射型、DOM 型和持久型三种。

(1) 反射型 XSS
- 攻击步骤：攻击者构造含有恶意代码的 URL，用户点击 URL，服务端取出 URL 中的恶意代码拼接在HTML 中返回，浏览器解析并执行含有恶意代码的代码，恶意代码窃取用户数据或者冒充用户调用接口。
- 常见场景：网站搜索、跳转等，通过 URL 传递参数。
- 防范方式：对 URL 的参数进行编码。
(2) DOM 型 XSS
- 攻击步骤：攻击者通过 DOM 操作构造出包含恶意代码的数据，浏览器执行恶意代码后，恶意代码窃取用户数据或者冒充用户行为。
- 常见情景：用.innerHTML、.outerHTML、appendChild、document.write()等 API 时把不可信的数据作为 HTML 插到了页面上。
- 防范方式：用.innerText、.textContent、setAttribute()等API，并对输入内容进行转义。
(3) 存储型 XSS
- 攻击步骤：攻击者将恶意代码提交到目标网站的数据库中，服务端将恶意代码拼接在 HTML 中返回，浏览器解析执行恶意代码，恶意代码窃取用户数据或冒充用户行为。
- 常见场景：论坛发帖、商品评论、用户私信等需要存储用户输入数据的网站。
- 防范方式：前端传递数据给数据之前、服务器存储数据之前、前端展示服务器传递的数据之前，都对数据进行转义/过滤。
其他防范 XSS 攻击的手段：

(1) CSP：白名单制度，开发者通过配置告诉浏览器哪些外部资源可以加载和执行。可以通过服务端配置 HTTP的Content-Security-Policy头部指定，也可以在前端设置meta标签。

(2) 输入内容限制，不能包含特殊字符。

(3) 为 Cookie 设置HttpOnly标记，使攻击者不能通过 JavaScript 访问 Cookie。
```
Set-Cookie: ...; HttpOnly
```
(4) 验证码：防止脚本冒充用户提交危险操作。
什么是 CSRF ？如何防范 CSRF ？

CSRF 及跨站请求伪造，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击网站执行某项操作的目的。

防范方式：
1. 添加验证码（体验不好）
2. 判断请求来源：检测 Referer（不安全，Referer 可以被更改）
3. 使用 Token：服务端给用户生成一个 token，加密后传给用户，用户提交请求时携带这个 token，服务端对这个 token 进行验证。
4. 服务端为响应头Set-Cookie设置Samesite属性，限制第三方 Cookie，不是所有浏览器都支持这种方式。Samesite可以设置三个值：
  - Strict，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。
  - Lax，跨站点时，除导航到目标地址的 Get 请求（链接、预加载、GET 表单）外，其他情况也不发送第三方 Cookie。
  - None，关闭SameSite属性，前提是必须同时设置Secure属性。
除了 XSS 和 CSRF 攻击之外，还有哪些攻击方式？
1. 点击劫持：
  - 在 Web 页面中隐藏了一个透明的 iframe，用外层假页面诱导用户点击，实际上是在隐藏的 iframe 上触发了点击事件进行用户不知情的操作。
  - 防范方式：在响应头中设置X-Frame-Options头部，可以设置三个值：
    - DENY：表示该页面不允许在 frame 中展示，即使在相同域名的页面中嵌套也不允许
    - sameorigin：表示该页面可以在相同域名页面的 frame 中展示
    - allow-from uri：表示该页面可以在指定来源的 frame 中展示
2. URL 跳转漏洞
  - 服务端告知浏览器跳转时，未对传入的跳转地址进行合法性校验，导致用户浏览器跳转到钓鱼页面。
  - 防范方式：在 URL 链接里加入验证 token 。
安全扫描工具

Arachni、Mozilla HTTP Observatory、w3af

参考：

【segmentfault】【面试篇】寒冬求职之你必须要懂的Web安全：segmentfault.com/a/119000001…
【阮一峰】Cookie 的 SameSite 属性：www.ruanyifeng.com/blog/2019/0…
【MDN】X-Frame-Options：developer.mozilla.org/zh-CN/docs/…