跨站脚本攻击（XSS攻击）
原理：
跨站脚本攻击(Cross Site Script为了区别于CSS简称为XSS)指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的。
如果评论或者留言内容以 v-html 的形式嵌入到页面的话 ;这样无论是谁访问这个页面的时候控制台都会输出“Hey you are a fool fish!”
除了输入框用户数据 v-html形式嵌入页面的常见 还有 富文本编辑器 和 搜索高亮
解决方案:
- 对数据进行严格的输出编码，使得攻击者提供的数据不再被浏览器认为是脚本而被误执行;
例如<script>在进行HTML编码后变成了<script>或者处理标签开始和结束符号< >，而这段数据就会被浏览器认为只是一段普通的字符串，而不会被当做脚本执行了
前端代码安全扫描
通常代码中不允许出现明文的 服务器地址 用户名 密码等敏感信息
解决方案:
- 配置文件放在服务器端 通过http 请求获取相应内容
- 通过nginx 代理转发到对应的服务器
部署安全注意事项
1.使用强大的内容安全策略
完善的内容安全策略(CSP)是前端应用程序安全的基石。CSP是浏览器中引入的一种标准，用于检测和缓解某些类型的代码注入攻击，包括跨站点脚本（XSS）和点击劫持。
强CSP可以禁用可能有害的内联代码执行，并限制加载外部资源的域。可以通过将 Content-Security-Policy 头设置为以分号分隔的指令列表来启用CSP。如果你的网站不需要访问任何外部资源，一个良好的头的起始值可能是这样的：
Content-Security-Policy: default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self'; connect-src 'self';
在这里，我们将 script-src 、 img-src 、 style-src 和 connect-src 指令设置为 self ，以指示所有脚本、图像、样式表和fetch调用都应该被限制在HTML文档提供服务的同一来源。其他任何未明确提及的CSP指令将回退到 default-src 指令指定的值。我们将其设置为 none 表示默认行为是拒绝任何URL的连接。
然而，如今几乎任何web应用程序都不是独立的，所以你可能要调整这个头，以便你可以使用其他信任域，如域名Google Fonts或AWS S3 bucket，但始终最好从以下开始最严格的政策，并在需要时稍后放宽。
您可以在MDN网站上找到CSP指令的完整列表。
2.启用XSS保护模式
如果用户输入确实注入了恶意代码，我们可以通过提供 "X-XSS-Protection": "1; mode = block" 头指令来指示浏览器阻止响应。
尽管大多数现代浏览器默认情况下都启用了XSS保护模式，并且我们也可以使用内容安全策略来禁用内联JavaScript，但仍建议包含 X-XSS-Protection 头，以确保不使用内联JavaScript的旧版浏览器具有更好的安全性。
3.禁用iframe嵌入以防止点击劫持攻击
点击劫持是一种攻击，网站A上的用户被诱骗对网站B执行某些操作。为了实现这一点，恶意用户将网站B嵌入到一个不可见的iframe中，然后将iframe放置在网站A上毫无防备的用户的光标之下，因此当用户单击，或者更确切地说，认为他们单击了网站A上的元素时，他们实际上是单击了网站B上的某个东西。
我们可以通过提供 X-Frame-Options 响应头来防止此类攻击，该响应头禁止在框架中呈现网站：
"X-Frame-Options": "DENY"
另外，我们可以使用 frame-ancestors CSP指令，该指令可以更好地控制父级可以或不能将页面嵌入iframe的程度。
4.限制对浏览器功能和API的访问
良好的安全做法的一部分是，限制对正确使用我们的网站所不需要的任何内容的访问。我们已经使用CSP应用了这个原则来限制网站可以连接的域的数量，但是它也可以应用到浏览器特性上。
我们可以使用 Feature-Policy 头指示浏览器拒绝访问我们的应用不需要的某些功能和API。
我们将 Feature-Policy 设置为由分号分隔的一串规则，其中每个规则都是功能的名称，后跟其策略名称。
"Feature-Policy": "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vr 'none';"