前言
在大家的日常生活中很少遇到安全性的问题，在实际的编码过程中我们最常遇到的安全问题可能是这样的：在路由中不要轻易的去暴露出一些私密性的参数
安全问题七大类：
- 网络协议攻击： 这块主要包括 HTTP，HTTPS（证书过期，中间人劫持），DNS劫持等问题
- 跨站脚本攻击（XSS） ：这是最常见的前端安全问题之一。攻击者通过注入恶意的 JavaScript 脚本，企图破坏网站的功能或者窃取用户的数据。
- 跨站请求伪造（CSRF） ：在这种攻击中，攻击者诱使用户去请求一个他们并不期望的网站，以此来执行一些恶意的操作。
- 点击劫持：攻击者通过透明的元素或者弹窗，诱使用户在不知情的情况下点击一些链接或者按钮，以此来执行一些恶意的操作。
- 混合内容问题：如果一个使用 HTTPS 协议的网站中，包含了使用 HTTP 协议的资源（如图片、脚本等），可能会导致用户的数据被窃取。这是因为 HTTP 协议的数据传输不是加密的，攻击者可以通过监听网络传输，来窃取这些数据。
- 第三方库的安全问题：许多前端开发者在开发过程中，会使用一些第三方的库或者框架。如果这些库或者框架存在安全问题，或者被恶意修改，可能会引入一些安全风险。
- 不安全的数据存储：在前端开发中，有时需要在用户的浏览器中存储一些数据。如果这些数据包含敏感信息，如密码、Token等，并且存储方式不安全（如直接保存在localStorage等），可能会被攻击者窃取。
当然安全性问题肯定是不止这些的，但是今天我们也不是全讲这些，
今天我们主要讲：跨站脚本攻击，跨站请求伪造，第三方安全库问题，不安全的数据存储
跨站脚本攻击（XSS）
概念：
XSS（跨站脚本攻击）是一种常见的网络攻击手段。在这种攻击中，攻击者通过注入恶意的 JavaScript 脚本来攻击网站的用户
XSS 攻击主要有以下几种类型：
- 存储型 XSS 攻击：攻击者将恶意的 JavaScript 脚本存储在网站的服务器上（例如，在一个评论区中发布含有恶意脚本的评论）。当其他用户浏览到包含这些脚本的页面时，就会执行这些脚本。
- 反射型 XSS 攻击：在这种攻击中，攻击者会将恶意脚本包含在 URL 中。当用户点击这个 URL 时，恶意脚本会被网站的页面反射（即，直接在页面中输出），然后在用户的浏览器中执行。
- DOM 型 XSS 攻击： 这种攻击是通过修改页面的 DOM 结构，使得恶意脚本得以执行。
CSRF 攻击
概念：
CSRF（跨站请求伪造）是一种网络攻击手段，主要是攻击者利用用户已登录的身份，伪造用户去请求服务器。这种攻击方式可以诱导用户执行攻击者预设的操作，如修改密码、购买商品等。
假设一个场景：用户在一家银行的网站上登录了自己的账户。如果该网站存在 CSRF 漏洞，攻击者可以设置一个陷阱，比如在论坛中发帖附带一个链接，这个链接是银行网站的一个转账接口，而且指定了收款人和转账金额。如果用户点击了这个链接，那么银行网站可能会认为是用户自己发起的转账请求，从而进行转账。
这种攻击方法的关键在于，用户并不知道自己发起了这个请求，而服务器也无法分辨这个请求是不是用户本人意愿发起的，这就给攻击者留下了可乘之机。
CSRF 攻击有一定的局限性，它必须基于用户已经登录了目标网站，并且该网站有 CSRF 漏洞存在。此外，攻击者也不能预知 CSRF 攻击的具体结果，因为这取决于被攻击的网站的业务逻辑。
第三方库的安全问题
许多公司的业务代码架构治理都在解决这个问题。当我们一个迭代项目中依赖的包存在安全问题，或者这个包已经不推荐无人维护，或者这个包直接被恶意篡改（投毒），都会引入安全风险。
不安全的数据存储
在web开发中，不安全的数据存储可以引起许多安全问题。如果攻击者能够访问或者修改存储的数据，可能会泄露敏感信息，或者造成其他的安全问题。
- 使用安全的cookie设置：对于存储在 cookie 中的数据，应该使用 secure 和 HttpOnly 标志来保护它们。secure 标志可以确保 cookie 只通过 HTTPS 发送，HttpOnly 标志可以防止 JavaScript 访问 cookie。
- 敏感信息加密存储：对于敏感信息，如密码，应该进行哈希和加盐存储，而不是明文存储。哈希可以确保即使数据库被泄露，攻击者也无法直接获取到原始的密码。加盐可以进一步增加破解的难度。
- 避免在localStorage中存储敏感信息：localStorage 是持久性的，并且在同源的所有页面中都可访问。因此，如果你在 localStorage 中存储敏感信息，可能会有被 XSS 攻击窃取的风险。你应该避免在 localStorage 中存储敏感信息，或者至少对它们进行加密。
- 限制并监控数据的访问：应该限制谁可以访问存储的数据，以及他们可以进行的操作。对于敏感操作，如数据的修改和删除，应该进行记录和监控。
