AD

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

最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开。

那么问题就来了,这个网页首先涉及到了移动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技巧
时间: 2013-12-04

相关文章

  1. 如何判断微信内置浏览器(通过User Agent实现)

    在进行微信公众账号开发的时候,需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?这是就只有通过浏览器的User Agent来进行判断了 在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏 ...
  2. 如何判断微信内置浏览器

    在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User ...
  3. (转)如何判断微信内置浏览器

    在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User ...
  4. 微信内置浏览器UserAgent获取

    在iPhone下,返回 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobil ...
  5. android内置浏览器不支持websocket的解决方法

    为了实现移动客户端实时通信,拟采用安卓webview内嵌html实现方式开发app,通信则采用最新的html5新特性websocket实现.经测试,android4.0以下内置浏览器都不支持websocket特性.经过g ...
  6. PHP限制页面只能在微信自带浏览器访问的代码

    我们都想限制程序只能在微信里面浏览,下面是PHP限制页面只能在微信自带浏览器访问的代码,大家可以参考下 为了防止自己辛辛苦苦做的webapp被人copy,我们都想限制程序只能在微信里面浏览,虽然下面实现了这个功能,单都是 ...
  7. 拆解发现iPhone 5内置支持中移动TD芯片

    北京时间9月25日凌晨消息,手机维修网站iFixit在拆解iPhone 5时发现,这款新手机内置一块支持TD-SCDMA标准的高通芯片,意味着iPhone 5或许已经扫清了苹果与中国移动合作的障碍.但iPhone 5目前 ...
  8. ubuntu 系统下 eclipse 无法使用内置浏览器

    安装libwebkitgtk-1.0-0 sudo apt-get install libwebkitgtk-1.0-0
  9. Javascript内置对象

    Javascript作为一门编程语言,javascript提供了一些内置的对象.内置对象提供编程的集中最常用的功能.Javascript内置对象有以下几种. 1.String对象:处理所有的字符串操作 2.Math对象: ...
  10. asp 内置对象 Application 详解

    asp内置对象 Application 详解 在 ASP 的内建对象中除了用于发送.接收和处理数据的对象外,还有一些非常实用的代表 Active Server 应用程序和单个用户信息的对象. 让我们先来看看 Applic ...
  11. js内置对象 学习笔记

    今天系统的学了一下javascript的内置对象. mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http://www.jb51. ...
  12. Windows 7内置定位服务引发安全疑虑

    在上周举行的WinHEC大会上,微软向开发者们展示了Windows 7中将内置的定位API.软件商利用这一编程接口,可以开发出各种各样基于定位的功能,比如社交软件中实现找到附近好友,以及笔记本失窃追踪等等的功能. Win ...
  13. Asp.net内置对象之Server对象(概述及应用)

    Server对象提供对服务器上的方法和属性的访问以及进行HTML编码的功能,本文主要围绕server对象介绍详细功能及常用属性和主要方法,感兴趣的朋友可以了解下,或许对你学习server对象有所帮助 一.了解Server ...
  14. 手机软件掀内置圈地运动:游戏商可月赚3000万

    (记者 舒杰) 内置软件产生的影响显然尚未显现,其最终影响不仅仅局限于数额有限的上网费用,更将影响移动互联网的未来格局. 对于免费手机软件而言,占领市场才是当务之急,而这也是它们钟情于内置的主要原因. "仅仅游 ...
  15. PHP入门(1)--内置Web服务器

    众所周知,PHP代码需要web服务器来执行,要测试PHP代码就得搭建一个web服务器,这就给我们平时学习带来了较多不便.不过好在PHP v5.4版本以后,PHP会自带一个功能简单的web服务器. 启动内置web服务器 首 ...
  16. JavaScript 核心参考教程 内置对象

    JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言.这个标准由 ECMA 组织发展和维护.ECMA-262 是正式的 JavaScript 标准. 这个标准基于 JavaSc ...
  17. 了解 JavaScript 中的内置对象

    所有编程语言都具有内部(或内置的)对象来创建 语言的基本功能.内部对象是 您编写自定义代码所用语言的基础, 该代码基于您的想象实现自定义功能.JavaScript 有许多 将其定义为语言的内部对象.本文介绍了一些 最常用 ...
  18. javascript 基础篇3 类,回调函数,内置对象,事件处理

    在js中自定义一个类跟java c++就有比较大的区别了,因为这个格式用公式表达起来比较困难,大体说一下吧 function 类名(参数表){ this.属性; ...... this.函数; } 这样,函数和数据成员都 ...
  19. javascript function.指针及内置对象

    该文摘自于匿名教程总结,希望对初学js的同学有帮助,因为它解决了我学习js的众多迷惑... 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. javascript中的函数不同于其他的 ...