资讯专栏INFORMATION COLUMN

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

cyrils / 1458人阅读

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

最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开。那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因为考虑到手机加载网页的速度本来就慢,而且框架中很多用不到的功能也会随网页一起加载,耗费用户流量)。

一切功能都就绪以后,客户试用也觉得很满意,之后我就把代码提交到了正式的服务器上。不过,对方又突然提到了一点:你做的页面确实挺漂亮的,兼容性也不错,但是这个页面用电脑上的浏览器也是可以访问的,那么其他人就可以很随便地查看页面的源代码,进而copy整个页面,能不能有什么方法防止这一点?那么问题就又来了,我是第一次做微信二次开发,还没遇到过这样的需求,怎么搞定呢?

一时间想不出来,后来我就把这个问题先放了放,去做后台的一些业务。在做后台的一个数据采集功能时,PHP代码当中用到了$_SERVER["HTTP_USER_AGENT"]这个参数,我突然想到浏览器访问网页时都会发送一个UserAgent给服务器,它里面包含了一些浏览器及用户操作系统的基本信息,既然微信有内置浏览器,那么用微信浏览网页时这个UserAgent里面会不会带上和微信相关的独有的标识呢(毕竟腾讯这么大个公司,而微信又是他们的核心产品之一)?干脆用代码打印一下它的UserAgent来一探究竟,javascript代码如下:


在我的手机上得到了如图所示的结果:

这一下果然还真的看到了不一样的地方,相信聪明的朋友也已经发现了,没错,就是这个东西:MicroMessenger/6.0.0.50_r844973.501,斜杠后面的这一串就是我当前使用的微信的版本号,前面则应该是微信的一个独有标识了。其实我一开始看成了MicroMessage,想着中文翻译过来是“微消息”的意思,但仔细一看发现不是的,后面查了词典才知道Messenger这个词有“报信者,送信者”的意思,也就不觉得奇怪了。这个标识应该来说是其他浏览器不会有的,那么解决方案就来了,请看代码:


这段代码在Android、iPhone、iPad、PC上都进行了测试,只要不是在微信内部打开网页的,首先就会弹出上面那个警告框,此时后面的页面是空白的,什么都还没加载,当点击警告框的确定按钮之后,最后三行代码将强行关闭当前页面。OK,到这里算是实现了用户原本的意思了,可以简单收工了。

等等,真的可以这样收工了么?你确定不会有其他问题?当然不是,其实这个方法并不会让你高枕无忧,因为对于伪造的UserAgent,还是可以绕过这条限制的,总的来说就是防君子不防小人了,大家懂得。当然,如果哪位朋友有解决这个问题的更好方法,还麻烦在下面评论告知,技术在于相互的分享和交流嘛,呵呵。

感谢您阅读这篇文章,希望它对您已经有了帮助!若文中有任何错误,烦劳您指正,谢谢!

★ 转载请注明本文原地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85361.html

相关文章

  • 移动端真机调试实战经验

    摘要:我个人比较推荐的方法是或者安卓手机的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客:http://cherryblog.site/ ,欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差...

    qingshanli1988 评论0 收藏0
  • 移动端真机调试实战经验

    摘要:我个人比较推荐的方法是或者安卓手机的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客:http://cherryblog.site/ ,欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差...

    rainyang 评论0 收藏0
  • 微信小程序开发的二三事之网易云信IMSDK DEMO

    摘要:传统的网页编程采用的三剑客来实现,在微信小程序中同样有三剑客。观察者模式不难实现,重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型,微信小程序中自然也有。 本文由作者邹永胜授权网易云社区发布。 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

    weij 评论0 收藏0
  • 移动端H5页面注意事项

    摘要:移动端活动页面常常需要能够分享到各种社交中,常用的有微信等。微信二维码问题同一个页面里要是有两个二维码,长按扫描总是只能扫出左侧第一个二维码。 首发于简书博客:http://www.jianshu.com/p/e958... 2017-11-25 更新:5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶...

    weknow619 评论0 收藏0
  • 移动端H5页面注意事项

    摘要:移动端活动页面常常需要能够分享到各种社交中,常用的有微信等。微信二维码问题同一个页面里要是有两个二维码,长按扫描总是只能扫出左侧第一个二维码。 首发于简书博客:http://www.jianshu.com/p/e958... 2017-11-25 更新:5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶...

    madthumb 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<