一次VUE项目中遇到XSS攻击的实战记录

我会简单介绍下一次VUE项目中遇到XSS攻击的实战记录以及，如何防御这种攻击。

什么是XSS攻击

XSS (Cross site scripting)跨站脚本攻击是一种代码注入攻击。它是攻击者在目标网站注入恶意脚本，当用户访问时，这些脚本会在用户的浏览器中执行，并在用户页面上产生不希望看到的恶意行为。通过这样的方式，攻击者可以利用漏洞，窃取用户的敏感信息，或者篡改页面信息等。

遇到XSS攻击的实际案例

最近我们的网站遭到了XSS攻击，攻击者通过提交包含恶意代码的表单，向我们的网站注入了一个可以攻击前端代码的恶意代码。这个恶意代码可以窃取当前用户的cookie，并发送给攻击者。

如何防止XSS攻击？

• 使用过滤器过滤用户输入的特殊字符。比如通过encodeURIComponent()方法，把输入的数据转化成url的安全字符串，来防止XSS攻击。
• 使用内容安全策略(CSP)。设置Content-Security-Policy HTTP头来规定浏览器只允许加载指定来源的资源，从而防止非法的代码注入到页面中（如外部脚本、iframe等）。

示例说明

使用encodeURIComponent()转化输入

使用JavaScript中的encodeURIComponent()方法，将用户输入的数据转化成url的安全字符串。

const inputValue = document.getElementById('input').value;
const safeValue = encodeURIComponent(inputValue);

使用CSP预防外部脚本注入

可以在HTTP响应头中增加Content-Security-Policy来规定浏览器只允许加载指定来源的资源，从而防止非法的代码注入到页面中。

Content-Security-Policy:
default-src 'self'; script-src 'self' *.google.com

在上述示例中，只对来自self和google.com域的脚本进行加载，可以防止加载其它不合法的脚本。

以上是遇到XSS攻击的实践案例以及如何防范XSS攻击的一些措施。当然，除了以上方法，我们还可以采用其它方法来防止XSS攻击，比如使用DOMPurify来过滤非法标签等。总之，安全至上，我们需要在代码中重视安全性问题，防止这类攻击的发生。