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


轉載:http://segmentfault.com/a/1190000000754332

最近正在開發一個微信公眾賬號,其中有一項功能是用戶發送文字消息給公眾號,然后公眾號返回圖文消息給用戶,用戶再點擊圖文消息即可跳轉到一個網頁鏈接,在微信的內置瀏覽器中打開。那么問題就來了,這個網頁首先涉及到了移動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,還是可以繞過這條限制的,總的來說就是防君子不防小人了,大家懂得。當然,如果哪位朋友有解決這個問題的更好方法,還麻煩在下面評論告知,技術在於相互的分享和交流嘛,呵呵。

感謝您閱讀這篇文章,希望它對您已經有了幫助!若文中有任何錯誤,煩勞您指正,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM