大前端时代安全性如何做(7)

关键步骤

1. 先根据你们的产品找到常用的关键词，生成词云
2. 根据词云，将每个字生成对应的 unicode 码
3. 将词云包括的汉字做成一个字体库
4. 将字体库 .ttf 做成 svg 格式，然后上传到 icomoon 制作自定义的字体，但是有规则，比如 “年” 对应的 unicode 码是 “u5e74” ，但是我们需要做一个 恺撒加密 ，比如我们设置 偏移量 为1，那么经过恺撒加密 “年”对应的 unicode 码是“u5e75” 。利用这种规则制作我们需要的字体库
5. 在每次调用接口的时候服务端做的事情是：服务端封装某个方法，将数据经过方法判断是不是在词云中，如果是词云中的字符，利用规则(找到汉字对应的 unicode 码，，再根据凯撒加密，设置对应的偏移量，Demo 中为1，将每个汉字加密处理)加密处理后返回数据
6. 客户端做的事情：

• 先引入我们前面制作好的汉字字体库
• 调用接口拿到数据，显示到对应的 Dom 节点上
• 如果是汉字文本，我们将对应节点的 css 类设置成汉字类，该类对应的 font-family 是我们上面引入的汉字字体库

//style.css 
@font-face { 
  font-family: "NumberFont"; 
  src: url('http://127.0.0.1:8080/Util/analysis'); 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
} 
 
@font-face { 
  font-family: "CharacterFont"; 
  src: url('http://127.0.0.1:8080/Util/map'); 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
} 
 
h2 { 
  font-family: "NumberFont"; 
} 
 
h3,a{ 
  font-family: "CharacterFont"; 
} 

传送门

字体制作的步骤、ttf转svg、字体映射规则

实现的效果

页面上看到的数据跟审查元素看到的结果不一致

去查看接口数据跟审核元素和界面看到的三者不一致

页面每次刷新之前得出的结果更不一致

对于数字和汉字的处理手段都不一致

（编辑：ASP站长网）