在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施-Toy模板网

这篇具有很好参考价值的文章主要介绍了在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

随着互联网的发展，Web应用程序越来越普及，但是Web安全问题也随之增加。前端开发者作为Web应用程序的构建者之一，需要了解和掌握Web安全的基本知识和解决方案。本文将介绍前端开发者必须知道的Web安全问题和防范措施。

一、XSS攻击

XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、VBScript、ActiveX、Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

XSS攻类型：

1、反射型XSS

当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web服务器将注入一个脚本，比如一个错误信息、搜索结果等，未进行过滤直接返回到用户的浏览器上。

攻击原理

攻击者构造出特殊的url，其中包含恶意代码。
用户打开带有恶意代码的url时，网站服务端将恶意代码从url取出，拼接在HTML中返回给用户。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

2、DOM型XSS

DOM 型 XSS 攻击，实际上就是前端 JavaScript 代码不够严谨，把不可信的内容插入到了页面。在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心，不要把不可信的数据作为 HTML 插到页面上，尽量使用 .innerText、.textContent、.setAttribute() 等。

攻击原理

攻击者构造出特殊数据，其中包含恶意代码。
用户浏览器执行了恶意代码。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

3、存储型XSS

恶意脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS更大。存储型XSS攻击的原因仍然是没有做好数据过滤：前端提交数据至服务端时，没有做好过滤；服务端在接受到数据时，在存储之前，没有做过滤；前端从服务端请求到数据，没有过滤输出。

攻击原理

攻击者将恶意代码提交到目标网站的数据库中。
用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

防范措施

输入检查和过滤：对所有用户输入进行严格的检查和过滤，防止恶意代码注入。这包括对表单输入、URL参数、Cookie等进行检查。确保不允许直接在页面上输出用户提交的数据，特别是在HTML中，应该对特殊字符进行转义。
使用POST代替GET：因为GET请求会将数据放在URL中，容易被恶意用户利用来执行XSS攻击。而POST请求则将数据放在请求体中，更安全。
避免直接在Cookie中泄露用户隐私：比如email、密码等。其次通过使cookie和系统ip绑定来降低cookie泄露后的危险。
验证码：防止脚本冒充用户提交危险操作。
使用HTTPOnly标记来限制cookie的访问，防止cookie被盗用。
当用户的登录凭证存储于服务器的 session 中，而在浏览器中是以 cookie 的形式存储的。很多XSS攻击目标都是窃取用户cookie伪造身份认证。可以通过在 cookie 中设置 HttpOnly 属性，js脚本将无法读取到 cookie 信息。
```
cookies.set(name, value, {
    httpOnly: true // 默认为 true
})
```
内容安全策略（CSP）：防XSS等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。
- 通过 HTTP 头信息的Content-Security-Policy的字段
```
//该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
Content-Security-Policy: script-src 'self' https://apis.example.com
```
- 通过网页的标签
```
//该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.example.com">
```

二、CSRF攻击

跨站请求伪造（CSRF）是一种黑客攻击技术，攻击者通过伪装来自受信任的用户的请求来攻击受信任的网站，利用网站对于用户网页浏览器的信任，挟持用户当前已登陆的Web应用程序，去执行并非用户本意的操作。

攻击原理：

用户登录、浏览并信任正规网站WebA，同时，WebA通过用户的验证并在用户的浏览器中产生Cookie。
攻击者WebB通过在WebA中添加图片链接等方式诱导用户User访问网站WebB。
在用户User被诱导访问WebB后，WebB会利用用户User的浏览器访问第三方网站WebA，并发出操作请求。
用户User的浏览器根据WebB的要求，带着步骤一中产生的Cookie访问WebA。

防范措施：

使用随机的Token来验证用户请求的合法性。
服务端给用户生成一个token，加密后传递给用户，用户在提交请求时，需要携带这个token，服务端验证token是否正确。
同源检测：阻止不同域的访问
请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。
涉及到数据修改操作严格使用 post 请求而不是 get 请求
get 的 URL 会被放在浏览器历史和 WEB 服务器日志里面，如果把关键数据放在 get 里面，被人偷窥了浏览器，会造成数据泄露。而 post 日志没有记录，也不会保留 URL，只要数据库服务器不被入侵，基本还是安全的。
使用验证码
强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 CSRF，但是用户体验相对差。

三、点击劫持

点击劫持（click hijacking）也称为 UI 覆盖攻击。它通过一些内容（如游戏）误导被攻击者点击，虽然被攻击者点击的是他所看到的网页，但其实所点击的是另一个置于原网页上面的透明页面。

攻击原理：

攻击者构建了一个非常有吸引力的网页
将被攻击的页面放置在当前页面的 iframe 中
使用样式将 iframe 叠加到非常有吸引力内容的上方
将iframe设置为100%透明
用户在不知情的情况下点击按钮，触发执行一些其他命令。

防范措施：

使用X-Frame-Options防止网页被iframe：X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击。
- DENY // 拒绝任何域加载
- SAMEORIGIN // 允许同源域下加载
- ALLOW-FROM // 可以定义允许frame加载的页面地址

判断当前页面是否被嵌入到 iframe 中。

if(top.location != self.location){
  top.location = window.location;
}

四、项目中如何预防安全问题

强化安全意识：在项目启动阶段，就需要强调安全问题的重要性，强化所有项目成员的安全意识。让每个人都明白自己在保障项目安全方面的责任，并积极参与到安全工作中来。
建立安全管理制度：制定一套完善的安全管理制度，明确各项安全管理要求和标准。包括安全培训制度、安全操作规程、安全检查制度等，确保每个环节都得到有效管理。
实施安全性设计：从设计阶段开始，就需要注意安全性设计。遵循安全性设计原则和标准，考虑可能出现的攻击和漏洞，采取相应的防范措施。同时，需要加强数据加密、访问控制、权限管理等关键环节的安全性设计。
加强代码审查：建立代码审查机制，确保代码质量和安全性。通过定期的代码审查，可以发现并纠正潜在的安全漏洞和错误。同时，需要关注最新的安全漏洞和补丁，及时修复和升级系统。
实施安全培训：对项目成员进行安全培训，提高他们的安全意识和技能。培训内容包括安全基础知识、安全漏洞防范、应急响应等。定期组织安全培训和演练，增强项目成员的安全意识和应对能力。
建立安全测试机制：在项目开发过程中，建立安全测试机制。包括安全性测试、可靠性测试、性能测试等。通过模拟各种攻击场景和漏洞利用方式，发现并修复潜在的安全问题。同时，需要关注最新的漏洞利用方式和攻击手段，及时调整测试策略。
做好数据保护：保护项目中的敏感数据是预防安全问题的关键之一。采取加密、访问控制、数据备份等措施，确保数据的机密性和完整性。同时，需要关注数据的安全审计和监控，及时发现并应对数据安全事件。
定期审查和更新：定期审查和更新项目的安全策略和流程，以适应新的安全威胁和业务需求。同时，需要关注最新的安全漏洞和补丁，及时修复和升级系统。文章来源地址https://www.toymoban.com/news/detail-809545.html