前端面试被问到网络安全怎么办？7 种前端安全攻击大解析！
2025-02-23
最近有个同学面试的时候被问到了特别多 网络安全 相关的问题：
对于我们很多开发者来说，写代码一般都会只考虑业务，对于安全方面的问题确实不会过多考虑。所以一旦面试被问到安全相关的问题，那么不知道如何回答了。
所以说，咱们今天这篇文章就专门来说一下：前端常见的安全攻击方式、原理、以及如何防护！
01：跨站脚本攻击（XSS）
跨站点脚本攻击(XSS)是最常见的网络共计之一。在 XSS 攻击中，攻击者将恶意客户端脚本注入受信任的网站，然后在用户的浏览器中执行。
XSS 攻击的原因是什么？
XSS 攻击的主要原因之一是在将用户生成的输入呈现在页面上。例如，攻击者可能能够使用 JavaScript 注入恶意代码，并且该代码可以在你的应用呈现 DOM 时执行。
此恶意代码最终可能会访问并窃取 用户Token、cookie 以及浏览器中存储的其他敏感信息。
如何防止 XSS 攻击？
防止 XSS 攻击并不困难。
可以从三个部分进行思考
- 确保验证和清理允许用户在必要时插入数据和编码输出的表单、输入字段。
- 实施内容安全策略 (CSP) 以限制加载的资源和脚本。
- 使用 Vue 和 React 等框架，它们具有针对跨站点脚本攻击的内置预防机制。
02：SQL注入
SQL 注入是一种非常危险的攻击方式，并且已经存在很长一段时间了。攻击操纵数据库查询以获得未经授权的数据库访问，以执行恶意活动，例如损坏数据库或窃取敏感数据。
SQL注入的原理是什么？
简而言之，SQL 注入让攻击者可以从前端执行 SQL 查询。这可能会导致破坏性操作，从而获取你数据库中的信息！
如何防止 SQL 注入？
防止 SQL 注入的策略分为两部分：
- 首先，你需要确保前端输入字段经过正确验证和处理。防止用户在输入的字段中插入恶意代码。
- 验证前端后，清理后端收到的数据也很重要。后端不要信任前端输入的任何数据，因为任何人都可以获取你的 API 端点并开始发送恶意输入。因此，后端也需要进行验证。此外，利用Burp Scanner 、 sqlmap、jSQL Injection和Invicti等工具来检测应用程序中潜在的 SQL 攻击和相关漏洞。
03：跨站请求伪造(CSRF)
跨站点请求伪造 (CSRF) 是一种前端安全攻击，它通过伪造的形式来执行 你原本不希望执行的操作。
跨站请求伪造的原理是什么？
通过伪装的表单、链接或按钮，用于更改用户凭据、删除或操纵敏感数据。
如何防止 跨站请求伪造(CSRF)
防止 CSRF 攻击的最简单方法之一是使用从服务器生成的 CSRF 令牌。你可以与客户端共享这些令牌，以便后端可以在收到的每个请求中检查令牌并验证其真实性。因此，如果客户端无法提供准确的令牌，你的服务器可以拒绝请求的操作。
此外，可以利用 .NET、Joomla、Spring (Spring Security) 和 Ruby on Rails 等框架的内置 CSRF 支持来防止此类攻击。
04：中间人攻击
中间人 (MitM) 攻击迫使攻击者拦截和操纵在两方之间传输的信息
中间人攻击的原理是什么？
当攻击者利用不安全的通信通道（通常通过公共 WiFi）时，就会发生这些攻击。这种攻击的受害者不会觉得自己受到了攻击，因为他们认为自己正在与服务器进行完全正常且安全的对话，而他们共享的信息在此过程中遭到监视或更改。
例如：你连接了一个 wifi 原本请求 lgdsunday.club 的地址，但是却被这个 wifi 拦截代理（有点像 devServer 代理请求的感觉）
如何防止中间人攻击
主要有三步：
- 使用安全的互联网连接并注销不再使用的应用程序。
- 不要连接到你不知道的网络。例如，不要连接到咖啡馆提供的免费 WiFi。
- 使用 HTTPS 和 TLS 等安全通信协议对传输中的所有数据进行加密。
05：点击劫持
点击劫持（又名 — UI 纠正攻击）是一种欺骗机制，它会诱骗用户点击与他们认为完全不同的内容。
点击劫持的原理是什么？
如图所示，它将隐藏元素覆盖在网站上合法可点击组件的顶部。在这种情况下，用户实际上点击了一个无意的元素，这可能会在未经他们同意的情况下触发攻击者的期望操作（比如转账）等意外操作。
如何防止点击劫持
为了减轻点击劫持攻击的潜在风险，可以使用的一种机制是使用X-Frame-Options标头，它可以确保你的网站不会嵌入到其他网站或 IFrame 中。
06：安全配置错误攻击
应用程序的安全配置错误问题通常是由不正确的设置、默认值和过时的配置引起的，这些问题可能导致攻击者利用的漏洞进行攻击。
安全配置错误攻击的原理是什么？
例如，在某些情况下，启用目录列表可能会泄露敏感信息，密码和密钥不会更新并保留为默认值，并且会暴露错误处理信息。
如何防止安全配置错误攻击
- 始终确保更新使用的服务的默认密钥和密码，并定期执行配置审核。
- 定期检查安全设置还可以帮助降低可能存在安全配置错误或过时配置漏洞的风险。
- 对于具有不同凭据的类似配置的生产、开发和测试环境进行自动化构建和部署流程。
07：依赖性利用
前端应用程序由许多第三方库组成，用于使开发人员的工作更加轻松。但开发人员普遍忽视的是，这些库有时可能存在安全漏洞。
依赖性利用的原理是什么？
例如，xxxxx 这个依赖库存在一个巨大的漏洞，允许攻击者执行远程代码。因此，任何使用 xxxxx 的应用程序都成为此攻击的受害者。
我印象中有个库之前出现过 主动作恶 的情况，但是具体忘记是哪个库了。有知道的小伙伴，可以给我发消息哈
如何防止依赖性利用
这个没有太好的防范方式，只能是使用广泛使用且维护得当的可靠且经过社区测试的库。
除此之外，最好可以定期审核、依赖项更新和使用漏洞扫描工具进行检查。
今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。
网络安全学习路线&学习资源
网络安全的知识多而杂，怎么科学合理安排？
下面给大家总结了一套适用于网安零基础的学习路线，应届生和转行人员都适用，学完保底6k！就算你底子差，如果能趁着网安良好的发展势头不断学习，日后跳槽大厂、拿到百万年薪也不是不可能！
初级网工
1、网络安全理论知识（2天）
①了解行业相关背景，前景，确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。（非常重要）
2、渗透测试基础（一周）
①渗透测试的流程、分类、标准
②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等
3、操作系统基础（一周）
①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全（系统入侵排查/系统加固基础）
4、计算机网络基础（一周）
①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析（HTTP、TCP/IP、ARP等）
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现
5、数据库基础操作（2天）
①数据库基础
②SQL语言基础
③数据库安全加固
6、Web渗透（1周）
①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）
恭喜你，如果学到这里，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web 渗透、安全服务、安全分析等岗位；如果等保模块学的好，还可以从事等保工程师。薪资区间6k-15k
到此为止，大概1个月的时间。你已经成为了一名“脚本小子”。那么你还想往下探索吗？
【“脚本小子”成长进阶资源领取】
7、脚本编程（初级/中级/高级）
在网络安全领域。是否具备编程能力是“脚本小子”和真正黑客的本质区别。在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中，想要高效地使用自制的脚本工具来实现各种目的，更是需要拥有编程能力.
零基础入门，建议选择脚本语言Python/PHP/Go/Java中的一种，对常用库进行编程学习； 搭建开发环境和选择IDE,PHP环境推荐Wamp和XAMPP， IDE强烈推荐Sublime； ·Python编程学习，学习内容包含：语法、正则、文件、 网络、多线程等常用库，推荐《Python核心编程》，不要看完； ·用Python编写漏洞的exp,然后写一个简单的网络爬虫； ·PHP基本语法学习并书写一个简单的博客系统； 熟悉MVC架构，并试着学习一个PHP框架或者Python框架 (可选)； ·了解Bootstrap的布局或者CSS。
8、超级网工
这部分内容对零基础的同学来说还比较遥远，就不展开细说了，贴一个大概的路线。感兴趣的童鞋可以研究一下，不懂得地方可以【点这里】加我耗油，跟我学习交流一下。
网络安全工程师企业级学习路线
如图片过大被平台压缩导致看不清的话，可以【点这里】加我耗油发给你，大家也可以一起学习交流一下。
一些我自己买的、其他平台白嫖不到的视频教程：
需要的话可以扫描下方卡片加我耗油发给你（都是无偿分享的），大家也可以一起学习交流一下。
结语
网络安全产业就像一个江湖，各色人等聚集。相对于欧美国家基础扎实（懂加密、会防护、能挖洞、擅工程）的众多名门正派，我国的人才更多的属于旁门左道（很多白帽子可能会不服气），因此在未来的人才培养和建设上，需要调整结构，鼓励更多的人去做“正向”的、结合“业务”与“数据”、“自动化”的“体系、建设”，才能解人才之渴，真正的为社会全面互联网化提供安全保障。
特别声明：
此教程为纯技术分享！本书的目的决不是为那些怀有不良动机的人提供及技术支持！也不承担因为技术被滥用所产生的连带责任！本书的目的在于最大限度地唤醒大家对网络安全的重视，并采取相应的安全措施，从而减少由网络安全而带来的经济损失！！！