Javascript限制網頁只能在微信內建瀏覽器存取_javascript技巧

那麼問題就來了，這個網頁首先涉及到了行動web前端開發，我優先選擇了用HTML5 bootstrap組合來實現頁面的美觀效果，前端其他的任務交給javascript解決（這裡我是完全使用原生javascript程式碼，沒有用到任何的框架，因為考慮到手機加載網頁的速度本來就慢，而且框架中很多用不到的功能也會隨網頁一起加載，耗費用戶流量）。

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

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

複製程式碼 程式碼如下:

在我的手機上得到如圖所示的結果：

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

複製程式碼 程式碼如下:

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

等等，真的可以這樣收工了麼？你確定不會有其他問題？當然不是，其實這個方法並不會讓你高枕無憂，因為對於偽造的UserAgent，還是可以繞過這條限制的，總的來說就是防君子不防小人了，大家懂得。當然，如果哪位朋友有解決這個問題的更好方法，還麻煩在下面評論告知，技術在於相互的分享和交流嘛，呵呵。