您的位置:首页 > 运维架构 > 网站架构

对某音乐网站歌曲链接抓取的分析

2016-12-04 20:52 204 查看
一、用到的工具:

chrome

fiddler

二、网站内容分析

1、打开该网站,分析页面歌曲链接,特点是都在尾端连接一个数字序列,猜测为songid。

2、点击歌曲,跳转到歌曲播放页面,通过查看页面的源代码,分析js代码,发现页面有该歌曲的json数据(包括歌曲id,src等信

息),使用chrome内置console.log()方法打印当前页面播放器对象,发现

entityde currentSrc属性为歌曲的链接地址。在浏览器打开

该地址跳转到首页,而不是真正的歌曲地址。该歌曲地址在chrome开发工具切换到network选项也能得到,在fiddler一样得到。

在fiddler中发现页面在打开该歌曲地址时,网站302 跳转到真正的歌曲地址(response header里面有location到真正的歌曲

地址)。至此,明白了该网站隐藏歌曲地址的原理,通过ajax异步获取该歌曲的相对路径,生成歌曲的解析地址,再通过ajax异步

解析歌曲的真正地址进行播放。

   3、通过分析该网站的歌曲搜索,异步加载歌曲搜索结果,该结果是jsonp格式返回歌曲搜索结果的。这为在本地构建一个歌曲

搜索提供了支持。

三、本地搜索歌曲模拟

   1、编写一个简单的歌曲搜索页面,当提交查询时,能够跨域异步获取该网站对该关键词的查询结果,结果包括该歌曲的songid,

src(相对地址)、singerName等。

   2、在歌曲异步获取的success:function(){}中完成对歌曲真正地址的解析,地址解析的基本步骤就是通过在后台服务端请求

解析地址,获取response header信息,提取location属性值得到该歌曲的真正地址,返回给前端,进而生成了真正歌曲链接。

四、总结本次抓包分析

   1、chrome内置的console功能强大,可以直接打印javascript对象、数组,查看数据情况。

   2、fiddler抓包分析,能够根据http code了解请求、返回结果情况。

   3、jsonp的使用,fiddler内置json数据解析。

   4、对该网站的js代码分析,接受到了跨域的其他技术比如window.name与document.domain在根域名相同的情况,二级域名

跨域访问的问题。

  5、通过使用jquery,学习了为动态生成的元素绑定事件的方法在动态生成的元素的父元素上(静态).live('eventname','要

绑定的元素',function(){}。

$(".MathJax").remove();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: