2018.07.03 14:18

博客文章添加DIY表情评论功能实现过程


前端要防止XSS攻击,所以评论里面插入img标签的做法不在适用,这样xss会把img标签转义为安全代码,不渲染为标签dom元素,以此达到代码安全的目的!!


做评论肯定要有表情功能,不然看起来单调无趣,下面来看看一步一步实现过程


本博客的评论采用的是正则匹配来实现数据库存储



例如存储的是 "[qq_116][qq_141]"然后添加到textarea留言框中


大图是这个是在jquery插件中下载的这个背景大图(自行百度到这个大图或者右键另存为引入到你的项目)


项目中实际的效果长这样




抓取代码发现qq表情的代码的表情图片地址是 l `http://qzonestyle.gtimg.cn/qzone/em/e${i}.gif`; (i为100起步-205截止) 常用表情


然后把图片抓取下来存到自己的服务器上面就ok



<textarea autocomplete="nope" id="comment"  cols="45"
            rows="8" maxlength="65525" ref="textarea" v-model="content">
            </textarea>
 

<div class="face">
      <div>
        <span class="diy-face" @click="openFaceChange">DIY表情</span>
      </div>
      <div class="xei-qq-face-wrapper" v-if="faceFlag">
       <ul>
        <li v-for="item in 105" @click="insertText(item)">
         <span data-idx="item"></span>
        </li>
       </ul>
      </div>
     </div>

  data(){
     return{
     faceFlag:false,
         content:'',
     }
   },

 methods: {
   // [qq_100][qq_101][qq_117][qq_115]
   insertText(str) {
      str = '[qq_'+parseInt(99+str)+']' + ``;
      const oTextarea = this.$refs.textarea;
      oTextarea.value += str;
      this.content = oTextarea.value;
      this.faceFlag = !this.faceFlag
    },
    openFaceChange(){
    
     this.faceFlag = !this.faceFlag
    }
}


在获取html中的富文本的时候 需要把 [qq_101]类型的规则正则匹配转为img标签,然后在把内容写入到组件中渲染


methods:{
   getFace(content){
   return content.replace(/\[qq_(\d+?)\]/g, `<img src="http://118.24.30.92:9000/static/img/face/qq/qq_$1.gif"/>`)
   }
 }



然后拿到的数据渲染html就是转移后的img标签html内容,这样就实现了一个简单的xss防范过程,过滤了不安全脚本,也实现了表情的评论显示




博客的开源代码地址:https://github.com/jackieli123723/nuxt-blog

DIY表情

(添加http或https协议)

提交评论

留言区 1