常见的 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 框架避免此类攻击发生。