結論、Nuxtでは対策が必要ない

なんかどうもNuxt側がデフォで対応してくれてるみたいで必要ないっぽい。

例えばこんな↓感じでv-modelでinputに表示するパターンと、

<input type="text" v-model="value">

それをプレビューで出力するこんな↓パターンがあります。

<span>{{value}}</span>

どちらの場合でもvalueにHTMLタグが入ってようがなかろうが、特に何も意識しなくていいっぽい。

逆にエスケープしてしまう方が意図しない挙動になり、例えば「ここで改行<br>」というデータの場合、エスケープするとこんな↓風になります。

ここで改行<br>

この説明をHTML上でやるとわけわからんことになってますが、エスケープされたタグがさらにエスケープされてしまっています。

エスケープしてない場合は一度だけエスケープされてこの↓ように。

ここで改行<br>

出力時にタグが無効化されてただの文字として出力されてます。

ちなみに変数内(上の例だとvalue)ではエスケープされていない状態で格納されています。 なのでフォームのデータを最終的にどのように使うかによっては、エスケープが必要になる場合があります。

あくまでNuxt内で上記方法で出力するケースにおいてはエスケープが不要(Nuxtがやってくれてる)というだけです。

v-htmlの場合は注意が必要

変数内のタグをそのまま出力するv-htmlを使う場合は当然ですが注意が必要です。

こういう↓場合です。

<span v-html="value"></span>

v-htmlでは上で確認したNuxt側のタグエスケープが起こらないので自前エスケープが必要。 コンポーネント出力のためにv-runtime-templateを使っている場合もたぶん同様。

Nuxtでエスケープ関数の実装

v-htmlを使う場合や最終の処理のためにはエスケープ関数が必要になるケースがあるのでとりあえず実装してみます。

いろいろ注文つけて出て来たコードはこれ↓。

computed: {
  escapeRules() {
    return [
      { char: '&', escaped: '&' },
      { char: '<', escaped: '&lt;' },
      { char: '>', escaped: '&gt;' },
      { char: '"', escaped: '&quot;' },
      { char: "'", escaped: '&#039;' },
    ]
  },
},
methods: {
  escapeHTML(value) {
    this.escapeRules.forEach(rule => {
      const regExp = new RegExp(rule.char, 'g');
      value = value.replace(regExp, rule.escaped);
    });
    
    return value;
  },
},

場所は呼び出しが楽なよう、プラグインの中にVue.mixinで定義しています。 これだと全てのコンポーネント内で「this.escapeHTML」で呼び出せます。

escapeRulesをcomputedとして別に定義しているのはこの後の処理のためです。 今から考えるとdataで良かったのか。 Vue.mixinでdataも使えるのかしら。 というか外に出さない値なんだからローカルの変数でも良かったのか。

処理内容は、escapeRulesで定義した5文字のどれかにマッチした場合、そのescapedの文字に置換するという処理になっています。

これが正しいのかPHPのhtmlspecialcharsの処理も見てみましたが、同じ5文字をエスケープしていたので合ってそう。 今のところ実際の動作でも意図したように動いています。

computed: {
  escapeRules() {
    return [
      { char: '&', escaped: '&' },
      { char: '<', escaped: '&lt;' },
      { char: '>', escaped: '&gt;' },
      { char: '"', escaped: '&quot;' },
      { char: "'", escaped: '&#039;' },
    ]
  },
},
methods: {
  escapeHTML(value) {
    if ( this.isEscaped(value) ) {
      return value;
    }
    
    this.escapeRules.forEach(rule => {
      const regExp = new RegExp(rule.char, 'g');
      value = value.replace(regExp, rule.escaped);
    });
    
    return value;
  },
  isEscaped(value) {
    return this.escapeRules.some(rule => new RegExp(rule.escaped, 'g').test(value));
  },
},