Javascript限制網(wǎng)頁只能在微信內(nèi)置瀏覽器中訪問

cyrils 發(fā)布于2019-08-21 10:20 / 1551人閱讀

摘要：最近正在開發(fā)一個(gè)微信公眾賬號(hào)，其中有一項(xiàng)功能是用戶發(fā)送文字消息給公眾號(hào)，然后公眾號(hào)返回圖文消息給用戶，用戶再點(diǎn)擊圖文消息即可跳轉(zhuǎn)到一個(gè)網(wǎng)頁鏈接，在微信的內(nèi)置瀏覽器中打開。

最近正在開發(fā)一個(gè)微信公眾賬號(hào)，其中有一項(xiàng)功能是用戶發(fā)送文字消息給公眾號(hào)，然后公眾號(hào)返回圖文消息給用戶，用戶再點(diǎn)擊圖文消息即可跳轉(zhuǎn)到一個(gè)網(wǎng)頁鏈接，在微信的內(nèi)置瀏覽器中打開。那么問題就來了，這個(gè)網(wǎng)頁首先涉及到了移動(dòng)web前端開發(fā)，我優(yōu)先選擇了用HTML5+bootstrap組合來實(shí)現(xiàn)頁面的美觀效果，前端其他的任務(wù)交給javascript解決（這里我是完全使用原生javascript代碼，沒有用到任何的框架，因?yàn)榭紤]到手機(jī)加載網(wǎng)頁的速度本來就慢，而且框架中很多用不到的功能也會(huì)隨網(wǎng)頁一起加載，耗費(fèi)用戶流量）。

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

一時(shí)間想不出來，后來我就把這個(gè)問題先放了放，去做后臺(tái)的一些業(yè)務(wù)。在做后臺(tái)的一個(gè)數(shù)據(jù)采集功能時(shí)，PHP代碼當(dāng)中用到了$_SERVER["HTTP_USER_AGENT"]這個(gè)參數(shù)，我突然想到瀏覽器訪問網(wǎng)頁時(shí)都會(huì)發(fā)送一個(gè)UserAgent給服務(wù)器，它里面包含了一些瀏覽器及用戶操作系統(tǒng)的基本信息，既然微信有內(nèi)置瀏覽器，那么用微信瀏覽網(wǎng)頁時(shí)這個(gè)UserAgent里面會(huì)不會(huì)帶上和微信相關(guān)的獨(dú)有的標(biāo)識(shí)呢（畢竟騰訊這么大個(gè)公司，而微信又是他們的核心產(chǎn)品之一）？干脆用代碼打印一下它的UserAgent來一探究竟，javascript代碼如下：

在我的手機(jī)上得到了如圖所示的結(jié)果：

這一下果然還真的看到了不一樣的地方，相信聰明的朋友也已經(jīng)發(fā)現(xiàn)了，沒錯(cuò)，就是這個(gè)東西：MicroMessenger/6.0.0.50_r844973.501，斜杠后面的這一串就是我當(dāng)前使用的微信的版本號(hào)，前面則應(yīng)該是微信的一個(gè)獨(dú)有標(biāo)識(shí)了。其實(shí)我一開始看成了MicroMessage，想著中文翻譯過來是“微消息”的意思，但仔細(xì)一看發(fā)現(xiàn)不是的，后面查了詞典才知道Messenger這個(gè)詞有“報(bào)信者，送信者”的意思，也就不覺得奇怪了。這個(gè)標(biāo)識(shí)應(yīng)該來說是其他瀏覽器不會(huì)有的，那么解決方案就來了，請看代碼：

這段代碼在Android、iPhone、iPad、PC上都進(jìn)行了測試，只要不是在微信內(nèi)部打開網(wǎng)頁的，首先就會(huì)彈出上面那個(gè)警告框，此時(shí)后面的頁面是空白的，什么都還沒加載，當(dāng)點(diǎn)擊警告框的確定按鈕之后，最后三行代碼將強(qiáng)行關(guān)閉當(dāng)前頁面。OK，到這里算是實(shí)現(xiàn)了用戶原本的意思了，可以簡單收工了。

等等，真的可以這樣收工了么？你確定不會(huì)有其他問題？當(dāng)然不是，其實(shí)這個(gè)方法并不會(huì)讓你高枕無憂，因?yàn)閷?duì)于偽造的UserAgent，還是可以繞過這條限制的，總的來說就是防君子不防小人了，大家懂得。當(dāng)然，如果哪位朋友有解決這個(gè)問題的更好方法，還麻煩在下面評(píng)論告知，技術(shù)在于相互的分享和交流嘛，呵呵。

感謝您閱讀這篇文章，希望它對(duì)您已經(jīng)有了幫助！若文中有任何錯(cuò)誤，煩勞您指正，謝謝！

★ 轉(zhuǎn)載請注明本文原地址