Vue.jsで安全に文字色を変更したい

Question

前提・実現したいこと

Twitterのようにユーザーが文字列を投稿したり、誰かの投稿を閲覧できるWebサイトを作っています。

やりたい事は、投稿された文字列の一部を置換して文字色を変更する事です。

v-htmlを使うことで一応は解決しましたがセキュリティが心配です。
どのように実装するのがベストでしょうか？

懸念している問題

• ユーザーが任意のHTMLタグを入力した場合も有効になる

試したこと

https://jsfiddle.net/eywraw8t/100477/

• index.html

<div id="app">
  <p>
  {{text}}
  </p>
  
  <p v-html="text">
  </p>
  
   <p v-html="changeTextColor(text)">
  </p>
</div>

• index.js

new Vue({
  el: '#app',
  data: {
    text: 'ここが赤くなります。<a href="http://example.com">悪意あるリンク</a>'
  },
  methods: {
  	changeTextColor (str) {
    	return str.replace(/ここ/i, '<font color="red">ここ</font>');
    }
  }
})

補足情報（FW/ツールのバージョンなど）

• Vue.js 2.5.16

Comments

[euledge]

色を変えたい文字列というのはどのように決まるのでしょうか？
特定の文言（Sensitive word）なのか、位置で決まるようなものなのか

[daiki002]

特定の文字列と色情報を予めデータベースに登録しているので、その文字列が含まれていた場合、その文字列だけ指定していた色に変えます。

Answer 1

サニタイズを自前で行ってから、該当の単語に対して色を付けるというのではどうでしょうか?

methods: {
    changeTextColor(str) {
      var dirtyStr = this.escapeHtml(str);
      return dirtyStr.replace(/ここ/i, '<font color="red">ここ</font>');
    },

【動くサンプル】
https://jsfiddle.net/euledge/vhn91ae6/

Comments

[daiki002]

ありがとうございます！実現できました。