Javascript限制网页只能在微信内置浏览器中访问


Posted in Javascript onNovember 09, 2014

那么问题就来了,这个网页首先涉及到了移动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,还是可以绕过这条限制的,总的来说就是防君子不防小人了,大家懂得。当然,如果哪位朋友有解决这个问题的更好方法,还麻烦在下面评论告知,技术在于相互的分享和交流嘛,呵呵。

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
js闭包的用途详解
Nov 09 #Javascript
js闭包实例汇总
Nov 09 #Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 #Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
You might like
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
JS动画效果代码3
2008/04/03 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
教你怎样写好自我评价
2013/10/05 职场文书
自荐信格式
2013/12/01 职场文书
保险公司年会主持词
2014/03/22 职场文书
求职意向书范文
2014/04/01 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
教师思想工作总结2015
2015/05/13 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL