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控件的相对独立性
Sep 03 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JsRender for object语法简介
Oct 31 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JavaScript实现tab栏切换效果
Mar 16 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支持页面回退的两种方法
2008/01/10 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
js继承的实现代码
2010/08/05 Javascript
玩转方法:call和apply
2014/05/08 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python 中的int()函数怎么用
2017/10/17 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
餐厅感恩节活动策划方案
2014/10/11 职场文书
纪检监察立案决定书
2015/06/24 职场文书
《鲸》教学反思
2016/02/23 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang