Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

R.D.Sakamoto
February 17, 2023

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

R.D.Sakamoto

February 17, 2023
Tweet

More Decks by R.D.Sakamoto

Other Decks in Technology

Transcript

  1. 自己紹介 ▪ R.D.Sakamoto(あーるでぃーさかもと ) ▪ アバターはゴリラの方です! ▪ EE法人OmusBridge OÜ CEO

    ▪ VR法人HIKKY Web Frontend Chief ▪ Nuxt3は自社でも所属企業でも使ってる ▪ 今年は外向けの活動がんばるおじさん ▪ [宣伝] MyVketとバーチャルマーケット
  2. 兎にも角にも、まずは試す! - 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を動かせる。自サービスで顕在化するととても怖い。
  3. ぴえん - 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にユーザー情報を表示させる。
  4. 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で似たような話はやりとりされているが ...
  5. やったか? - とりあえずinputが表示された!そう!これでいいんだよ!ありがとう Nuxt!! Thank you Nuxt!! - 一応、念のため、もっと愚直に書いてみよう Repl2;

    - https://stackblitz.com/edit/nuxt-starter-nynkwv?file=README.md - さっきの例の内側にもう 1個`window.alert`を仕込む - NuxtとかStackBlitz側のDOM構成が変わったかもしれないし。 - まあ大丈夫やと思うけど ...
  6. あ...... - 根本対応はまだできていない模様 - 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でみたセキュリティ本を買いました。 - とても易しい...!こつこつと読み進めていきます!