Nuxt3のuseHeadを使ったらXSS脆弱性が顕在化した話

https://zenn.dev/skmt3p/articles/7c9028ea96f58c

Transcript

1. Nuxt3のuseHeadを使ったら XSS脆弱性が顕在化した話 2023/02/16 (Fri) Vue.js v-tokyo Meetup #16
2. 自己紹介 ▪ R.D.Sakamoto(あーるでぃーさかもと ) ▪ アバターはゴリラの方です！ ▪ EE法人OmusBridge OÜ CEO ▪ VR法人HIKKY Web Frontend Chief ▪ Nuxt3は自社でも所属企業でも使ってる ▪ 今年は外向けの活動がんばるおじさん ▪ [宣伝] MyVketとバーチャルマーケット
3. ハンズオン
4. 兎にも角にも、まずは試す！ - Repl; - https://stackblitz.com/edit/nuxt-starter-nynkwv?file=README.md - useHead - Nuxt3 Composablesのひとつ。setupで使える。 - headのtitle, description, meta, link, scriptなどを書き換えられる - vue-head、vue-meta - XSS(クロスサイトスクリプティング) = - Webサイトにおける脆弱性のひとつ。 - 任意のscriptを動かせる。自サービスで顕在化するととても怖い。
5. ぴえん - Zenn - https://zenn.dev/skmt3p/articles/7c9028ea96f58c - ユーザーインプットを DBに登録できた前提で、そのインプットをとってきて Refに格納。 inputのデフォルトとして表示するケースを想定。 - Nuxt3.0.0においてアラートが発出される - どうしたかはZenn参照 - 当該issues自体の進捗は、2/16 AM時点でほぼ無し - ユーザー入力文字をheadに入れる事自体はSSRのよくある話 - Twitterのようにuser nameをtitleとしてタブに表示させる。 - og:title, og:descriptionにユーザー情報を表示させる。
6. ハンズオン(最新版！)
7. Nuxt 3.2.0ではどうなっているのか？ - 今回の登壇のために用意したRepl; - https://stackblitz.com/edit/nuxt-starter-nynkwv?file=README.md - さっきのやつをシンプルに Nuxt 3.2.0にしてみました！ - issuesの方には進捗無いけど...頼むぞ！！！ - https://github.com/vueuse/head/issues/173 - このissuesで似たような話はやりとりされているが ...
8. やったか？ - とりあえずinputが表示された！そう！これでいいんだよ！ありがとう Nuxt!! Thank you Nuxt!! - 一応、念のため、もっと愚直に書いてみよう Repl2; - https://stackblitz.com/edit/nuxt-starter-nynkwv?file=README.md - さっきの例の内側にもう 1個`window.alert`を仕込む - NuxtとかStackBlitz側のDOM構成が変わったかもしれないし。 - まあ大丈夫やと思うけど ...
9. あ...... - 根本対応はまだできていない模様 - useHeadSafeがくるのが待ち遠しいですね - https://github.com/nuxt/nuxt/issues/15668 - 皆様も他人事とは思わずお気をつけください。 - headのDOM構成によって、再現条件がかわります - 再現するのすら結構面倒でした - これを読めば「ヨシ！」だと思っていませんか？ここには当然載ってないです - https://ja.vuejs.org/guide/best-practices/security.html - dependabotやsentryの導入などできることから - Nuxt Securityというmoduleもあるらしい - https://nuxt.com/modules/security/ - 最近Twitterでみたセキュリティ本を買いました。 - とても易しい...!こつこつと読み進めていきます！
10. それでも!これから も!Nuxtを使い続けま す！！ おしまい セキュリティに気をつけつつ...