iFrame的內容讀取風險

iFrame被大量的網站初學者拿來濫用,不僅很不適用於移動端,更會產生許多隱性的風險。用jQuery去讀取iFrame是非常的輕鬆快速的,以下先示範如何用jQuery去讀取一個iFrame。

iFrame的內容讀取很簡單!以下是一個靜態網頁,利用jQuery去讀取一個iFrame內文的範例。

//a.html
<html>
<head>
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	</head>
	<body>
		<button id="test">GET INFO</button>
		<iframe src="b.html" id="oFrame" style="width:500px;height:500px;" frameborder="0"></iframe>
		<script>
			$("#test").click(function(){
				var cTemp = $("#oFrame").contents().find("#uPassword");
				alert(cTemp.val());
			});
		</script>
	</body>
</html>

當a.html與b.html處於同一個網站(Domain)下時,假設b.html裡面有一個密碼文字方框叫「uPassword」,那麼a.html上的GET INFO鈕被點擊時,就可以取得b.html網站中的密碼欄位,也就是說如果你要的話,可以取得任何你想要的資訊。限同一個Domain下是基於瀏覽器的同源策略/同源政策(Same Origin Policy)。

風險

  1. 使用者自己安裝強國牌包皮瀏覽器。
  2. 使用者自己把瀏覽器同源策略關起來(Disabled SOP)。
  3. 使用者自己電腦中病毒,而病毒把瀏覽器同源策略關起來(Disabled SOP)。
  4. 駭客利用漏洞破解瀏覽器的同源策略設定。

一旦上面的任一條件成立時,你的網站就有可能被佈置成釣魚網頁,誘發使用者點擊,然後你網站使用者的密碼就被拿走了,此時就算網站上HTTPS(SSL)也是毫無意義的,因為它在送出前就被攔截了。

防範

基本上沒有什麼可以好可防止的方法,所幸所有漏洞問題的點,最終是看使用者的瀏覽器,基於這個利基點,X-Frame-Options就被發展出來了,也就是說在你的HTTP Header加入這個屬性,聽話的瀏覽器,就會阻止你的網站頁面被iFrame加入(無論是否同源都一樣)。雖然說蠻消極的,但總是聊勝於無。語法如下:

//X-Frame-Options HTTP Header
name = "X-Frame-Options"
value = "DENY|SAMEORIGIN|ALLOW-FROM uri"

瀏覽器相容性 Browser compatibility

依據MDN(Mozilla Developer Network)於2015.03.03表示,相容性如下方圖表。

jQuery iFrameContentsGet SameOriginPolicy XFrameOptions