音声書き起こし
1. オープニング
@potato4d
皆さんこんにちは。UITのpotato4dです。ユーザーインターフェイスとテクノロジーを愛する開発者のためのポッドキャスト UIT INSIDE、今回もやっていきたいと思います。
@potato4d
本題に移る前に、今回大橋さん、久々のUITインサイドの出演になるかなと思うので、改めて自己紹介お願いしてもよろしいでしょうか。
2. 自己紹介
@kazuma0129
はい、じゃあ簡単に自己紹介させてもらうと、2022年にLINE株式会社にフロントエンドエンジニアとして入社しました。普段はFSD系だったりLINEログインのフロントエンド開発を行っています。よろしくお願いします。
@potato4d
結構プラットフォーム系の開発、それともフロントエンドの開発を行ってます。そういうことが多いという感じですね。
@potato4d
ではですね、早速本題に入っていこうかなと思うんですけど、今回大橋さんがですね、昨年の夏にVueFes Japan 2024で登壇されていた、Trusted Types APIの話をお伺いしたいなと思っているんですけど、今回Trusted Types APIに関するRFCをVue.jsに出したみたいな形になるかなと思うんですけど、まずTrusted Types APIについて簡単に教えてもらってもいいですか。
3. Trusted Types API についての紹介
@kazuma0129
はい、Trusted Types APIっていうのは、DOM-based XSS攻撃を防ぐための標準APIで、信頼できる（Trustedな）文字列をDOMに挿入することを強制し、開発者がよりセキュアなコードを書けるようにするものです。これが現在エクスペリメンタルなAPIなんですけれども、Chrome系のブラウザでは早くからサポートされているというAPIですね。
@potato4d
あれですかね、ユーザーからの入力で、DOMの要素とかHTMLタグとかを受けたりとか、そういうのがあるんですけど、それを使い付けた時に、それを要素に分解する時に安全に展開できるみたいな感じになるんですよね。
@kazuma0129
そういう意味で言うと、DOM-based XSSの特性についてもちょっと触れておこうかなと思うんですけれど、一般的なXSSとはちょっと違っていて、クライアントJSのライブラリだったりのレンダリングによって、DOMツリー構造に特徴的に介入することで悪意のあるコードを埋め込むことで、発生するのがDOM-based XSSなんですけれども、これを制限できる、軽減できるっていうのが今回のTrusted Types APIの特徴ですね。
@potato4d
JSのフレームワークとかからHTMLを挿入する際に、送るXSS攻撃みたいなのをブラウザ単位で防いでくれるっていう感じになるんですね。
@kazuma0129
はい、おっしゃる通りです。めちゃくちゃ便利そうな機能というか、開発者が気をつけないといけないのはもちろんなんですけど、そのレイヤーだけじゃなくてブラウザの機能としてあるっていうのはかなり頼もしい機能になりますね。
@kazuma0129
そうですね。結構現代のフロントエンドライブラリでは、HTMLとかに気軽に挿入したりもするので、現代っぽいAPIではあると思います。
@potato4d
今の需要に合わせたウェブ標準って感じがしますね。
@potato4d
今回この機能に関するRFCをVue.jsに提出したって形になるかなと思うんですけど、フレームワーク側でもフレームワークとかライブラリ側でも専用のサポートみたいなのが必要になる機能っていう感じなんですかね。
@kazuma0129
そうですね、フロントエンドライブラリ、ReactとかVue.jsとかだと、ライブでDOM操作をするっていうことが当然必要になってくると思うんですが、innerHTMLとかを使って、そうするとそのinnerHTMLに内部でも、もう信頼されている文字列っていうのを分かりきっているけれども、Trusted TypesではそのTrusted Types APIを有効にした途端に、そのポリシーに合致しない文字列っていうのは弾かれるような設定になってしまうので、フロントエンドライブラリがここの文字列に関してはポリシーに準拠していますよっていうのを明示的に許可しないと、全て弾かれてしまうっていうのがあって、なのでフロントエンドライブラリとそれぞれ、innerHTMLを使っているところに関してはサポートしていかないと、Trusted Types APIを使えないよっていうところになってますね。
@potato4d
ということは今回出したRFCはあれなんですかね、フレームワーク側に取り込むためのRFCを出したみたいな形になりますかね。
@kazuma0129
そうですね、はい。
@kazuma0129
Vue.jsに関しては、ちょっと危険な方法でDOM操作をしているところに関しても、Trusted Typesは起こるので、そこに関してもちゃんとしましょうみたいな意味もあると思います。
@potato4d
これを設定しておくだけであるけど、最低限のボトムラインとしてはセキュリティが守られるんで、すごい開発者として安心できるのがいいですね。
@kazuma0129
そうですね、開発者的には意図せずかな、ちょっと間違えてinnerHTMLを操作することも、多分全然あると思うので、そこに関してよりセキュアなコードを書くことをサポートしますよっていうところも、APIの恩恵なんじゃないかなと思います。
@potato4d
デフォルトがセキュアで、その中で許される例外を作っていくって方が不確実性が少ないですし、めちゃくちゃいいですね。
4. Vue.js への RFC 提出について-01
@potato4d
早速このRFCの話の方にも話を進めていきたいなと思うんですけど、提案を出してから実装が生まれて、マージされてリリースまでみたいな形になるかなと思うんですけど、やっていたかみたいなところとか教えてもらってもいいですか?
@kazuma0129
そうですね、ざっくり言うと、僕が最初にこのRFCを提出したのが、2023年の12月頃なので、1年3ヶ月ぐらい前ぐらいなんですが、そこで提出をして、コアメンバーからのフィードバックをもらう必要があるんですけれど、そこのフィードバックとかをもらう期間で、多分1年弱とかかかってるのかな? があって、実際にマージされたのが10月とかそのぐらいになりますね。なのでRFC提出してから、でも1年かかんないぐらいはかかってると思いますね。
@potato4d
この発表してたVueFes自体が10月ぐらいにあって、RFC出したのが12月って考えると、1年弱ぐらいでマージされたっていう感じなんですね。
@potato4d
RFC初め出してから、やったことって何かあったりするんですか? その間に。
@kazuma0129
自分は特にRFC提出してから、特にやったことはあんまりなくて、Vue.jsの他のRFCをパッと見ていくと、そこまで何でしょうね、ガッツリしたものというか、角張ったものでもなさそうだなっていう、なんか僕自身は見受けられて、なので本当に気軽に書いてみようかなっていう思いで書きましたね。Vue.js内部の実装だったり、今回でいうとTrusted Types APIへの理解は当然必要だと思うので、Vue.jsの中でレンダリングする時にどういうことが行われているかっていう、ざっくりとしたコードの流れみたいなのはちょっとは理解するように努めましたね。
@potato4d
RFCを書くにあたって、知っておかないといけなかったのは、こういい書き方っていうよりも、そもそもこう提案する筋のいい提案をするために、内部の構造とか提案すべき仕様をしっかり理解しておきましょうっていう方が大きかったかなって感じなんですかね。
@kazuma0129
はい、僕はそういう印象を受けましたね。
@potato4d
RFCを提案してみたいなみたいな人にも伝えられそうなエッセンスですね。
@kazuma0129
めちゃくちゃいいと思います。
@potato4d
では最後にもう一つ聞きたいなと思ったのが、今回このRFCを提出っていう風なところから、そのVueFes Japanでの登壇みたいなところにも繋がったかなとは思うんですけど、なんかこうRFCを出したことで繋がったそういう副次的な作用といいますか、こう出来事とか、まあ嬉しいこととかあったら聞きたいなと思うんですけど、なんかそういうことってありました?
@kazuma0129
そうですね、おっしゃってくださった通り、やっぱりVueFesにこのテーマでトピックで登壇できたのはすごく良かったところはありますね。VueFesの登壇した後に、VueFesの会場の中で話してくださる方とかも結構いて、Trusted Types APIっていうのがあんまり知られてないんだろうなっていうのをすごく分かったので、その辺の周知に繋がったのは自分のことではないですけど、良かったのかなと思いましたね。あとは結構Trusted Types APIって、ちょっと最初でも触れましたがエクスペリメンタルなAPIなので、実験的で、全てのブラウザが対応しているわけではないっていう機能なんですけれども、そういったものでも積極的にコミュニティに対してフィードバックする、VueFesであったらVueFesでお話しして喋るとか、あとはライブラリに導入してみるっていうことも、コミュニティに対するフィードバックになるんじゃないかなと思うので、エクスペリメンタルな機能こそどんどん情報発信をしていく姿勢を出すっていうのが、自分にとって良さそうだなっていうのがちょっと気づきとしてあるかなと思います。
5. Vue.js への RFC 提出について-02
@potato4d
エクスペリメンタルな機能を広めるってことは、自分の中での情報発信の軸にもなりますし、あとこう、RFCを出したってことはこの機能がいいとその人が思ってるんだなっていう風なところも伝えられるでしょうし、何よりこう、回り回ってもしかしたらVue.jsですら、Trusted Types API対応を機能として追加してるってことは、これはもっとこう標準として実装されていくべきなんだみたいなところを伝えるのにもひと役買うかもしれない。エクスペリメンタルなことでいいと思ったものにコントリビュートしたりとか、それを取り込む活動っていうのは、いろんなポジティブな作用がありそうな気がしますね。
@kazuma0129
そういう経験が今回できたので、今後もそういったところをやっていけたらいいかなとぼんやり思ってはいます。
@potato4d
ぜひまた次なんかコントリビューションチャンスがあって実現したら、またUITインサイドにも取り上げさせてください。
@kazuma0129
はい、ぜひお願いします。
@potato4d
というわけで今回はですね、大橋さんをゲストにTrusted Types APIをVue.jsに取り組むRFCを提出した話について聞いていきました。LINEやFOOのフロントエンドコミュニティUITでは、このようなフロントエンドに関する情報発信やキャッチアップであったり、はたまた今回みたいなOSSコントリビューションみたいな文脈も積極的に行っております。社内外含めてミートアップや勉強会などなども開催しておりますので、そういったところで発表している知見などなどは今後もUITインサイドで発信していこうかなと思いますので、ぜひぜひ今後もお聞きになっていただければと思います。またこのポッドキャストに対するご意見ご感想は、ハッシュタグ #UIT_INSIDE にて受け付けておりますので、ぜひぜひ気軽にご意見ご感想などお聞きいただければと思います。
@potato4d
では本日は大橋さんとともに、Trusted Types APIをVue.jsに取り組む提案をした話をしていきました。ありがとうございました。
@kazuma0129
ありがとうございます。
6. RFC提出で得られた学び・副次的作用について
7. クロージング
