非 SPA な Web アプリを Vue.js でつくって分かった 4 つのコツ by 坂田晃平

弊社サービス ChatDealer（https://www.chatdealer.jp）は、Laravel と Vue.js で構築された BtoC チャットボットシステム（SaaS）です。SPA ではない従来型の Web アプリケーションとして開発しています。

従来型は従来型なりに Vue.js を活用する上でのつらみがありました。それらを乗り越えた経験から分かった、不具合を防ぐための実装時のコツを紹介します。

• v-model と v-on:input を併用するべからず
• Vue インスタンスをマウントする要素の HTML は最初から render 関数だと思え
• サーバーサイドでの変数埋め込みは JSON に変換して行え
• Mustache injenction 脆弱性への対策を忘れるな

Mustache injenction 脆弱性とはサーバーサイドのテンプレートエンジン + Vue.js で発生する XSS 脆弱性ですが、知らずに作り込んで緊急対応をする羽目になりました。注意喚起のためにも特に詳しくお話したいと思います。