前端安全问题以及解决方案汇总
随着大前端的快速发展，各种技术不断更新，前端的安全问题也值得我们重视。今天我们来聊一聊前端常见的7个安全方面问题：
1.iframe
2.opener
3.CSRF（跨站请求伪造）
4.XSS（跨站脚本攻击）
5.ClickJacking（点击劫持）
6.HSTS（HTTP严格传输安全）
7.CND劫持
iframe
1.如何让自己的网站不被其他网站使用iframe引用
if(top.location !== window.location){
top.location.href = xxx
}
当发现我们的网站被其他网站引用时，可以强制使网站跳转到其他网站。
2.如何禁用，被使用的 iframe 对当前网站某些操作？
sandbox是html5的新属性，主要是提高iframe安全系数。iframe因安全问题而臭名昭著，这主要是因为iframe常被用于嵌入到第三方中，然后执行某些恶意操作。
现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接等，我们可以设置 sandbox 属性。如使用多项用空格分隔。
参考：HTML sandbox 属性
- allow-same-origin：允许被视为同源，即可操作父级DOM或cookie等
- allow-top-navigation：允许当前iframe的引用网页通过url跳转链接或加载
- allow-forms：允许表单提交
- allow-scripts：允许执行脚本文件
- allow-popups：允许浏览器打开新窗口进行跳转
“”：设置为空时上面所有允许全部禁止
opener
如果在项目中需要 打开新标签 进行跳转一般会有两种方式：
// 1) HTML ->
// 2) JS -> window.open('http://www.baidu.com')
/*
* 这两种方式看起来没有问题，但是存在漏洞。
* 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
* 场景：A 页面通过 或 window.open 方式，打开 B 页面。但是 B 页面存在恶意代码如下：
* window.opener.location.replace('https://www.baidu.com') 【此代码仅针对打开新标签有效】
* 此时，用户正在浏览新标签页，但是原来网站的标签页已经被导航到了百度页面。
* 恶意网站可以伪造一个足以欺骗用户的页面，使得进行恶意破坏。
* 即使在跨域状态下 opener 仍可以调用 location.replace 方法。
*/
解决方案：
- 当使用a标签跳转时，
a标签跳转url
- 当使用window.open跳转时，
function openurl(url) {
var newTab = window.open();
newTab.opener = null;
newTab.location = url;
}
CSRF / XSRF（跨站请求伪造）
你可以这么理解 CSRF 攻击：攻击者盗用了你的身份，以你的名义进行恶意请求。它能做的事情有很多包括：以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。总结起来就是：个人隐私暴露及财产安全问题。
/*
* 阐述 CSRF 攻击思想：（核心2和3）
* 1、浏览并登录信任网站（举例：淘宝）
* 2、登录成功后在浏览器产生信息存储（举例：cookie）
* 3、用户在没有登出淘宝的情况下，访问危险网站
* 4、危险网站中存在恶意代码，代码为发送一个恶意请求（举例：购买商品/余额转账）
* 5、携带刚刚在浏览器产生的信息进行恶意请求
* 6、淘宝验证请求为合法请求（区分不出是否是该用户发送）
* 7、达到了恶意目标
*/
一般CSRF形式上有三种表现：
1.自动发起 Get 请求
模拟代码如下：
1
黑客的站点：CSRF 攻击演示
攻击者将请求转账的链接隐藏在精美的图片里，当你点击时，就会想服务器发起请求。
2.自动发起 POST 请求
模拟代码如下：
黑客的站点：CSRF 攻击演示
在这段代码中，我们可以看到黑客在他的页面中构建了一个隐藏的表单，该表单的内容就是极客时间的转账接口。当用户打开该站点之后，这个表单会被自动执行提交；当表单被提交之后，服务器就会执行转账操作。因此使用构建自动提交表单这种方式，就可以自动实现跨站点 POST 数据提交。
- 引诱用户点击链接
除了自动发起 Get 和 Post 请求之外，还有一种方式是诱惑用户点击黑客站点上的链接，这种方式通常出现在论坛或者恶意邮件上。黑客会采用很多方式去诱惑用户点击链接，示例代
码如下所示：
