第一篇 前端安全 - 【 跨站脚本攻击 XSS + 内容安全策略 CSP 】

前端安全相关的知识体系

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

跨站脚本攻击 - XSS

1、跨站脚本攻击 - XSS 的定义
 
  Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全
  
2、跨站脚本攻击 - XSS 的分类 【 一般可以通过三种方式来注入恶意脚本 】
 
   1、反射型 XSS 攻击
   
   2、基于 DOM 的 XSS 攻击
   
   3、存储型 XSS 攻击

1、反射型 XSS 攻击
 
   顾名思义，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又将这部分返回给用户，恶意脚本在页面中被执行。一般发生在前后端一体的应用中，服务端逻辑会改变最终的网页代码
 
 实现步骤
 
  1、攻击者构造出特殊的 URL，其中包含恶意代码
  
  2、用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器
  
  3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
  
  4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
 
2、基于 DOM 的 XSS 攻击
 
  目前更流行前后端分离的项目，反射型 XSS 无用武之地。 但这种攻击不需要经过服务器，我们知道，网页本身的 JavaScript 也是可以改变 HTML 的，黑客正是利用这一点来实现插入恶意脚本
  
 实现步骤
 
  1、攻击者构造出特殊的 URL，其中包含恶意代码
  
  2、用户打开带有恶意代码的 URL
  
  3、用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行
  
  4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
 
3、存储型 XSS 攻击
 
   又叫持久型 XSS，顾名思义，黑客将恶意 JavaScript 脚本长期保存在服务端数据库中，用户一旦访问相关页面数据，恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等
   
  实现步骤
  
   1、攻击者将恶意代码提交到目标网站的数据库中
   
   2、用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
   
   3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
   
   4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作 

几种 XSS 攻击类型的区别
 
  1、反射型的 XSS 的恶意脚本存在 URL 里，存储型 XSS 的恶意代码存在数据库里
 
  2、反射型 XSS 攻击常见于通过 URL 传递参数的功能，如网站搜索、跳转等
 
  3、存储型XSS攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等
 
  4、而基于 DOM 的 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，其他两种 XSS 都属于服务端的安全漏洞

XSS 防范措施
 
 XSS 的攻击主要有两大步骤
 
  1、攻击者提交恶意代码
  
  2、浏览器执行恶意代码
  
 XSS 的防范措施主要有以下方面
 
  1、输入过滤
  
    在用户提交时，由前端过滤输入，然后提交到后端，这种方法不可行，因为攻击者可能绕过前端过滤，直接构造请求，提交恶意代码
  
  2、改成纯前端渲染，把代码和数据分隔开  【 预防存储型和反射型 XSS 攻击 】
  
  3、对 HTML 做充分转义  【 预防存储型和反射型 XSS 攻击 】
  
  4、DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了，所以
  
    1、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等
    
    2、如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患
    
    3、DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，尽量避免
    
    4、使用 W3C 提出的 CSP (Content Security Policy，内容安全策略)，定义域名白名单
    
    5、设置 Cookie 的 HttpOnly 属性，禁止 JavaScript 读取 cookie
    
    6、使用验证码，防止脚本冒充用户提交危险操作

CSP - 内容安全策略

csp 是防 XSS 等攻击的利器
 
CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置
 
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机
 
CSP 的使用方式
 
  1、在 HTTP Header 上使用（首选）
   
   "Content-Security-Policy:" 策略
   "Content-Security-Policy-Report-Only:" 策略
   
  2、在 HTML 上使用 
  
    <meta http-equiv="content-security-policy" content="策略">
    <meta http-equiv="content-security-policy-report-only" content="策略">