Javascript限定网页只能在微信内置浏览器中接见

2019年8月26日 210次阅读 来源: Kevin

近来正在开辟一个微信民众账号，其中有一项功用是用户发送笔墨音讯给民众号，然后民众号返回图文音讯给用户，用户再点击图文音讯即可跳转到一个网页链接，在微信的内置浏览器中翻开。那末题目就来了，这个网页起首触及到了挪动web前端开辟，我优先选择了用HTML5+bootstrap组合来完成页面的雅观效果，前端其他的使命交给javascript处理（这里我是完整运用原生javascript代码，没有用到任何的框架，由于考虑到手机加载网页的速率本来就慢，而且框架中许多用不到的功用也会随网页一同加载，消耗用户流量）。

统统功用都停当今后，客户试用也觉得很惬意，以后我就把代码提交到了正式的服务器上。不过，对方又倏忽提到了一点：你做的页面确切挺美丽的，兼容性也不错，然则这个页面用电脑上的浏览器也是能够接见的，那末其他人就能够很随便地检察页面的源代码，进而copy全部页面，能不能有什么要领防备这一点？那末题目就又来了，我是第一次做微信二次开辟，还没遇到过如许的需求，怎样搞定呢？

一时间想不出来，厥后我就把这个题目先放了放，去做背景的一些营业。在做背景的一个数据收集功用时，PHP代码当中用到了$_SERVER[‘HTTP_USER_AGENT’]这个参数，我倏忽想到浏览器接见网页时都邑发送一个UserAgent给服务器，它内里包含了一些浏览器及用户操作系统的基本信息，既然微信有内置浏览器，那末用微信浏览网页时这个UserAgent内里会不会带上和微信相干的独占的标识呢（毕竟腾讯这么大个公司，而微信又是他们的中心产物之一）？痛快用代码打印一下它的UserAgent来一探终究，javascript代码以下：

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

在我的手机上得到了如图所示的效果：
《Javascript限定网页只能在微信内置浏览器中接见》

这一下果真还真的看到了不一样的处所，置信智慧的朋侪也已发明了，没错，就是这个东西：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，照样能够绕过这条限定的，总的来说就是防正人不防小人了，人人晓得。固然，假如哪位朋侪有处理这个题目的更好要领，还贫苦在下面批评示知，手艺在于互相的分享和交换嘛，呵呵。

感谢您浏览这篇文章，愿望它对您已有了协助！若文中有任何毛病，烦劳您斧正，感谢！

★ 转载请说明本文原地点

    原文作者：Kevin
    原文地址: https://segmentfault.com/a/1190000000754332
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞