在之前的文章流量劫持危害
詳細講解了 http 的高危性，以至於重要的操作都使用 https 協議，來保障流量在途中的安全。
這是最經典的登入模式。儘管主頁面並沒有開啟 https，但登入時會跳轉到乙個安全頁面來進行，所以整個過程仍是比較安全的 —— 至少在登入頁面是安全的。
其中轉型 https 的手段最為先進，甚至一些安全意識較強的使用者也時有疏忽。
然而，使用者的意識和知識總是在不斷提公升的。尤其在如今各種網上交易的時代，安全常識廣泛普及，使用者在賬號登入時會格外留心，就像過馬路時那樣變得小心翼翼。
久而久之，使用者的火眼金睛一掃位址列即可識別破綻。
因此，這種傳統的登入模式，仍具備一定的安全性，至少能給使用者提供識別真假的機會。
不知從何時起，人們開始熱衷在網頁裡模仿傳統應用程式的介面。無論控制項、視窗還是互動體驗，紛紛向著本地程式靠攏，效果越做越絢。
然而華麗的背後，其本質仍是乙個網頁，自然掩蓋不了網頁的安全缺陷。
當網頁特效蔓延到一些重要資料的互動 —— 例如賬號登入時，風險也隨之產生。因為它改變了使用者的使用習慣，同時也徹底顛覆了傳統的意識。
乍一看，似乎也沒什麼問題。雖然未使用登入頁跳轉，但資料仍通過 https 傳輸，途中還是無法被截獲。
如果認為這類登入框沒什麼大問題，顯然還沒領悟到『流量劫持』的精髓 —— 流量不是單向的，而是有進也有出。
能捕獲你『出流量』的黑客，大多也有辦法控制你的『入流量』。這在流量劫持第一篇
裡也詳細列舉了。
使用 https 確實能保障通訊的安全。但在這個場合裡，它只能保障『傳送』的資料，對於『接收』的流量，則完全不在其保護範圍內。
因為整個登入框都當作『虛擬視窗』巢狀在主頁面裡的，因此其中的一切都在同個頁面環境裡。而主頁面使用的仍是不安全的 http 協議，所以注入的 xss **能輕而易舉的控制登入框。
當然，或許你會說這只是設計缺陷。若是直接嵌入 https 登入頁的 iframe 框架，那就會因同源策略而無法被 xss 控制了。
這樣的改進確實能提高一些安全性，但也只是略微的。既然我們能控制主頁面，裡面顯示什麼內容完全可以由 xss 說了算。不論什麼登入框、框架頁，甚至安全外掛程式，我們都可以將其刪除，用看起來完全相同的文字框代替。得到賬號後，通過後台反向**實現登入，然後通知前端指令碼偽造乙個登入成功的介面。
所以，https 被用在 http 頁面裡，意義就大幅下降了。
在流量劫持第二篇
裡提到『http 快取投毒』這一概念，只要流量暫時性的被劫持，都可導致快取長期感染。但這種攻擊有個前提，必須事先找到站點下較穩定的指令碼資源，做投毒的物件。
在傳統的登入模式裡，快取投毒非常難以利用：
https 資源顯然無法被感染。
而使用 https 向下轉型的方案，也會因為離開劫持環境，而無法訪問中間人的 http 版登陸頁面，導致快取失效；或者這個真實的 http 版的登入頁面根本就不接受你的本地快取，直接重定向到正常的 https 頁面。
製作乙個精良的浮層登入框，需要不少的介面**，所以經常引用 jquery 這類通用指令碼庫。而這些指令碼往往是長久不會修改的，因此是快取投毒的絕好原料。
所以，浮層登入框的存在，讓『快取投毒』有了絕佳的用武之地。
在之前的文章 wifi流量劫持 —— js指令碼快取投毒
，演示了如何利用 www.163.com
下的某個長快取指令碼進行投毒，最終利用網易的浮層登入框獲取賬號。儘管網易也使用 https 傳輸賬號資料，但在流量攻擊面前不堪一擊。
我們選幾個最常用的產品線，進行一次快取掃瞄：
果然，每個產品線裡都有長期未修改、並且快取很久的指令碼庫。
接著開啟我們的釣魚熱點，讓前來連線的使用者，訪問任何乙個頁面都能中毒。
接著讓『受害者』來連一下我們的熱點：
之前正好開著網頁，所以很快收到了 http 請求。我們在任何網頁裡注入 xss，進行快取投毒。
（由於原理和之前講一樣，所以這裡就省略步驟了）
然後重啟電腦，連上正常的 wifi（模擬使用者回到安全的場合）。
開啟 tiebai.baidu.com，一切正常。
開始登入了。。。
看看這種浮層登入框，能否躲避我們的從沉睡中喚起的 xss 指令碼：
奇蹟依然發生！
由於之前有過詳細的原理講解，因此這裡就不再累述了。不過在實戰中，快取投毒+非安全頁面登入框，是批量獲取明文賬號的最理想手段。
如果現在再將登入模式換回傳統的，還來得及嗎？顯然，為時已晚。
當**第一次從傳統登入，公升級到浮層登入時，使用者大多不會立即輸入，而是『欣賞』下這個新版本的創意。確認不是病毒廣告彈出的視窗，而是真的官方設計的，才開始登入。
當使用者多次使用浮層登入框之後，慢慢也就接受了這種新模式。
即使未來，**取消了浮層登入，黑客使用 xss 建立乙個類似的浮層，使用者仍會毫不猶豫的輸入賬號。因為在他們的記憶裡，官方就曾使用過，仍然保留著對其信任度。
既然這個過程是不可逆的，撤回傳統模式意義也不大。事實上，使用浮層的使用者體驗還是不錯的，對於不了解安全性的使用者來說，還是喜歡華麗的介面。
要保留體驗，又得考慮安全性，最好的解決方案就是將所有的頁面都使用 https，將站點武裝到牙齒，不留一絲安全縫隙。這也是未來**的趨勢。
web移動端浮層滾動帶動底層元素滾動問題解決
當我們寫了這樣乙個結構的時候 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假...
HTML浮層效果的簡單實現及其原理
由於最近的專案用到彈出浮層來顯示資訊或者獲得使用者輸入，這樣的好處是僅僅只用乙個頁面就可以實現多個頁面的功能，不用多寫或者多跳轉幾個頁面，所以就簡單研究了一下浮層實現的一種原理，並記錄下以後就可以自己寫自己應用了。先介紹一下其實現的原理吧 在css裡有乙個屬性叫做z index，表示每個元素之間的堆...
網頁設計中的彈窗與浮層的設計
在從傳統的software逐漸轉換到w程式設計客棧ebware的大潮中，設計模式與技術實現雙重變革和推進下。我們提倡頁面中的任務對應使用者群明確，任務少而精。回到www.cppcns.com我們傳統的後台軟體系統中，對於面對系統與流程再造。我們順其自然得想到把在web服務中的設計思想遷移到後台軟體系...