Slide 1

Slide 1 text

Nuxt3のuseHeadを使ったら XSS脆弱性が顕在化した話 2023/02/16 (Fri) Vue.js v-tokyo Meetup #16

Slide 2

Slide 2 text

自己紹介 ■ R.D.Sakamoto(あーるでぃーさかもと ) ■ アバターはゴリラの方です! ■ EE法人OmusBridge OÜ CEO ■ VR法人HIKKY Web Frontend Chief ■ Nuxt3は自社でも所属企業でも使ってる ■ 今年は外向けの活動がんばるおじさん ■ [宣伝] MyVketとバーチャルマーケット

Slide 3

Slide 3 text

ハンズオン

Slide 4

Slide 4 text

兎にも角にも、まずは試す! - 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を動かせる。自サービスで顕在化するととても怖い。

Slide 5

Slide 5 text

ぴえん - 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にユーザー情報を表示させる。

Slide 6

Slide 6 text

ハンズオン(最新版!)

Slide 7

Slide 7 text

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で似たような話はやりとりされているが ...

Slide 8

Slide 8 text

やったか? - とりあえずinputが表示された!そう!これでいいんだよ!ありがとう Nuxt!! Thank you Nuxt!! - 一応、念のため、もっと愚直に書いてみよう Repl2; - https://stackblitz.com/edit/nuxt-starter-nynkwv?file=README.md - さっきの例の内側にもう 1個`window.alert`を仕込む - NuxtとかStackBlitz側のDOM構成が変わったかもしれないし。 - まあ大丈夫やと思うけど ...

Slide 9

Slide 9 text

あ...... - 根本対応はまだできていない模様 - 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でみたセキュリティ本を買いました。 - とても易しい...!こつこつと読み進めていきます!

Slide 10

Slide 10 text

それでも!これから も!Nuxtを使い続けま す!! おしまい セキュリティに気をつけつつ...