相信每一個(gè)前端er對(duì)于跨域這兩個(gè)字都不會(huì)陌生修壕，在實(shí)際項(xiàng)目中應(yīng)用也是比較多的愈捅。但跨域方法的多種多樣實(shí)在讓人目不暇接。
一叠殷，跨域的幾種方式：
1改鲫，JSONP
此結(jié)果返回一個(gè)js函數(shù)的調(diào)用
2，H5 的postMessage方法
高級(jí)瀏覽器Internet Explorer 8+, chrome林束，F(xiàn)irefox , Opera 和 Safari 都將支持這個(gè)功能像棘。這個(gè)功能主要包括接受信息的”message”事件和發(fā)送消息的”postMessage”方法。
3壶冒，通過設(shè)置Access-Control-Allow-Origin來實(shí)現(xiàn)跨域訪問缕题。
Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問（最不建議使用*，同時(shí)也是最容易忽略的胖腾。）
4烟零，代理。
5咸作，等等這里再簡(jiǎn)單說三點(diǎn)...
二锨阿，OWASP(Open Application Security Project) 開放式Web應(yīng)用程序安全項(xiàng)目
2017 OWASP Top 10十大安全漏洞候選出爐，你怎么看记罚？
詳情 請(qǐng)查看
http://www.owasp.org.cn/owasp-project/OWASPTop102017RC1V1.0.pdf
三墅诡，為什么要攻擊?
其實(shí)真正為了玩的心態(tài)去進(jìn)行黑網(wǎng)站的人，還是少數(shù)桐智。多數(shù)攻擊還是有利益的成分在里面的末早。我模糊的記得，以前聽騰訊的工程師說過一句話说庭，大概是這樣的：開發(fā)者不可能確保自己的應(yīng)用絕對(duì)無法被攻擊然磷，但是只要攻擊我們的時(shí)候，黑客花費(fèi)的成本遠(yuǎn)比他可以獲取的利益大得多刊驴，黑客就不會(huì)去攻擊姿搜。防范強(qiáng)如支付寶、QQ等產(chǎn)品捆憎，也都曾被報(bào)過漏洞舅柜，看來防御不是絕對(duì)的，我們只能想辦法讓我們的應(yīng)用更加安全攻礼。
四业踢，前端攻擊都有哪些形式栗柒，我該如何防范礁扮？
1 XSS攻擊
在使用瀏覽器進(jìn)行xss測(cè)試時(shí)需要預(yù)先關(guān)閉xss過濾器
chrome的關(guān)閉方法：
我的chrome安裝目錄在C:\Program Files (x86)\Google\Chrome\Application\chrome.exe知举，關(guān)閉方法是在命令行輸入以下命令：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --disable-xss-auditor
1.1 是什么？
在web前端方面太伊，可以簡(jiǎn)單的理解為一種javascript代碼注入雇锡。舉個(gè)例子，我們有個(gè)社交網(wǎng)站僚焦，允許大家相互訪問空間锰提，網(wǎng)站可能是這樣做的：
<?php
$username="侯醫(yī)生";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
用戶名：<?php echo $username;?>
</div>
</body>
</html>
但是，如果你的用戶名芳悲，起名稱的時(shí)候立肘，帶上script標(biāo)簽?zāi)兀课覀冎烂福瑸g覽器遇到html中的script標(biāo)簽的時(shí)候谅年，會(huì)解析并執(zhí)行標(biāo)簽中的js腳本代碼，那么如果你的用戶名稱里面含有script標(biāo)簽的話肮韧，就可以執(zhí)行其中的代碼了融蹂。
<?php
$username="<script>alert('侯醫(yī)生');</script>";
?>
1.2 如何防范？
目前來講弄企，最簡(jiǎn)單的辦法防治辦法超燃，還是將前端輸出數(shù)據(jù)都進(jìn)行轉(zhuǎn)義最為穩(wěn)妥。比如拘领，按照剛剛我們那個(gè)例子來說意乓，其本質(zhì)是，瀏覽器遇到script標(biāo)簽的話院究，則會(huì)執(zhí)行其中的腳本洽瞬。但是如果我們將script標(biāo)簽的進(jìn)行轉(zhuǎn)義，則瀏覽器便不會(huì)認(rèn)為其是一個(gè)標(biāo)簽业汰，但是顯示的時(shí)候伙窃，還是會(huì)按照正常的方式去顯示。
<?php
$username="<script>alert('侯醫(yī)生');</script>";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--我們將輸出的后端變量样漆，轉(zhuǎn)義之后再輸出为障，則可以避免被注入代碼-->
<div>
用戶名：<?php echo htmlentities($username);?>
</div>
</body>
</html>
1.3 升級(jí)攻擊
網(wǎng)站使用append進(jìn)行dom操作，如果是append我們可以決定的字段放祟，那么我們可以將左右尖括號(hào)鳍怨，使用unicode碼偽裝起來，就像這樣--"\u003cscript\u003ealert('okok');"跪妥。接下來轉(zhuǎn)義的時(shí)候鞋喇，偽裝成\u003的<會(huì)被漏掉，append的時(shí)候眉撵，則會(huì)被重新調(diào)用侦香。
<?php
$username="\u003cscript\u003ealert('okok');";
?>
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
<div>
用戶名：<?php echo htmlentities($username);?>
</div>
<div>版權(quán)所有：<span id="username_info"></span></div>
<script>
$('#username_info').append("<?php echo htmlentities($username);?>");
</script>
</body>
</html>
防御再次升級(jí)
筆者建議落塑，最好由后端獲取，在前端轉(zhuǎn)義后再行輸出罐韩，代碼如下
<script>
var value = decodeURIComponent("<?php echo htmlentities($_GET['username']);?>");
$('#username_info').append(value);
</script>
2 CSRF攻擊
CSRF（Cross-site request forgery跨站請(qǐng)求偽造憾赁，也被稱為“One Click Attack”或者Session Riding，通成⒊常縮寫為CSRF或者XSRF龙考，是一種對(duì)網(wǎng)站的惡意利用。
其實(shí)就是網(wǎng)站中的一些提交行為矾睦，被黑客利用晦款，你在訪問黑客的網(wǎng)站的時(shí)候，進(jìn)行的操作枚冗，會(huì)被操作到其他網(wǎng)站上(如：你所使用的網(wǎng)絡(luò)銀行的網(wǎng)站)柬赐。
(這個(gè)張圖乃是盜圖，如侵權(quán)及時(shí)與筆者聯(lián)系)
通常我們會(huì)為了省事兒官紫，把一些應(yīng)當(dāng)提交的數(shù)據(jù)肛宋，做成get請(qǐng)求。殊不知束世，這不僅僅是違反了http的標(biāo)準(zhǔn)而已酝陈，也同樣會(huì)被黑客所利用。
比如毁涉，你開發(fā)的網(wǎng)站中沉帮，有一個(gè)購買商品的操作。你是這么開發(fā)的：
<?php
// 從cookie中獲取用戶名贫堰，看似穩(wěn)妥
$username = $_COOKIE['username'];
$productId = $_GET['pid'];
// 這里進(jìn)行購買操作
//store_into_database($username, $productId);
?>
<meta charset="utf-8" />
<?php
echo $username . '買入商品：' . $productId;
?>
而商品ID圖個(gè)省事兒穆壕，就使用了url中的get參數(shù)。買商品的話其屏，
那么喇勋，黑客的網(wǎng)站可以這樣開發(fā)：
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
這樣的話，用戶只需要訪問一次黑客的網(wǎng)站偎行，其實(shí)就相當(dāng)于在你的網(wǎng)站中川背，操作了一次。然而用戶卻沒有感知蛤袒。
如果你使用了post請(qǐng)求來處理關(guān)鍵業(yè)務(wù)的熄云，還是有辦法可以破解的。我們的業(yè)務(wù)代碼如下：
<?php
$username = $_COOKIE['username'];
// 換為post了妙真，可以規(guī)避黑客直接的提交
$productId = $_POST['pid'];
// 這里進(jìn)行購買操作
//store_into_database($username, $productId);
?>
<meta charset="utf-8" />
<?php
echo $username . '買入商品：' . $productId;
?>
黑客代碼如下：
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
<button id="clickme">點(diǎn)我看相冊(cè)</button>
<script>
$('#clickme').on('click', function () {
// 用戶再不知情的情況下缴允，提交了表單，服務(wù)器這邊也會(huì)以為是用戶提交過來的珍德。
$('#myform').submit();
});
</script>
<form id="myform" style="display:none;" target="myformer" method="post" action="http://myhost:8082/lab/xsrflab/submit.php">
<input type="hidden" name="pid" value="1">
</form>
<iframe name="myformer" style="display:none;"></iframe>
</body>
</html>
點(diǎn)擊后练般，用戶進(jìn)行了提交健蕊，卻連自己都不知情。這種情況如何防御呢踢俄？
最簡(jiǎn)單的辦法就是加驗(yàn)證碼，這樣除了用戶晴及，黑客的網(wǎng)站是獲取不到用戶本次session的驗(yàn)證碼的都办。但是這樣也會(huì)降低用戶的提交體驗(yàn)，特別是有些經(jīng)常性的操作虑稼，如果總讓用戶輸入驗(yàn)證碼琳钉，用戶也會(huì)非常的煩。
另一種方式蛛倦，就是在用訪問的頁面中歌懒，都種下驗(yàn)證用的token，用戶所有的提交都必須帶上本次頁面中生成的token溯壶，這種方式的本質(zhì)和使用驗(yàn)證碼沒什么兩樣及皂，但是這種方式，整個(gè)頁面每一次的session且改，使用同一個(gè)token就行验烧，很多post操作，開發(fā)者就可以自動(dòng)帶上當(dāng)前頁面的token又跛。如果token校驗(yàn)不通過碍拆，則證明此次提交并非從本站發(fā)送來，則終止提交過程慨蓝。如果token確實(shí)為本網(wǎng)站生成的話感混，則可以通過
3 網(wǎng)絡(luò)劫持攻擊
很多的時(shí)候，我們的網(wǎng)站不是直接就訪問到我們的服務(wù)器上的礼烈，中間會(huì)經(jīng)過很多層代理弧满，如果在某一個(gè)環(huán)節(jié)，數(shù)據(jù)被中間代理層的劫持者所截獲此熬，他們就能獲取到使用你網(wǎng)站的用戶的密碼等保密數(shù)據(jù)谱秽。比如，我們的用戶經(jīng)常會(huì)在各種飯館里面摹迷，連一些奇奇怪怪的wifi疟赊，如果這個(gè)wifi是黑客所建立的熱點(diǎn)wifi，那么黑客就可以結(jié)果該用戶收發(fā)的所有數(shù)據(jù)峡碉。這里近哟，建議站長們網(wǎng)站都使用https進(jìn)行加密。這樣鲫寄，就算網(wǎng)站的數(shù)據(jù)能被拿到吉执，黑客也無法解開疯淫。
如果你的網(wǎng)站還沒有進(jìn)行https加密的化，則在表單提交部分戳玫，最好進(jìn)行非對(duì)稱加密--即客戶端加密熙掺，只有服務(wù)端能解開。這樣中間的劫持者便無法獲取加密內(nèi)容的真實(shí)信息了咕宿。
4 控制臺(tái)注入代碼
不知道各位看官有沒有注意到天貓官網(wǎng)控制臺(tái)的警告信息币绩。因?yàn)橛械暮诳蜁?huì)誘騙用戶去往控制臺(tái)里面粘貼東西（欺負(fù)小白用戶不懂代碼），比如可以在朋友圈貼個(gè)什么文章府阀，說:"只要訪問天貓缆镣，按下F12并且粘貼以下內(nèi)容，則可以獲得xx元禮品"之類的试浙，那么有的用戶真的會(huì)去操作董瞻，并且自己隱私被暴露了也不知道。
不過田巴，這種攻擊畢竟是少數(shù)钠糊，所以各位看官看一眼就行，如果真的發(fā)現(xiàn)有的用戶會(huì)被這樣攻擊的話壹哺，記得想起天貓的這種解決方案眠蚂。
百度的招聘廣告連瀏覽器的控制臺(tái)都不放過《孵铮可以看到不同的輸出有不同的圖標(biāo)和不同的顏色逝慧，并且每條輸出后面都有超級(jí)鏈接，點(diǎn)擊后跳轉(zhuǎn)到網(wǎng)頁源碼的相應(yīng)行啄糙。簡(jiǎn)單粗暴的招聘文字中透露著文雅笛臣，搞的我都很想投一份簡(jiǎn)歷過去了。不得不說隧饼，很有百度老總李彥宏的范兒沈堡！
豆瓣的招聘玩法，一般情況下燕雁，能夠看到這些代碼的人诞丽，要么是直接來扒代碼的，要么就是來調(diào)試數(shù)據(jù)的拐格，而豆瓣給出的更是直接僧免，好不拐彎抹角的甩給你一句話：喜歡看豆瓣的代碼，還是發(fā)現(xiàn)了什么bug捏浊？不如和我們一起為豆瓣添磚加瓦吧懂衩！
5 釣魚
釣魚也是一種非常古老的攻擊方式了，其實(shí)并不太算前端攻擊∽嵌矗可畢竟是頁面級(jí)別的攻擊牵敷，我們也來一起聊一聊。我相信很多人會(huì)有這樣的經(jīng)歷法希，QQ群里面有人發(fā)什么兼職啦枷餐、什么自己要去國外了房子車子甩賣了，詳情在我QQ空間里啦苫亦，之類的連接毛肋。打開之后發(fā)現(xiàn)一個(gè)QQ登錄框，其實(shí)一看域名就知道不是QQ著觉，不過做得非常像QQ登錄，不明就里的用戶們惊暴，就真的把用戶名和密碼輸入了進(jìn)去饼丘，結(jié)果沒登錄到QQ，用戶名和密碼卻給人發(fā)過去了辽话。
其實(shí)這種方式肄鸽，在前端也有利用。下面油啤，我們就來試試如果利用前端進(jìn)行一次逼真的釣魚典徘。
1 首先，我們?cè)趚x空間里分享一篇文章益咬，然后吸引別人去點(diǎn)擊逮诲。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
當(dāng)前你在xx空間
</div>
<h1>侯博士的分享</h1>
<section>
咱們班當(dāng)年班花，現(xiàn)在長這樣：
<!--這是咱們的釣魚網(wǎng)站-->
<a href="http://localhost:8082/lab/fish/cheat.php" target="_blank">點(diǎn)我查看</a>
</section>
</body>
</html>
接著幽告，我們?cè)赾heat.php這個(gè)網(wǎng)站上面梅鹦，將跳轉(zhuǎn)過來的源網(wǎng)頁地址悄悄的進(jìn)行修改。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
你想看的信息：
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
<script>
// 在用戶不知情的情況下冗锁，對(duì)跳轉(zhuǎn)的來源網(wǎng)頁進(jìn)行地址替換
window.opener.location = 'http://localhost:8082/lab/fish/myfishsite.php';
</script>
</body>
</html>
我們平時(shí)開發(fā)要注意些什么齐唆？
開發(fā)時(shí)要提防用戶產(chǎn)生的內(nèi)容，要對(duì)用戶輸入的信息進(jìn)行層層檢測(cè)
要注意對(duì)用戶的輸出內(nèi)容進(jìn)行過濾(進(jìn)行轉(zhuǎn)義等)
重要的內(nèi)容記得要加密傳輸(無論是利用https也好冻河，自己加密也好)
get請(qǐng)求與post請(qǐng)求箍邮，要嚴(yán)格遵守規(guī)范，不要混用叨叙，不要將一些危險(xiǎn)的提交使用jsonp完成锭弊。
cookie localstorage sessionstorage 慎重使用，這些數(shù)據(jù)很容易得到擂错。
對(duì)于URL上攜帶的信息廷蓉，要謹(jǐn)慎使用。
心中時(shí)刻記著，自己的網(wǎng)站哪里可能有危險(xiǎn)桃犬。
