Javascript限制網頁只能在微信內置瀏覽器中訪問

最近正在開發一個微信公衆帳號，其中有一項功能是用戶發送文字消息給公衆號，而後公衆號返回圖文消息給用戶，用戶再點擊圖文消息便可跳轉到一個網頁連接，在微信的內置瀏覽器中打開。那麼問題就來了，這個網頁首先涉及到了移動web前端開發，我優先選擇了用HTML5+bootstrap組合來實現頁面的美觀效果，前端其餘的任務交給javascript解決（這裏我是徹底使用原生javascript代碼，沒有用到任何的框架，由於考慮到手機加載網頁的速度原本就慢，並且框架中不少用不到的功能也會隨網頁一塊兒加載，耗費用戶流量）。

一切功能都就緒之後，客戶試用也以爲很滿意，以後我就把代碼提交到了正式的服務器上。不過，對方又忽然提到了一點：你作的頁面確實挺漂亮的，兼容性也不錯，可是這個頁面用電腦上的瀏覽器也是能夠訪問的，那麼其餘人就能夠很隨便地查看頁面的源代碼，進而copy整個頁面，能不能有什麼方法防止這一點？那麼問題就又來了，我是第一次作微信二次開發，還沒遇到過這樣的需求，怎麼搞定呢？

一時間想不出來，後來我就把這個問題先放了放，去作後臺的一些業務。在作後臺的一個數據採集功能時，PHP代碼當中用到了$_SERVER['HTTP_USER_AGENT']這個參數，我忽然想到瀏覽器訪問網頁時都會發送一個UserAgent給服務器，它裏面包含了一些瀏覽器及用戶操做系統的基本信息，既然微信有內置瀏覽器，那麼用微信瀏覽網頁時這個UserAgent裏面會不會帶上和微信相關的獨有的標識呢（畢竟騰訊這麼大個公司，而微信又是他們的核心產品之一）？乾脆用代碼打印一下它的UserAgent來一探究竟，javascript代碼以下：

<script type="text/javascript">
    alert(navigator.userAgent);
</script>

在個人手機上獲得瞭如圖所示的結果：

這一下果真還真的看到了不同的地方，相信聰明的朋友也已經發現了，沒錯，就是這個東西：MicroMessenger/6.0.0.50_r844973.501，斜槓後面的這一串就是我當前使用的微信的版本號，前面則應該是微信的一個獨有標識了。其實我一開始當作了MicroMessage，想着中文翻譯過來是「微消息」的意思，但仔細一看發現不是的，後面查了詞典才知道Messenger這個詞有「報信者，送信者」的意思，也就不以爲奇怪了。這個標識應該來講是其餘瀏覽器不會有的，那麼解決方案就來了，請看代碼：

<script type="text/javascript">
    // 對瀏覽器的UserAgent進行正則匹配，不含有微信獨有標識的則爲其餘瀏覽器
    var useragent = navigator.userAgent;
    if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
        // 這裏警告框會阻塞當前頁面繼續加載
        alert('已禁止本次訪問：您必須使用微信內置瀏覽器訪問本頁面！');
        // 如下代碼是用javascript強行關閉當前頁面
        var opened = window.open('about:blank', '_self');
        opened.opener = null;
        opened.close();
    }
</script>

這段代碼在Android、iPhone、iPad、PC上都進行了測試，只要不是在微信內部打開網頁的，首先就會彈出上面那個警告框，此時後面的頁面是空白的，什麼都還沒加載，當點擊警告框的肯定按鈕以後，最後三行代碼將強行關閉當前頁面。OK，到這裏算是實現了用戶本來的意思了，能夠簡單收工了。

等等，真的能夠這樣收工了麼？你肯定不會有其餘問題？固然不是，其實這個方法並不會讓你高枕無憂，由於對於僞造的UserAgent，仍是能夠繞過這條限制的，總的來講就是防君子不防小人了，你們懂得。固然，若是哪位朋友有解決這個問題的更好方法，還麻煩在下面評論告知，技術在於相互的分享和交流嘛，呵呵。

感謝您閱讀這篇文章，但願它對您已經有了幫助！若文中有任何錯誤，煩勞您指正，謝謝！

★ 轉載請註明本文原地址