wapi是什么(详细来说就是用字体库加密数据)（综合百科）-茶馆百科网

作者：亚伦

转发链接：https://segmentfault.com/a/1190000022781346

前言

对于前端的同学来说，他们实际做的是把数据整合好，按照UI同学的设计，把后端同学给的数据显示在网页里，导致很多人觉得前端很简单，后端没有工作，也没有复杂的业务逻辑。

其实前端有很多工作要做。比如今天，我想讲讲如何实现数据的反抓取。笔者最近也接到了同样的任务。该公司的数据经常被爬虫爬走。发生这种情况后，我开始研究如何实现前端业务数据的反抓取。刚接到这个需求的时候，不知道怎么处理，只好硬着头皮接了任务。

接到任务后，我就开始各种Google。我觉得要做反爬虫，首先要知道爬虫是什么，是怎么工作的。这就像我们必须足够了解我们的对手，才能知道如何防守。

爬虫就是发送http请求得到响应后获取内容，按照一定规则自动抓取网页信息，然后保存数据的过程。

一开始作者还写了一个小爬虫来练习，大概就是发送一个get请求，然后通过类似DOM操作的东西在网页中找到需要的数据，然后存储起来。

分析58个案例

在调查的过程中，我发现很多博客都是针对58同城的网页数据抓取的，于是我就点进去看了看。58是用于加密数据的字体。你看到的和你实际展示的不一致。看起来很高端。

这是什么情况？所以我们查看了当前元素的CSS样式，我们可以注意到这个元素使用了一种奇怪的字体系列： fangchan-secret(real estate-encryption)字体样式。如果我们关闭这种strongbox样式，停止使用这种字体，乱码就会如实显示在页面上。

其实可以看出，58同城是用字体家族的字体进行加密的。作者在网络上找了很久也找不到关于这一段的这个字体文件。啊？那么字体是从哪里来的呢？于是笔者去查了一下font-family和@font-face一个CSS的相关文献。

原来@font-face不仅可以接收一个文件的地址，还可以在src中使用base64作为参数。于是我在58同城的页面里查了一下源代码。正如我所想，58同城并没有拉字体库资源，而是在页面刚创建的时候通过JavaScript脚本动态添加到页面中。

大概知道了58的骚操作后，我开始研究下一步，如何去体会文字里看到的和实际看到的区别。实际上，每个汉字和字符都对应一个Unicode编码。从第一张图不难看出，查看源代码时这些都是Unicode编码，浏览器通过Unicode在字体库中找到对应的字符。这个类似于通常的字体图标库(个人认为。哈哈哈)。

打开百度字体编辑网站，在中打开一个字体文件。ttf格式。

可以清楚的看到字体包里的每一个字，以$开头的缩写是unicode，并且做了一些处理，否则浏览器会直接解析成相应的字符。

接下来我回过头来分析一下58同城网页如何运营。当我查看源代码时，我看到的是另外5个unicode代码。这个unicode对应另一个不常用的汉字。

我们先把这一段写下来。为了更好的理解，把矛头指向使用过阿里logo库的同学应该不会陌生。阿里logo库会将svg文件转换成字体，通过下载引入我们的项目，完成图标展示。将为不同的字体生成新的unicode编码，但这些新的Unicode编码不会与现有字体库中的Unicode编码冲突。

由此，我们可以认为。ttf文件是一个svg文件。我们只需要通过技术手段将字体包转换成svg，获得svg中每个字体的绘制参数，将原文的unicode替换为生僻字的编码。说了就做了。

编程；编排

因为字体文件太多，所以在程序运行前需要对这些字体文件进行处理。将它们转换成svg需要很长时间，所以不可能每次收到请求都这样做。因此，为了能够在请求期间快速处理它们，您必须在程序运行之前将字体包转换成svg。

但是有一个问题，不是所有的字符都需要加密，而是一些特定的字符需要加密。所以为了保证这个操作，把目前需要加密的字符写入数据库，转换成svg后读取svg文件中的标签，标签中的绘制路径的属性和一些必要的参数按照对应的字符存储在数据库中。

每次收到数据请求时直接读取数据库中的数据，然后生成一个svg文件，再将生成的svg文件处理成base64并发送到前端完成显示。

解析字体文件

我遇到的第一个问题是如何解析字体文件。因为不太懂其他语言，只能用node，通过搜索npm仓库找到了相关库ttf2svg。

首先安装此库：

此处使用了Npminstall-save-devttf2svg

基础字体库是微软雅黑这个文件在电脑中就可以找到。MicrosoftYaHei.ttf如果找不到的小伙伴可以自行百度一下。

读取字体包转svg代码如下：

importpathfrom"path";importfsfrom"fs";importutilfrom"util";importttf2svgfrom"ttf2svg";//每次启动前需要删除原有svg文件，以防改变了所需要加密的字体包，参数没有及时发生变化import{removeDir}from"../util/fs";//读取文件constreadFile=util.promisify(fs.readFile);//写入文件constwriteFile=util.promisify(fs.writeFile);//创建文件夹constmkdir=util.promisify(fs.mkdir);constttfToSvg=async()=>{//运行根目录constrootPath=process.cwd();//.ttf文件所在目录constttfUrl=path.join(rootPath,"static/ttf/MicrosoftYaHei.ttf");//导出文件文件夹名称constsaveSvgMkdirName="ttfSvg";//svg存储路径constsaveSvgUrl=path.resolve(rootPath,`${saveSvgMkdirName}/MicrosoftYaHei.svg`);//svg文件夹路径constsvgDirUrl=path.resolve(rootPath,saveSvgMkdirName);//读取ttf文件生成bufferconstttfBuffer=awaitreadFile(ttfUrl);//通过ttf2svg将buffer转换成svgconstsvgContent=ttf2svg(ttfBuffer);//删除原有svg文件removeDir(svgDirUrl);//创建存放svg文件夹awaitmkdir(svgDirUrl);//写入svgawaitwriteFile(saveSvgUrl,svgContent);//返回存放svg的路径地址returnsaveSvgUrl;};

util/fs.js

importfsfrom"fs";exportconstremoveDir=(path)=>{letfiles=[];if(fs.existsSync(path)){files=fs.readdirSync(path);files.forEach((file,index)=>{letcurPath=path+"/"+file;fs.unlinkSync(curPath);});fs.rmdirSync(path);}}

生成好所需要的svg文件，看看生成好的svg是不是我们所需要的呢？

看样的一切都在朝着好的方向发展，这个东西正是我们所需要的。接下来就是开始读取svg文件(这里就不同步数据库了，小伙伴们可以根据自己的需求进行同步处理)，想要读取svg开始的时候还是蛮头疼的，不知道该如何去读取里面的内容。想了想之后觉得svg和xml是差不多的，于是就尝试着使用读取xml文件的形式去读取svg文件，结果就真的成了。

这里使用xmldom来读取的svg文件：

npminstall--save-devxmldom

有关xmldom的一些文档大家可以自行百度一下，也没有太复杂。具体应用代码如下：

importfsfrom"fs";importutilfrom"util";import{DOMParser}from"xmldom";constreadFile=util.promisify(fs.readFile);constreadSvg=async(svgPath)=>{//读取svg文件constsvgContent=awaitreadFile(svgPath);//读取内容转换成utf8形式constsvgHtml=Buffer.from(svgContent).toString("utf8");//生成伪xmlconstdoc=(newDOMParser()).parseFromString(svgHtml,'application/xml');//获取到第一个font标签constoFont=doc.getElementsByTagName("font")[0];//获取到font下面的所有glyph标签，并转换成数组//读取出来的是个伪数组需要转换constoGlyphs=Array.from(oFont.getElementsByTagName("glyph"));//测试临时使用数组constarr=[];//遍历oGlyphs所有标签oGlyphs.map((fontEle,index)=>{//svg对应的unicodeconstunicode=fontEle.getAttribute("unicode");//svg绘制参数constd=fontEle.getAttribute("d");//svg横向位置consthorizAdvX=fontEle.getAttribute("horiz-adv-x");//svg竖向位置constvertAdvY=fontEle.getAttribute("vert-adv-y");//这里只是个方便测试做的判断if(index===20||index===21||index===22){arr.push({unicode,d,horizAdvX,vertAdvY});}})console.log(...arr);};

执行完上述代码就完成，完全可以读取到里面的所有属性。这个时候忽然感觉已经看到的胜利的曙光有没有，哈哈哈。接下来就是最关键的一步了，如何把读取到的内容转换成是转换成base64编码。经过一番搜索之后，找到了svg2ttf这个仓库，简直没有太香啊。

安装相关依赖：

npminstall--save-devsvg2ttf

具体实现如下：

importfsfrom"fs";importutilfrom"util";import{DOMParser}from"xmldom";constreadFile=util.promisify(fs.readFile);constreadSvg=async(svgPath)=>{//读取svg文件constsvgContent=awaitreadFile(svgPath);//读取内容转换成utf8形式constsvgHtml=Buffer.from(svgContent).toString("utf8");//生成伪xmlconstdoc=(newDOMParser()).parseFromString(svgHtml,'application/xml');//获取到第一个font标签constoFont=doc.getElementsByTagName("font")[0];//获取到font下面的所有glyph标签，并转换成数组//读取出来的是个伪数组需要转换constoGlyphs=Array.from(oFont.getElementsByTagName("glyph"));//测试临时使用数组constarr=[];//遍历oGlyphs所有标签oGlyphs.map((fontEle,index)=>{//svg对应的unicodeconstunicode=fontEle.getAttribute("unicode");//svg绘制参数constd=fontEle.getAttribute("d");//svg横向位置consthorizAdvX=fontEle.getAttribute("horiz-adv-x");//svg竖向位置constvertAdvY=fontEle.getAttribute("vert-adv-y");//这里只是个方便测试做的判断if(index===20||index===21||index===22){arr.push({unicode,d,horizAdvX,vertAdvY});}})//获取svg内容letsvgStr=getSvgStr(arr);console.log(svgStr)//把svg转换成ttfconstttf=svg2ttf(svgStr,{});//把ttf转换成base64constbase64=Buffer.from(ttf.buffer).toString('base64');console.log(base64);};constgetSvgStr=(arr)=>{//用与拼接的svgletstr="";//临时替换文件，暂时性的，以后需要替换成所以unicodelet_a=["唹","唵","啜"];//生成svg内容arr.map((el,index)=>{str+=`<glyphglyph-name="${+newDate()}"unicode="${_a[index]};"d="${el.d}"horiz-adv-x="${el.horizAdvX}"vert-adv-y="${el.vertAdvY}"/>`;})//返回svg形式的字符串return`<?xmlversion="1.0"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgxmlns="http://www.w3.org/2000/svg"><defs><fontid="svgtofont"horiz-adv-x="2688"vert-adv-y="2688"><font-facefont-family="MicrosoftYaHei"font-weight="400"font-stretch="normal"units-per-em="2048"ascent="2167"descent="-536"/><missing-glyph/>${str}</font></defs></svg>`;}

这里出了一些小问题，注意我们要把我们所生成的字体svg文件的font标签部分复制过来，作为参数如果不这样做的话生成的字体会出现位置偏移的现象。

所有工作准备就绪了，执行程序就可以得到应该给前端的base64编码了，这我也进行了测试。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><script>functionaddStyle(base64,fontName){letoStyle=document.createElement("style");oStyle.innerText=`@font-face{font-family:"${fontName}";src:url(data:application/x-font-woff;charset=utf-8;base64,${base64});}`;document.head.appendChild(oStyle);};constb="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";constn="abc";addStyle(b,n);</script><body><divclass="box"><div></div><div></div><divstyle="font-family:abc;color:red;font-size:50px;">唹唵啜567</div><div></div><divclass="fiveBox">0123456789</div></div><script></script><style>*{margin:0px;padding:0px;}.box{width:100%;white-space:nowrap;}.boxdiv{width:500px;height:50px;border:1pxsolid#ededed;/*float:left;*/font-size:20px;color:pink;}.box::after{content:"";display:block;clear:both;}</style></body></html>

以上就是我的测试代码，展示效果如下：

这样下来就和58同城的效果是一样的了，经过了几天的调研也算是有了初步的成果，也是有一些成就感的。

总结

总的来说在这个调研的过程中还是学到了很多的东西，比如阿里图标库是如何实现的，字体包里面都有什么等等等。。。虽然在这个过程中用了很多第三方的依赖，但是结果是好的。

文章比较潦草，感谢各位花费这么长时间阅读，文章中如果有什么错误，请在评论处指出，我会尽快做出改正。

wapi是什么(详细来说就是用字体库加密数据)

前言

推荐JavaScript经典实例学习资料文章

冷藏柜能储存水果吗

硬的西梅会放软吗西梅很硬放多久才会软

进入候机厅还需要身份证吗

到底谁代表国际社会？美国要求中国和国际社会站在一起

恭喜人类在量子力学的研究上获得重大突破