前端常见安全问题

• iframe
• opener
• CSRF(跨站请求伪造)
• XSS（跨站脚本攻击）
• CND劫持

一、 iframe

1、 如何让自己的网站不被其他网站的iframe引用?

// 检测当前网站是否被第三方iframe引用
// 若相等则证明没有被引用
if(top.location != self.location) {
	top.location.href = 'http://www.baidu.com'
}

2、如何禁用“被使用的iframe对当前网站”某些操作

• sandbox是h5的新属性，主要提高iframe安全系数
• 现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接，可以设置sandbox属性

二、 opener

2-1 问题

在项目中需要打开新标签进行跳转方式

// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2)  JS  -> window.open('http://www.baidu.com')

1、 看起来没有问题，但是存在漏洞

• 通过这两种方式打开的页面可以使用window.opener来访问同源页面的window对象

2、 场景：A 页面通过<a>或 window.open 方式，打开 B 页面。但是 B 页面存在恶意代码如下：

• window.opener.location.replace('https://www.baidu.com') 【此代码仅针对打开新标签有效】
• 此时，用户正在浏览新标签页，但是原来网站的标签页已经被导航到了百度页面。
• 恶意网站可以伪造一个足以欺骗用户的页面，使得进行恶意破坏。
• 即使在跨域状态下 opener 仍可以调用 location.replace 方法。

2-2 解决

1、 <a>

<a target = "_black" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>
<!-- 
  通过 rel 属性进行控制：
  noopener：会将 window.opener 置空，从而源标签页不会进行跳转（存在浏览器兼容问题）
  noreferrer：兼容老浏览器/火狐。禁用HTTP头部Referer属性（后端方式）。
  nofollow：SEO权重优化，详情见 https://blog.csdn.net/qq_33981438/article/details/80909881
 -->

2、 b.window.open()

<button onclick="openurl("http://www.baidu.com")">click跳转</button>

function openurl(url) {
	var newTab = window.open();
	newTab.opener = null;
	newTab.location = url;
}

三、 CSRF/XSRF(跨站请求伪造)

CSRF攻击： 攻击者调用你的身份，以你的名义进行恶意请求。能做的事情：

• 以你的名义发送邮件、发信息、盗用账号、购买商品、虚拟货币转账等
• 个人隐私及财产安全问题

1、 CSRF攻击思想：

• 浏览并登录信任网站
• 登陆成功在浏览器产生cookie存储
• 此时访问危险网站,网站存在恶意代码，代码发送一个恶意请求
• 携带在浏览器产生的额信息进行恶意请求
• 网站请求为合法请求（无法区分是否为该用户发送）

2、 防御措施（添加token/HTTP头自定义属性）：

• 涉及到数据修改造作严格使用post请求而不是get请求
• HTTP协议中使用Referer属性来确定请求来源进行过滤（禁止外域）
• 请求地址添加token，使黑客无法伪造用户请求
• HTTP头自定义属性验证
• 显示验证方式： 添加验证码、密码等

四、XSS/CSS(跨站脚本攻击Cross Site Script)

攻击者在目标网站植入恶意脚本（js/html），用户在浏览器上运行时可以获取用户敏感信息（cookie/session）、修改web页面来欺骗用户

1、 浏览器遇到html中的script标签时，会解析并执行其中的js代码
2、 XSS类型：

• 持久型XSS： 将脚本植入到服务器上，从而导致每个访问的用户都会执行
• 非持久型XSS：对个体用户某url的参数进行攻击

3、 防御措施（对用户输入内容和服务端返回内容进行过滤和转译）：

• 现代大部分浏览器自带XSS筛选器，vue/react等成熟框架 也对XSS进行防护
• 对用户输入内容和服务器返回内容进行过滤和转译
• 重要内容加密传输
• 合理使用get/post等请求方式
• 对于URL携带参数谨慎使用

五、 CDN劫持

出于性能考虑，前端应用通常会把一些静态资源存放到CDN（Content Delivery Networks）上面，例如 js 脚本和 style 文件。

• 这么做可以显著提高前端应用的访问速度
• 却也隐含了一个新的安全风险。如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。