前端开发之安全防范

程序员文章站 2022-07-07 21:33:26

...

前端开发之安全防范

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

CSRF（跨站请求伪造）

原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。
防御方法
- 规则
  - Get 请求不对数据进行修改
  - 不让第三方网站访问到用户 Cookie
    - 可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，但是该属性目前并不是所有浏览器都兼容。
  - 阻止第三方网站请求接口
    - 通过验证 Referer 来判断该请求是否为第三方网站发起的。
  - 请求时附带验证信息，比如验证码或者 Token
    - 服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

点击劫持

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

防御方法

X-FRAME-OPTIONS（一个 HTTP 响应头）
- 该响应头有三个值可选，分别是DENY ，表示页面不允许通过 iframe 的方式展示。
- SAMEORIGIN ，表示页面可以在相同域名下通过 iframe 的方式展示。
- ALLOW-FROM ，表示页面可以在指定来源的 iframe 中展示。

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>

中间人攻击

中间人攻击定义
- 攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。
- 攻击者不仅能获得双方的通信信息，还能修改通信信息。
- 通常来说不建议使用公共的 Wi-Fi，因为很可能就会发生中间人攻击的情况。
攻击防御
- 只需要增加一个安全通道来传输信息。
- HTTPS 就可以用来防御中间人攻击，但是如果你没有完全关闭 HTTP 访问的话，攻击方可以通过某些方式将 HTTPS 降级为 HTTP 从而实现中间人攻击。

前端开发之安全防范

前端开发之安全防范

XSS

CSRF（跨站请求伪造）

点击劫持

中间人攻击

python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）

Android开发笔记之:如何安全中止一个自定义线程Thread的方法

详解webpack4.x之搭建前端开发环境

webpack 4.x之搭建前端开发环境

Web前端开发入门技术之网页制作三要素

VS开发程序用户防范安全问题

servlet开发（二）之servlet的线程安全问题

python 之前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

python 之前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

前端开发之安全防范

前端开发之安全防范

XSS

CSRF（跨站请求伪造）

点击劫持

中间人攻击

python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

Android开发笔记之:如何安全中止一个自定义线程Thread的方法

详解webpack4.x之搭建前端开发环境

webpack 4.x之搭建前端开发环境

Web前端开发入门技术之网页制作三要素

VS开发程序用户防范安全问题

servlet开发（二）之servlet的线程安全问题

python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）

python 之前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

python 之前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）