【前端学习笔记】前端安全详解

内容皆来自：美团技术团队的三篇文章，可以自行搜索。

1，XSS攻击，跨站脚本攻击

代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

通常页面中包含的用户输入内容都在固定的容器或者属性内，以文本的形式展示。攻击者利用这些页面的用户输入片段，拼接特殊格式的字符串，突破原有位置的限制，形成了代码片段。攻击者通过在目标网站上注入脚本，使之在用户的浏览器上运行，从而引发潜在风险。

XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。

在部分情况下，由于输入的限制，注入的恶意脚本比较短。但可以通过引入外部的脚本，并由浏览器执行，来完成比较复杂的攻击策略。

举例说明：

1，特殊的 HTML 属性、JavaScript API

当浏览器请求 http://xxx/search?keyword= ">，拼接到 HTML 中返回给浏览器。形成了如下的 HTML：

<input type="text" value=""><script>alert('XSS');</script>">
<button>搜索</button>
<div>
  您搜索的关键词是："><script>alert('XSS');</script>
</div>

通过 HTML 转义，可以防止 XSS 攻击。

escapeHTML() 按照如下规则进行转义：

|字符|转义后的字符 | |-|-| |&|&amp;| |<|&lt;| |>|&gt;| |"|&quot;| |'|&#x27;| |/|&#x2F;|
2，javacript开头的字段

http://xxx/?redirect_to=javascript:alert(‘XSS’)

<a href="<%= escapeHTML(getParameter("redirect_to")) %>">跳转...</a>

代码不会立即执行，但一旦用户点击 a 标签时，浏览器会就会弹出“XSS”。

做了 HTML 转义，并不等于高枕无忧。

对于链接跳转，如 <a href=“xxx” 或 location.href=“xxx”，要检验其内容。

禁止以 javascript: 开头的链接，和其他非法的 scheme。

等等。

XSS攻击有些注入方法：

• 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
• 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
• 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
• 在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
• 在 onload、onerror、onclick 等事件中，注入不受控制代码。
• 在 style 属性和标签中，包含类似 background-image:url(“javascript:…”); 的代码
• 在 style 属性和标签中，包含类似 expression(…) 的 CSS 表达式代码（新版本浏览器已经可以防范）。
  在处理输入时，以下内容都不可信：
• 来自用户的 UGC 信息
• 来自第三方的链接
• URL 参数
• POST 参数
• Referer （可能来自不可信的来源）
• Cookie （可能来自其他子域注入）

XSS 分类

根据攻击的来源，XSS 攻击可分为 存储型、反射型和 DOM 型 三种。

存储型 XSS

存储型 XSS 的攻击步骤：

• 攻击者将恶意代码提交到目标网站的数据库中。
• 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
• 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
• 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
• 这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

反射型 XSS

反射型 XSS 的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。

用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。

用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。

由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。

DOM 型 XSS

DOM 型 XSS 的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。

用户打开带有恶意代码的 URL。

用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。

恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

XSS 攻击的预防

XSS 攻击有两大要素：

• 攻击者提交恶意代码。
• 浏览器执行恶意代码。
  输入过滤
  输入侧过滤能够在某些情况下解决特定的 XSS 问题，但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。当然，对于明确的输入类型，例如数字、URL、电话号码、邮件地址等等内容，进行输入过滤还是必要的。
  既然输入过滤并非完全可靠，我们就要通过“防止浏览器执行恶意代码”来防范 XSS。这部分分为两类：
• 防止 HTML 中出现注入。
• 防止 JavaScript 执行时，执行恶意代码。
  预防这两种漏洞，有两种常见做法：
• 改成纯前端渲染，把代码和数据分隔开。
• 对 HTML 做充分转义。
  预防 DOM 型 XSS 攻击
  DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了
  在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
  如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。
  其他解决方法：
  1， 输入内容长度限制
  2， http-only cookie：禁止JavaScript读取某些敏感cookie；
  3， 验证码
  4*，利用模板引擎* 开启模板引擎自带的 HTML 转义功能 。例如： 在 ejs 中，尽量使用 <%= data %> 而不是 <%- data %>； 在 doT.js 中，尽量使用 {{! data } 而不是 {{= data }； 在 FreeMarker 中，确保引擎版本高于 2.3.24，并且选择正确的 freemarker.core.OutputFormat。
  5， 避免内联事件 尽量不要使用 onLoad=“onload(’{{data}}’)”、onClick=“go(’{{action}}’)” 这种拼接内联事件的写法。在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。
  6， 避免拼接 HTML 前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。或者采用比较成熟的渲染框架，如 Vue/React 等。
  7， 时刻保持警惕 在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范。
  8， 增加攻击难度 ，降低攻击后果 通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果。
  9， 主动检测和发现 可使用 XSS 攻击字符串和自动扫描 工具 寻找潜在的 XSS 漏洞。

2， CSRF攻击

跨站请求伪造。挟制用户在当前已登录的web应用程序上执行非本意的操作的攻击方法。

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

一个典型的CSRF攻击有着如下的流程：

• 受害者登录a.com ，并保留了登录凭证（Cookie）。 攻击者引诱受害者访问了b.com 。
• b.com 向 a.com 发送了一个请求： a.com/act=xx。浏览器会…
• a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
• a.com以受害者的名义执行了act=xx。
• 攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

几种常见的攻击类型

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就会收到包含受害者登录信息的一次跨域请求。

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上面。

链接类型的CSRF

链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接，或者以广告的形式诱导用户中招，攻击者通常会以比较夸张的词语诱骗用户点击，例如：

<a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
  重磅消息！！
  <a/>

复制代码由于之前用户登录了信任的网站A，并且保存登录状态，只要用户主动访问上面的这个 PHP 页面，则表示攻击成功。

CSRF的特点

攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。

攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。

整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”。

跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪。

防护措施

1，同源策略

在HTTP协议中，每一个异步请求都会携带两个Header，用于标记来源域名：

Origin Header

Referer Header

2，CSRF Token

服务器通过校验请求是否携带正确的Token，来把正常的请求和攻击的请求区分开，也可以防范CSRF的攻击。使用 Session储存 。

分三步：

1.将CSRF Token输出到页面中

2，页面提交请求携带token

3，服务器验证token是否正确

3，双重Cookie验证

双重Cookie采用以下流程：

在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串（例如csrfcookie=v8g9e4ksfhw）。

在前端向后端发起请求时，取出Cookie，并添加到URL的参数中（接上例POST)

https://www.a.com/comment?csrfcookie=v8g9e4ksfhw

后端接口验证Cookie中的字段与URL参数中的字段是否一致，不一致则拒绝。

4，Samesite Cookie

防护策略：

• CSRF自动防御策略：同源检测（Origin 和 Referer 验证）。
• CSRF主动防御措施：Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。
• 保证页面的幂等性，后端接口不要在GET页面中做用户操作。

作者：美团技术团队

链接： https://juejin.im/post/5bc009996fb9a05d0a055192

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3，SQL注入

通过把 SQL 命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

防范方法：

• 严格限制Web应用的 数据库的操作权限 ，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害。
• 检查输入的数据是否具有所期望的数据格式，严格 限制变量的类型 ，例如使用regexp包进行一些匹配处理，或者使用strconv包对字符串转化成其他基本类型的数据进行判断。
• 对进入数据库的特殊字符（’"\尖括号&*;等）进行转义处理，或编码转换。Go的text/template包里面的HTMLEscapeString函数可以对字符串进行转义处理。
• 所有的查询语句建议使用数据库提供的 参数化查询接口 ，参数化的语句使用参数而不是将用户输入变量嵌入到SQL语句中，即不要直接拼接SQL语句。例如使用database/sql里面的查询函数Prepare和Query，或者Exec(query string, args …interface{})。
• 在应用发布之前建议使用专业的 SQL注入检测工具 进行检测，以及时修补被发现的SQL注入漏洞。网上有很多这方面的开源工具，例如sqlmap、SQLninja等。
• 避免网站打印出SQL错误信息 ，比如类型错误、字段不匹配等，把代码里的SQL语句暴露出来，以防止攻击者利用这些错误信息进行SQL注入。

浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性。