前端复习企划10-Web安全

Web安全

XSS

XSS概念及攻击手段

XSS 简单点来说，中文名为跨站脚本, 是发生在目标用户的浏览器层面上的，简单理解就是：攻击者想尽一切办法将可以执行的代码注入到网页中。重点在脚本上。

可以分为两种类型：持久型和非持久型。

持久型就是攻击的代码被服务端写入进数据库中。

比如在一些论坛的评论中，写script标签加alert语句，如果前后端没有做好防御的话，这段评论就会被存储到数据库中，这样每个打开该页面的用户都会被攻击到。
非持久型一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。

如何防范XSS攻击

转义字符

转义输入输出的内容，对于引号、尖括号、斜杠进行转义。

CSP白名单

明确告诉浏览器哪些外部资源可以加载和执行。

通过两种方式来开启 CSP：

设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">

CSRF

概念及攻击手段

CSRF 中文名为跨站请求伪造。

CSRF攻击的本质在于利用用户的身份，执行非本意的操作。重点在于：CSRF的请求是跨域且伪造的。

跨站请求伪造的攻击是攻击者通过一些技术手段欺骗用户的浏览器去访问用户曾经认证过的网站并执行一些操作（如发送邮件、发消息、甚至财产操作如转账和购买商品等）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web登录身份认证的一个漏洞：简单的身份认证只能保证请求来自用户的浏览器，但不能识别请求是用户自愿发出的。

如何防范

可以遵循以下几种规则：

Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie
阻止第三方网站请求接口
请求时附带验证信息，比如验证码或者 Token

对Cookie设置SameSite属性

该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

验证Referer

可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

利用Token

服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

点击劫持

概念

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。

防范措施

设置HTTP头：X-FRAME-OPTIONS

这个 HTTP 响应头就是为了防御用 iframe 嵌套的点击劫持攻击。

该响应头有三个值可选，分别是

DENY，表示页面不允许通过 iframe 的方式展示
SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示
ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示

JS 防御

对于某些远古浏览器来说，并不能支持上面的这种方式，那我们只有通过 JS 的方式来防御点击劫持了。

当通过 iframe 的方式加载页面时，攻击者的网页直接不显示所有内容了。

<head>
  <style id="click-jack">
    html {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    if (self == top) {
      var style = document.getElementById('click-jack')
      document.body.removeChild(style)
    } else {
      top.location = self.location
    }
  </script>
</body>