常见的 Web 攻击方式有以下几种：

• 跨站脚本攻击（XSS 攻击）

• 跨站请求伪造（XSRF 攻击）

• SQL 注入

XSS 攻击

MDN 定义如下：

跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。若受害者运行这些恶意代码，攻击者就可以突破网站的访问限制并冒充受害者。

简单来说，跨站脚本攻击利用恶意脚本发起攻击，通常这些恶意脚本可以任意读取 cookie、session tokens，或其他敏感网站信息。以下两种情况容易发生 XSS 攻击：

• 从一个不可靠的链接进入到一个 Web 应用程序。

• 没有过滤掉恶意代码的动态内容被发送给 Web 用户。

如果要过滤恶意代码，提交给后端，就能尽可能避免此类攻击。

DOM 中的内联事件监听器，如 location、onclick 等，a 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。

如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就能在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

XSRF 攻击

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。

如果你登录了 bank.com 网站，此时，你有了来自该网站的身份验证 cookie。浏览器将会在你的每次请求上带上 cookie，以便识别你，执行所有的敏感财务操作。

当你在另一个窗口中浏览网页时，不小心访问了一个 eval.com 的网站，该网站有一段提交表单的 JavaScript 代码： ，它含有交易字段。这时候，提交表单请求虽然由 eval.com 发起，当它携带了 bank.com 的 cookie，因此验证通过，攻击就完成了。

那么我们怎么预防呢？方案有：

• 阻止不明外域的访问

  • 同源检测
  • Samesite cookie

• 提交时要求附加本域才能获取的信息

  • CSRF Token
  • 双重 cookie 验证

SQL 注入

SQL 注入攻击，是通过将恶意的 SQL 查询或添加语句插入到应用的输入参数中，再在后台 SQL 服务器上解析执行进行的攻击。比如，后端使用 SQL 查询时，篡改的查询参数或其他 SQL 代码，就会造成 SQL 注入攻击。

可以使用预编译方式或者 ORM 框架避免此类攻击发生。