虽然是一名前端工程师，但是身处网络安全行业，日常接受着“没有网络安全就没有国家安全”的熏陶，web安全不能不知晓。
首先，餐前甜点，CIA三元组是什么？
- CIA三元组：机密性，完整性，可用性。
CIA三元组是信息安全的基本原则，保证信息的机密性，完整性，可用性是贯穿整个信息安全的基本思路。
机密性（Confidentiality）是为了防止未授权的用户访问数据。信息安全工作者使用一些加密或者设置权限的方式来对传输、存储的数据进行保护。黑客针对机密性的破坏主要使用窃取密码文件、社会工程学、嗅探、肩窥等方法。
完整性（Integrity）是为了防止未授权的用户修改数据。完整性依赖于机密性，没有机密性也就没有完整性。黑客针对完整性的破坏主要有病毒、应用程序错误、逻辑炸弹，以及被授权用户的非授权操作。
可用性（Availability）是保证经过授权的客户能及时准确的不间断的访问数据。可用性依赖于机密性和完整性。针对可用性的破坏主要有设备故障、软件错误、包括一些不可抗力如洪水、火灾等。在企业中，造成可用性破坏的最主要原因是人为错误，疏忽或失职造成的如意外删除文件、私自分配资源、安全策略配置错误等。
正式开始了哈~
常见的前端web安全主要关注XSS攻击和CSRF攻击。
XSS攻击是什么
XSS 攻击(Cross-Site Scripting，跨站脚本攻击)
XSS攻击是怎么产生的
黑客在你的浏览器中插入一段恶意 JavaScript 脚本，窃取你的隐私信息、冒充你的身份进行操作。这就是 XSS 攻击(Cross-Site Scripting，跨站脚本攻击)
因为浏览器无法区分脚本是被恶意注入的还是正常的内容，它都会执行，况且 HTML 非常灵活，可以在任何时候对它进行修改。
XSS攻击如何防御
- 一切用户输入皆不可信，在输出时进行验证
- 将 HTML 元素内容、属性以及 URL 请求参数、CSS 值进行编码
- 当编码影响业务时，使用白名单规则进行检测和过滤
- 使用 W3C 提出的 CSP (Content Security Policy，内容安全策略)，定义域名白名单
- 设置 Cookie 的 HttpOnly 属性
CSRF攻击是什么
CSRF （ Cross-site request forgery，跨站请求伪造）：黑客引诱用户打开黑客的网站，利用用户的登陆状态发起跨站请求。白话就是说攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证， 达到冒充用户对被攻击的网站执行某项操作的目的。
CSRF攻击是怎么产生的
- 最容易实现的是 Get 请求，一般进入黑客网站后，可以通过设置 img的 src 属性来自动发起请求
- 在黑客的网站中，构造隐藏表单来自动发起 Post 请求
- 通过引诱链接诱惑用户点击触发请求，利用 a 标签的 href。
CSRF攻击如何防御
针对实际情况，设置关键 Cookie 的 SameSite 属性为 Strict 或 Lax服务端验证请求来源站点(Referer、Origin)使用 CSRF Token，服务端随机生成返回给浏览器的 Token，每一次请求都会携带不同的 CSRF Token加入二次验证(独立的支付密码)
XSS和CSRF的区别是什么
CSRF 攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。
CSRF 攻击成本也比 XSS 低，用户每天都要访问大量网页，无法确认每一个网页的合法性， 从用户角度来说，无法彻底防止 CSRF 攻击。
