前端网络安全
常见的Web前端攻击手段或方法
1.XSS（跨站脚本攻击）
XSS又叫CSS（Cross Site Script），跨站脚本攻击：攻击者在目标网站植入恶意脚本（js / html），用户在浏览器上运行时可以获取用户敏感信息（cookie / session）、修改web页面以欺骗用户、与其他漏洞相结合等。
// 正常提交
http://www.a.com/test.php?param=这是一个测试!
攻击者发现页面上有这样的代码，则可以构建如下的URL：
http://www.a.com/test.php?param=<script>alert(xss)</script>
以这样的方式，攻击者在目标网站上就注入了一个外部的JavaScript文件，如果攻击者在这个外部文件中编写恶意的代码，比如取得Cookie信息等，就可控制用户在被攻击网站上的账号权限了。
XSS攻击的特点就是：尽一切办法在目标网站上执行非目标网站上原有的脚本。
防御措施（对用户输入内容和服务端返回内容进行过滤和转译）
1.避免内联事件，尽量不要使用 onLoad="onload('{{data}}')"、onClick="go('{{action}}')" 这种拼接内联事件的写法。
2.避免拼接 HTML，前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。
3.HTTP-only Cookie: 禁止 JavaScript 读取某些敏感 Cookie。
4.对数据进行严格的输出编码,<script>在进行HTML编码后变成了< ; script > ;
5.X-XSS-Protection头（防XSS攻击设置）
- 0： 表示关闭浏览器的XSS防护机制
- 1：删除检测到的恶意代码， 如果响应报文中没有看到X-XSS-Protection 字段，那么浏览器就认为X-XSS-Protection配置为1，这是浏览器的默认设置
1; mode=block：如果检测到恶意代码，在不渲染恶意代码
image.png
2.CSRF（跨站请求伪造)
可以这么理解 CSRF 攻击：攻击者盗用了你的身份，以你的名义进行恶意请求。它能做的事情有很多包括：以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。总结起来就是：个人隐私暴露及财产安全问题。
假设 新浪微博关注某个人的请求是
GET www.weibo.com/attention?userid=123
所以，当用户处于登录状态下，并且访问如上链接，便会关注userid为123的用户。
那么我们可以做出如下攻击。
编写一个恶意页面 www.csrf.com。然后在页面上加上一句
<img src=“www.weibo.com/attention?userid=123” />
这时，用户只要访问了这个页面，便发起了关注的请求。并且该请求还是带上了登录cookie的，因为cookie是跟随着请求域名一起的。
防御措施（推荐添加token / HTTP头自定义属性）
涉及到数据修改操作严格使用 post 请求而不是 get 请求
HTTP 协议中使用(Origin Header、Referer Header) 属性来确定请求来源进行过滤（禁止外域）
请求地址添加 token ，使黑客无法伪造用户请求
HTTP 头自定义属性验证（类似上一条）
显示验证方式：添加验证码、密码等
image.png
3.DOS攻击(Denial of Service)
DOS攻击通过在网站的各个环节进行攻击，使得整个流程跑不起来，以达到瘫痪服务为目的。最常见的就是发送大量请求导致服务器过载宕机
防御措施
扩容服务器
进行实时监控，封禁某些恶意密集型请求IP段
增加接口验证，对于某些敏感接口，进行单个IP访问次数限制
进行静态资源缓存，隔离源文件的访问，比如CDN加速
4.CDN劫持
出于性能考虑，前端应用通常会把一些静态资源存放到CDN（Content Delivery Networks）上面，例如 js 脚本和 style 文件。这么做可以显著提高前端应用的访问速度，但与此同时却也隐含了一个新的安全风险。如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。
现在的CDN以支持SRI(Subresource Integrity)为荣，script 和 link 标签有了新的属性 integrity，这个属性是为了防止校验资源完整性来判断是否被篡改。它通过 验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
使用 SRI 需要两个条件：一是要保证 资源同域 或开启跨域，二是在<script>中 提供签名 以供校验。
SRI官方解释：子资源完整性 (SRI) 是一项安全功能，可让浏览器验证其抓取的文件 (例如，从一个 CDN) 是在没有意外操作的情况下传递的。它的工作原理是允许您提供一个获取的文件必须匹配的加密散列/哈希。
5.界面操作劫持
界面操作劫持是一种基于视觉欺骗的劫持攻击。通过在页面上覆盖一个iframe + opacity:0的页面，让用户误点击。
防护措施
X-Frame-Options 禁止页面被加载进iframe中
