微信分享链接带图片文字和描述

微信最近推出的一个社交工具网站 www.faxinxi.la ,能发投票、活动、文章。

但在微信外的浏览器包括PC端和移动端的都无法浏览这个网站任何内容,那是通过什么来控制的呢?通过微信内输出特定JS接口不太可能,那就只能通过Header信息里的User-agent了,实验后证实没错,通过探测可以知道微信内的User-agent信息:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

就是通过识别MicroMessenger这个关键字来确定是否来自微信,通过浏览器的user-agent插件就可以轻松绕过这个限制。

接下来就可以轻松获得www.faxinxi.la的网页源码,其实这不是一个微信官方的应用,服务端是用ASP.NET写的,而且是IIS服务器,有没有注入漏洞就不知道了,不过注入了也没什么实际价值,呵呵。

为什么要挖掘他的网页源码呢,这才是关键。譬如你发一个投票,网址是http://www.faxinxila.com/post/vote, 但你填完所有信息按提交后,网页地址并没有发生跳转,而是ajax提交信息后弹出一个遮罩层,提示你点右上角的分享按钮,注意,点分享前网址一直保持在/post/vote路径,但点开分享里的信息已经发生了变化,分享出去后,网址也发生了变化,变成了/vote/3投票实际的展示路径。 这是怎么做到的呢?

查看faxinxi里唯一js文件,你会发现一个WeixinJSBridge的输出对象,再对比下通过微信公众平台发出来的文章源文件,也有WeixinJSBridge对象脚本,问题迎刃而解,微信在内嵌webview里输出了WeixinJSBridge对象供web端js调用。faxinxi已经将有用的js提取出来了,详细脚本如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var dataForWeixin={
    appId: "" ,
    url: "http://faxinxi.la/vote/1" ,
    title: "input title here" ,
    desc: "input description here" ,
    fakeid: "" ,
    callback: function (){}
};
( function (){
    var onBridgeReady= function (){
    WeixinJSBridge.on( 'menu:share:appmessage' , function (argv){
       WeixinJSBridge.invoke( 'sendAppMessage' ,{
          "appid" :dataForWeixin.appId,
          "img_url" :dataForWeixin.MsgImg,
          "img_width" : "120" ,
          "img_height" : "120" ,
          "link" :dataForWeixin.url,
          "desc" :dataForWeixin.desc,
          "title" :dataForWeixin.title
       }, function (res){(dataForWeixin.callback)();});
    });
    WeixinJSBridge.on( 'menu:share:timeline' , function (argv){
       (dataForWeixin.callback)();
       WeixinJSBridge.invoke( 'shareTimeline' ,{
          "img_url" :dataForWeixin.TLImg,
          "img_width" : "120" ,
          "img_height" : "120" ,
          "link" :dataForWeixin.url,
          "desc" :dataForWeixin.desc,
          "title" :dataForWeixin.title
       }, function (res){});
    });
    WeixinJSBridge.on( 'menu:share:weibo' , function (argv){
       WeixinJSBridge.invoke( 'shareWeibo' ,{
          "content" :dataForWeixin.title,
          "url" :dataForWeixin.url
       }, function (res){(dataForWeixin.callback)();});
    });
    WeixinJSBridge.on( 'menu:share:facebook' , function (argv){
       (dataForWeixin.callback)();
       WeixinJSBridge.invoke( 'shareFB' ,{
          "img_url" :dataForWeixin.TLImg,
          "img_width" : "120" ,
          "img_height" : "120" ,
          "link" :dataForWeixin.url,
          "desc" :dataForWeixin.desc,
          "title" :dataForWeixin.title
       }, function (res){});
    });
};
if (document.addEventListener){
    document.addEventListener( 'WeixinJSBridgeReady' , onBridgeReady, false );
} else if (document.attachEvent){
    document.attachEvent( 'WeixinJSBridgeReady'   , onBridgeReady);
    document.attachEvent( 'onWeixinJSBridgeReady' , onBridgeReady);
}
})();

以上分享脚本已写入到本文章页,你可以直接用微信分享本文章,会发现标题变成了“这是一个神奇的分享脚本”,文章地址指向了另外一篇微信接口的文章

本文网址

这个代码清晰明了,WeixinJSBridge.on(‘menu:share:timeline’)这段就是分享到朋友圈的作用代码。PS:在faxinxi.la里还发现此网站有72个别名网址,站长真有米。

faxinxi网站其实也没有获得官方进一步的接口支持,譬如直接在微信网页内获得用户的信息,而不需要用户自己去输入昵称,这功能微信其实已经提供支持,但只是没有开放的高级功能,是通过类似于oAuth方式取得授权就可以获得用户信息。

由于faxinxi网站已经被封禁,因此本人另外设置了一个分享脚本的测试地址:

http://wecode.4wer.com/test/weshare.html

页面脚本请自行查阅,其中用到的分享脚本已封装成独立js文件,脚本github地址是:

https://github.com/dodgepudding/wechat-php-sdk/blob/master/wechat.js

你可能感兴趣的:(图片)