前段時間需要透過 JavaScript 取得頁面的來源,這個操作很簡單,使用 document.referrer 就可以取得到了。不過,實際應用還是有很多意外狀況,這兒簡單整理一下。
首先遇到的問題,是從 HTTPS 頁面轉到 HTTP 頁面後,document.referrer 的值為空。出於安全性考慮,許多網站的一些重要頁面(例如淘寶的登入頁面)都會使用 HTTPS 協定。如果某個未登入使用者在頁面A(HTTP 頁面)點擊了頁面B(HTTP 頁面)的鏈接,但頁面B 需要使用者登錄,於是先跳到登入頁面(HTTPS 頁面),登入完成之後再跳回B( HTTP 頁面),這時你會發現B 頁面上拿不到document.referrer 了。也就是說,如果想根據 referrer 來還原使用者存取路徑的話,如果路徑中有 HTTP 頁面也有 HTTPS 頁面,那麼這個路徑就會在從 HTTPS 到 HTTP 的地方斷掉。
這個問題的根源是瀏覽器的安全策略,只靠 JavaScript 似乎沒有特別好的解決方法。一個迂迴的想法是使用 window.name,在 HTTPS 頁面將目前頁面的 url 寫到 window.name 中,再在下一個頁面(HTTP 頁面)讀取。
除了這種情況,其它頁面跳轉是否都能正常取到 document.referrer 呢?我搜尋了一番,發現 這兒 有人整理了一個列表,不過不是很全,例如沒有包括垂而不死的 IE6 的情況。於是便自己動手,在虛擬機裡裝了 N 個瀏覽器,把各種情況都測試了一下(這真是一個體力活),結果見下表:
操作 | IE6 | IE7 | IE8 | IE9 | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|---|---|---|
直接在地址栏输入URL | “” | “” | “” | “” | “” | “” | “” | “” |
从书签访问URL | “” | “” | “” | “” | “” | “” | “” | “” |
从页面A点击超链接,跳转到页面B(target=”_self”) | √ | √ | √ | √ | √ | √ | √ | √ |
从页面A点击超链接,跳转到页面B(target=”_blank”) | √ | √ | √ | √ | √ | √ | √ | √ |
从页面A右键单击超链接,在新标签页中打开页面B | - | √ | √ | √ | √ | √ | √ | “” |
从页面A右键单击超链接,在新窗口中打开页面B | √ | √ | √ | √ | √ | √ | √ | “” |
拖动链接到地址栏 | “” | 无法拖动 | 无法拖动 | “” | “” | “” | “” | “” |
拖动链接到标签栏 | - | “” | “” | “” | “” | “” | “” | “” |
使用浏览器的前进、后退按钮 | √ | √ | √ | √ | √ | √ | √ | √ |
JS 修改 location.href | “” | “” | “” | √ | √ | √ | √ | √ |
JS 使用 window.open | “” | “” | “” | “” | √ | √ | √ | √ |
服务器重定向(302跳转) | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 | 定向之前的页面 |
页面 Meta Refresh | “” | “” | “” | “” | “” | 转向页 | 转向页 | 转向页 |
上表中的「√」表示能正常取到 referrer,」」 表示 referrer 為空。
除了 IE 外,其它瀏覽器都是目前官網上能下載到的最新版本,其中 Safari 同時測試了 Windows 版和 Mac 版,結論一樣。
另外還有一些情況未做測試,例如點擊 Flash 跳轉時各瀏覽器下能否保持 referrer 等。
上表中大部分情況是符合預期的,不過似乎也有幾處要注意的:
1、在 Safari 中,右鍵開啟連結會遺失 referrer;
2、在 IE 中,修改 location.href 或使用 window.open 打開頁面會丟失 referrer(IE 9 有一點例外,使用 location.href 跳轉不會丟失 referrer);
3.使用 meta 跳轉時,IE / Firefox 下會遺失 referrer。
最後,一個簡單的結論是:如果你需要透過 document.referrer 擷取頁面存取來源,最好不要使用 JS 跳轉或開啟新窗口,也不要使用 meta 跳轉。