第二篇 前端安全 - 【 跨站请求伪造 CSRF + 点击劫持 ClickJacking 】

前端安全相关的知识体系

1、跨站脚本攻击  XSS
 
2、跨站请求伪造  CSRF
 
3、点击劫持  ClickJacking
 
4、HTTP 严格传输安全  HSTS
 
5、CDN 劫持
 
6、内容安全策略  CSP
 
7、安全沙箱  Sandbox
 
8、Iframe 

跨站请求伪造 - CSRF

1、跨站脚本伪造 - CSRF 的定义
 
  CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的
 
2、跨站脚本伪造 - CSRF 典型的攻击流程
 
  1、受害者登录 A 网站，并且保留了登录凭证【 Cookie 】
  
  2、攻击者引诱受害者访问 B 网站
  
  3、B 网站向A网站发送了一个请求（这个就是下面将介绍的几种伪造请求的方式），浏览器请求头中会默认携带 A 网站的 Cookie
  
  4、A 网站服务器收到请求后，经过验证发现用户是登录了的，所以会处理请求
  
3、跨站脚本伪造 -CSRF 的特点  
 
  1、攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生
  
  2、攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。
整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”
 
  3、跨站请求可以用各种方式：图片URL、超链接、CORS、Form 提交等等；部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪
 
4、常见的 跨站脚本伪造 - CSRF 攻击类型
 
  1、GET 类型的跨站脚本伪造 - CSRF
  
  2、POST 类型的跨站脚本伪造 - CSRF
  
  3、链接类型的跨站脚本伪造 - CSRF

1、GET 类型的跨站脚本伪造 - CSRF
 
  GET 类型的 CSRF 非常简单，只需要利用一个 HTTP 请求，一般会这样利用
 
  <img src="http://bank.example/withdraw?amount=10000&for=hacker" > 
  
  在受害者访问含有这个 img 的页面后，浏览器会自动向 http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker 发出一次 HTTP 请求。bank.example 就会收到包含受害者登录信息的一次 跨域 请求
 
2、POST 类型的跨站脚本伪造 - CSRF
 
  这种类型的 CSRF 通常使用的是一个自动提交的表单，如
  
   <form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
   </form>
   <script> document.forms[0].submit(); </script> 
   
   访问该页面后，表单会自动提交，相当于模拟用户完成了一次 POST 操作
   
   POST 类型的攻击通常比 GET 要求更加严格一点，但仍并不复杂。任何个人网站、博客，被黑客上传页面的网站都有可能是发起攻击的来源，后端接口不能将安全寄托在仅允许 POST 上面
   
3、链接类型的跨站脚本伪造 - CSRF
 
   链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接，或者以广告的形式诱导用户中招，攻击者通常会以比较夸张的词语诱骗用户点击
 
     <a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
    重磅消息！！
     <a/>

跨站请求伪造 -  CSRF 的防范措施
 
  1、同源检测
  
     既然 CSRF 大多来自第三方网站，那么我们就直接禁止第三方域名 或者不受信任的域名 对我们发起请求
  
  2、CSRF Token
  
    在浏览器向服务器发起请求时，服务器生成一个 CSRF Token。CSRF Token 其实就是服务器生成的随机字符串，然后将该字符串植入到返回的页面中，通常是放到表单的隐藏输入框中，这样能够很好的保护 CSRF Token 不被泄漏
    
    服务器验证 CSRF Token 是否一致；从第三方网站发出的请求是无法获取用户页面中的 CSRF Token 值的
  
  3、给 Cookie 设置合适的 SameSite
  
    当从 A 网站登录后，会从响应头中返回服务器设置的 Cookie 信息，而如果 Cookie 携带了 SameSite=strict 则表示完全禁用第三方站点请求头携带 Cookie，比如当从 B 网站请求 A 网站接口的时候，浏览器的请求头将不会携带该 Cookie
    
    Samesite=Strict 这种称为严格模式，表明这个 Cookie 在任何情况下都不可能作为第三方 Cookie
    
    Samesite=Lax，这种称为宽松模式，比 Strict 放宽了点限制：假如这个请求是这种请求（改变了当前页面或者打开了新页面）且同时是个 GET 请求，则这个 Cookie可 以作为第三方Cookie
    
    None 任何情况下都会携带

点击劫持 ClickJacking

1、点击劫持 ClickJacking 的定义
 
  点击劫持（Clickjacking）是一种通过视觉欺骗的手段来达到攻击目的手段。往往是攻击者将目标网站通过 iframe 嵌入到自己的网页中，通过 opacity 等手段设置 iframe 为透明的，使得肉眼不可见，这样一来当用户在攻击者的网站中操作的时候，比如点击某个按钮 【 这个按钮的顶层其实是 iframe 】，从而实现目标网站被点击劫持
  
2、点击劫持 ClickJacking 的防范措施
 
  1、在 HTTP 请求头中加入 X-FRAME-OPTIONS 属性，此属性控制页面是否可被嵌入 iframe 中
  
    DENY  不能被所有网站嵌套或加载
    
    SAMEORIGIN  只能被同域网站嵌套或加载
    
    ALLOW-FROM URL  可以被指定网站嵌套或加载
    
  2、判断当前网页是否被 iframe 嵌套