笔记前端需要了解的安全防范知识点

最新推荐文章于 2024-10-09 23:31:03 发布

ygx_work

最新推荐文章于 2024-10-09 23:31:03 发布

阅读量215

点赞数

分类专栏：浏览器文章标签：前端面试

本文链接：https://blog.csdn.net/ygx_work/article/details/105875922

版权

浏览器专栏收录该内容

10 篇文章 0 订阅

订阅专栏

XSS 攻击

XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。XSS 可以分为多种类型，但是总体上我认为分为两类：持久型和非持久型。
持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。
非持久型相比于前者危害就小的多了，一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。
防御方法：

转义字符
首先，对于用户的输入应该是永远不信任的。最普遍的做法就是转义输入输出的内容，对于引号、尖括号、斜杠进行转义。

function escape(str) {
        str = str.replace(/&/g, '&amp;')
        str = str.replace(/</g, '&lt;')
        str = str.replace(/>/g, '&gt;')
        str = str.replace(/"/g, '&quto;')
        str = str.replace(/'/g, '&#39;')
        str = str.replace(/`/g, '&#96;')
        str = str.replace(/\//g, '&#x2F;')
        return str
    }

CSP
CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
可以通过两种方式来开启 CSP：设置 HTTP Header 中的 Content-Security-Policy；设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">

CSRF 攻击

CSRF 中文名为跨站请求伪造。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。
防御方法：
防范 CSRF 攻击可以遵循以下几种规则：Get 请求不对数据进行修改；不让第三方网站；问到用户 Cookie；阻止第三方网站请求接口；请求时附带验证信息，比如验证码或者 Token。

SameSite
可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。
验证 Referer
对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。
Token
服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

点击劫持

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。
对于这种攻击方式，推荐防御的方法有两种。
X-FRAME-OPTIONS
X-FRAME-OPTIONS 是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头就是为了防御用 iframe 嵌套的点击劫持攻击。
该响应头有三个值可选，分别是：DENY，表示页面不允许通过 iframe 的方式展示；SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示；ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示
JS 防御

<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>