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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue实现移动端返回顶部
Oct 12 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
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
详解Python多线程
2016/11/14 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
华为慧通笔试题
2016/04/22 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
自荐信格式的六要素
2013/09/21 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
20岁生日感言
2014/01/13 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
小学语文教研活动总结
2014/07/01 职场文书
食品安全汇报材料
2014/08/18 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
房屋产权证明书
2014/10/15 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏