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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
对联广告js flash激活
2006/10/19 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python实现的登录和操作开心网脚本分享
2014/07/09 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python输出各行命令详解
2018/02/01 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
如何将json数据转换为python数据
2020/09/04 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
标准导师推荐信(医学类)
2013/10/28 职场文书
小学运动会班级口号
2014/06/09 职场文书
横幅标语大全
2014/06/17 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
党员作风建设整改方案
2014/10/27 职场文书
财务会计实训报告
2014/11/05 职场文书
库房管理员岗位职责
2015/02/12 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书