开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

最近在面试的过程中，遇到了一类面试题，前端安全了解吗？我有时候会很疑惑，作为前端开发人员，真的会涉及到网络安全相关的配置和处理吗?不过，为了通过面试，也了解下自己的技术壁垒，踏踏实实的来学习下网络安全相关的知识。

一、简介

网络安全（英语：network security）包含网络设备安全、网络信息安全、网络软件安全。

黑客通过基于网络的入侵来达到窃取敏感信息的目的，也有人以基于网络的攻击见长，被人收买通过网络来攻击商业竞争对手企业，造成网络企业无法正常营运，网络安全就是为了防范这种信息盗窃和商业竞争攻击所采取的措施。

随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。

二 、web安全三要素

机密性：通俗点说就是数据内容不能被泄露。通常我们使用加密算法对数据进行加密

完整性：内容完整，没有被篡改。

可用性：保护资源“随需而得”

web安全来说，主要是 保护服务器及其数据的安全、保护服务器和用户之间传递的信息的安全、保护web应用客户端及其环境安全这三个方面。

三、前端常见的网络安全问题有哪些

• 跨站脚本攻击 XSS：本质是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些代码，从而窃取用户信息，对用户进行钓鱼欺诈，甚至发起攻击
• 跨站请求伪造 CSRF：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
• ClickJacking（点击劫持）：其实是一种视觉的欺诈
  • 一种方式是：击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。
  • 攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义。
• HSTS（HTTP严格传输安全）：HTTP严格传输安全协议 -* CND劫持*：DNS服务器(DNS解析各个步骤)被篡改，修改了域名解析的结果，使得访问到的不是预期的ip
• iframe安全
  • 嵌入第三方 iframe 会有很多不可控的问题，同时当第三方 iframe 出现问题或是被劫持之后，也会诱发安全性问题
  • 禁止自己的 iframe 中的链接外部网站的JS

四、总结

前端需要注意的网络完全内容主要是以上部分，如果大家有其他的安全问题，欢迎交流。

后续我们针对不同的安全问题进行详细的讲解与防御。

构建安全的网络环境人人有责。😊