WebSth 指纹识别插件简要分析

    先看看识别效果：

    之前接触过chrome插件的开发（只是看过一部分文档），所以对插件的运行流程有所了解。

    代码的文件结构是这样：

    其中有一个manifest.json，一个json格式的文件，读过文档的就知道这个文件其实是chrome加载插件的主文件，里面配置了一些关于插件的信息。我们打开参观一下：

{  "name": "__MSG_extName__",  "description": "__MSG_extDescription__",  "permissions": [ "http://*/*", "https://*/*", "tabs", "storage" ],  "version": "1.1.0",  "manifest_version": 2,  "default_locale": "en",  "icons": {    "128": "icon-128x128.png"  },  "background": {    "scripts": [      "js/web_technologies.js",       "js/web_servers.js",       "js/oses.js",       "js/web_front_libraries.js",       "js/web_apps.js",      "js/background.js"    ],    "persistent": true    },  "content_scripts": [ {    "js": ["js/website_analyzer.js"],    "matches": [ "http://*/*", "https://*/*" ],    "run_at": "document_end"  } ],  "options_page": "options.html",  "page_action": {    "default_popup": "popup.html"  }}

    于是我们跟踪一下，打开js/website_analyzer.js。，发现其中代码功能是ajax获取当前访问的网页内容，并传递给扩展。其中定义了这样一个对象：

var data = {            "header"    : this.getAllResponseHeaders(),            "dom"       : covertNodes(document),            "hostname"  : hostname,            "port"      : document.location.port        };

    返回到我们的manifest.json中，还能找到一个background字段，里面保存了不止一个的js文件，这些js文件就是运行在我们插件整个生命周期中的脚本。其中有一个background.js，它接受到了浏览器页面传递来的data数据，然后对它进行处理。

    打开background.js文件，略长，我们只分析web指纹那个部分。

// match web appsvar apps = []for (var i in web_apps) {  for (var j in web_apps[i]['rules']) {    if (findNode(root, web_apps[i]['rules'][j].type, web_apps[i]['rules'][j].match, web_apps[i]['rules'][j].name, web_apps[i]['rules'][j].attributes)) {      apps.push(web_apps[i]);      break;    }  }}technologyData[sender.tab.id]['web_apps'] = apps;

function findNode(root, type, text, name, attr){  // type = [  //  1, // element   //  3, // text  //  8  // comment  // ]  // text = reg to search  // name = element tagName  // attr = element attr to search  for (var node in root){    if(type == 1 && root[node].nodeType == type){ // element      if (root[node].nodeName.toUpperCase() == name.toUpperCase()){        var search_str = root[node].attributes[attr.toLowerCase()];        if (search_str.match(text)){          return true;        }      }    }else if(root[node].nodeType == type){ // text & comment      if (root[node].nodeValue.match(text)) {        return true;      }    }  }  return false;}

    我们举个例子，比如discuz的规则：

{        "icon": "discuz.jpg",        "title": "Discuz!",        "url"  : "http://www.discuz.net",        "rules": [            {                "type": 1,                "name": "SCRIPT",                "attributes": "src",                "match": "logging//.js"            },            {                "type": 1,                "name": "META",                "attributes": "content",                "match": "Discuz//!"            },            {                "type": 3,                "name": "TITLE",                "attributes": "",                "match": "Powered by Discuz//!"            },            {                "type": 1,                "name": "A",                "attributes": "href",                "match": "^home.php//?mod=space"            }        ]    },

    因为discuz的规则有四个，我们看代码发现，只要有一个满足就跳出，匹配下一个web app，所以准确度不高，只能说是疑似discuz。像我之前那个截图一样，出现了dedecms和pwiki两个可能，还需要进一步的确认才行。

    填充了apps这个对象以后，把它保存 technologyData[sender.tab.id]['web_apps'] = apps;

    主目录下还有一个popup.html，作用就是我点击插件的按钮，弹出的那个小框的html代码。打开发现就是一个什么内容都没有的html，但最后加载了js/popup.js这个脚本。这个脚本就是把technologyData中的内容取出来，写到popup.html里，让用户看。

    打开popup.js，看到web指纹那个部分。

    找到如下代码：

if (data['web_apps'].length != 0) {        var tr = document.createElement('tr');        var td1 = document.createElement('td');        td1.innerHTML =  "<strong>";        td1.innerHTML += chrome.i18n.getMessage("webApps");        td1.innerHTML += "</strong>";        var td2 = document.createElement('td');        td2.setAttribute("colspan", "2");        for (var i in data['web_apps']) {            if (data['web_apps'][i].url){                // td2.innerHTML += "<a href=/"" + data['web_apps'][i].url + "/" target=/"_blank/"><img class=/"img/" width=/"19px/" hight=/"19px/" src=/"icons/" + data['web_apps'][i].icon + "/" />&nbsp;&nbsp;" + data['web_apps'][i].title + "</a>";                td2.innerHTML += "<a href=/"" + data['web_apps'][i].url + "/" target=/"_blank/"><img class=/"img/" width=/"19px/" hight=/"19px/" src=/"icons/" + data['web_apps'][i].icon + "/" title=/"" + data['web_apps'][i].title + "/" />&nbsp;" + data['web_apps'][i].title + "</a>&nbsp;&nbsp;";            }else{                td2.innerHTML += "<img class=/"img/" width=/"19px/" hight=/"19px/" src=/"icons/" + data['web_apps'][i].icon + "/" />&nbsp;" + data['web_apps'][i].title + "&nbsp;&nbsp;";            }        }        tr.appendChild(td1);        tr.appendChild(td2);        document.getElementById("detail").appendChild(tr);    }

    最后，我们梳理一遍流程：

    1.打开浏览器，预先加载插件的javascript，比如background.js等

    2.进入一个网站：discuz.net

    3.加载js/website_analyzer.js，通过ajax获得所访问网站的DOM和其他信息

    4.background.js获取到DOM，执行一个for in 循环，遍历web_apps对象，对其中每一个web app类型做比对。比对过程是遍历DOM，发现匹配就退出，执行下一次比对。

    5.返回比对结果。如果此时用户点击插件按钮，即弹出popup.html，其中执行popup.js，该js把相关信息写入popup.html让用户查看。

    读过代码后知道这个插件是靠DOM元素的匹配来识别某个web指纹，相比于其他一些比如md5指纹识别要更适合javascript，可扩展性也好（我们可以修改web_apps.js来手工添加一些web指纹信息）。