記錄大衆點評的字體反爬——Css+svg

 

地址：http://www.dianping.com/shop/9964442

 

檢查一下看到好多字沒有了，替代的是<x class="xxx"></x>這種標籤

定位到元素在css裏的位置

 

打開url找到文字

 

介紹SVG

 svg可縮放矢量圖形基於可擴展標記語言——用代碼畫矢量圖

能夠寫入文本以下圖，xy是相對於svg標籤的座標，默認單位px

 

textPath

該元素利用xlink:href屬性取得一個任意路徑，把字符對齊到路徑，字體會環繞路徑、順着路徑走： 

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

textpath根據xlink:href 取得path路徑，d內是路線參數

關於d內的參數：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

此次反爬只用到了M和H，M是xy座標，H是水平線表示文字方向是水平方向。

參考資料：https://cloud.tencent.com/developer/section/1423872

 

破解字體的思路

1.找到css

2.找到svg

3.獲得css裏每一個字的座標，並在svg裏計算出具體的字

4.把class 標籤和字對應起來，進行全局替換

代碼以下：

headers={"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"}
r=requests.get("http://www.dianping.com/shop/9964442",headers=headers)
css_url="http:"+re.findall('href="(//s3plus.meituan.net.*?svgtextcss.*?.css)',r.text)[0]
css_cont=requests.get(css_url,headers=headers)

獲得css頁面

svg_url=re.findall('class\^="(\w+)".*?(//s3plus.*?\.svg)',css_cont.text)
s_parser=[]
for c,u in svg_url:
    f,w=svg_parser("http:"+u)
    s_parser.append({"code":c,"font":f,"fw":w})

獲得svg地址

解析svg並返回解析結果和定位svg的代碼

def svg_parser(url):
    r=requests.get(url,headers=headers)
    font=re.findall('" y="(\d+)">(\w+)</text>',r.text,re.M)
    if not font:
        font=[]
        z=re.findall('" textLength.*?(\w+)</textPath>',r.text,re.M)
        y=re.findall('id="\d+" d="\w+\s(\d+)\s\w+"',r.text,re.M)
        for a,b in zip(y,z):
            font.append((a,b))
    width=re.findall("font-size:(\d+)px",r.text)[0]
    new_font=[]
    for i in font:
        new_font.append((int(i[0]),i[1]))
    return new_font,int(width)

在爬取到結果後有些字沒解析出來，發現有兩種text形式

一種帶路徑的textPath，行數在d=「xx」的M裏

另外一種是text，行數在text標籤裏y的值

兩種格式不一樣須要分別處理

 

上面函數返回一個元組包含字體座標y的參考值和字體內容，fw是字體寬度，以下所示

 

css_list = re.findall('(\w+){background:.*?(\d+).*?px.*?(\d+).*?px;', '\n'.join(css_cont.text.split('}')))
css_list = [(i[0],int(i[1]),int(i[2])) for i in css_list]

從css裏拿到全部class值和座標

def font_parser(ft):
    for i in s_parser:
        if i["code"] in ft[0]:
            font=sorted(i["font"])
            if ft[2] < int(font[0][0]):
                x=int(ft[1]/i["fw"])
                return font[0][1][x]
            for j in range(len(font)):
                if (j+1) in range(len(font)):
                    if(ft[2]>=int(font[j][0]) and ft[2]< int(font[j+1][0])):
                        x=int(ft[1]/i["fw"])
                        return font[j+1][1][x]

根據class的座標在svg裏計算是哪一個字，函數傳入的ft是單個class元祖

y座標定位文字所在行數，x座標是元組x/字體寬度，返回結果一個文字

replace_dic=[]
for i in css_list:
    replace_dic.append({"code":i[0],"word":font_parser(i)})

解析css裏的全部class，把class和字的關係存在字典裏

rep=r.text
for i in range(len(replace_dic)):
    if replace_dic[i]["code"] in rep:
        a=re.findall(f'<\w+\sclass="{replace_dic[i]["code"]}"><\/\w+>',rep)[0]
        rep=rep.replace(a,replace_dic[i]["word"])

根據字典對頁面<x class="xxx"></x>標籤全局替換

shop=[]
shop_name=tree.xpath('//h1[@class="shop-name"]//text()')[0]
reviewCount=tree.xpath('//span[@id="reviewCount"]//text()')[0]
avgPriceTitle=tree.xpath('//span[@id="avgPriceTitle"]//text()')[0]
comment_score=tree.xpath('//span[@id="comment_score"]//text()')
comment_score=[i for i in comment_score if i!=" "]
addr=tree.xpath('//span[@itemprop="street-address"]/text()')[0]
phone=tree.xpath('//p[@class="expand-info tel"]//text()')
phone=phone[1]+phone[2]
review=[]
for li in lis:
    name=li.xpath('.//a[@class="name"]/text()')[0]
    comment=li.xpath('.//p[@class="desc"]/text()')[0]
    review.append({"name":name,"comment":comment})
shop.append({
    "shop_name":shop_name,
    "reviewCount":reviewCount,
    "avgPriceTitle":avgPriceTitle,"addr":addr,
    "phone":phone,
    "review":review
})

抓一下店名評論數評論評分電話地址等

用的庫

 

大衆點評不僅使用一種反爬，還用了自定義字體，自定義字體已研究過