CodePen 2.0がタイピングと同時にデータを送信していることが判明#
オンラインコードエディタ「CodePen 2.0」が、ユーザーのキー入力とほぼ同時に入力内容をサーバー側へ送信していることが、Hacker Newsの投稿で報告された。保存操作を行っていない状態でも送信が発生しており、誤って機密情報を入力した場合にはすでに漏洩している可能性があるとして、注意が呼びかけられている。
何が起きているのか？技術的な詳細#
今回の問題を報告したユーザー（maxim-fin氏）は、実際に検証を実施した。エディタのHTML入力欄に固有のマーカー文字列を入力したところ、入力後わずか1〜2秒でブラウザの「ネットワーク」タブのレスポンスにその文字列が現れたという。
さらに重要なのは、このビルド処理が save:false（未保存状態）で実行され、そのマーカーが *.codepen.dev のプレビューURLで配信されるHTMLに、そのまま含まれていた点だ。つまり、ユーザーが意図的に保存・公開しなくても、入力した内容はすでにCodePenのサーバー上に存在することになる。
この動作の目的については、スレッド内でいくつかの説明が挙げられている。
- プレビューのレンダリング：エディタでリアルタイムプレビューを表示するために、入力内容をコンパイル・配信する必要がある
- 未保存作業の復元：ブラウザのクラッシュや予期せぬ終了時に作業を復元するための仕組みとして機能している
CodePenのBuilds（ビルド）ドキュメントには「CodePenで作業している間、ペンは常にCodePen Compilerを通じて処理されています」という記述があるが、利用規約やプライバシーポリシーにはこの動作について明記されていないと、maxim-fin氏は指摘している。
なぜフロントエンド開発者にとって特にリスクが高いのか#
CodePenはフロントエンド開発者が日常的に使用するツールだ。maxim-fin氏は、開発者はAPIキーや認証トークンといった機密情報（シークレット）を実際に扱う機会が多く、既存のコードをCodePenに貼り付けて動作確認する際に、シークレットを含んだまま貼り付けてしまうケースが十分に起こり得ると指摘している。
スレッド内では以下のようなシナリオが具体例として挙げられた。
コピー → 貼り付け → シークレット部分を削除
この「貼り付けてから削除する」というフローは一見無害に見えるが、削除前のわずかな時間でも送信が発生している可能性があり、安全ではないとの指摘がある。
広がる「入力中送信」の実態#
この問題はCodePenに限った話ではない。スレッドでは関連する事例も複数紹介されている。
- Shopifyのチェックアウト画面：メールアドレスを入力してタブを閉じた場合でも、入力内容が保存され、「カートを放棄しました」といったマーケティングメールが届くことがあると報告されている（ただし、マーケティングメール受信チェックボックスが関係するとの反論もある）
- HotJarなどのセッション録画ツール：マウスの動きやクリック、入力内容をリアルタイムで記録し、アプリケーション画面上にオーバーレイ表示する仕組みがかつて広く使われていた
- FullStory：ユーザーのブラウザ画面をリアルタイムでほぼ「動画」のように閲覧できるツールとして、多くの主要サイトで導入されているとの言及もあった
まとめ#
CodePen 2.0において、エディタへの入力内容が保存前の段階からサーバーへ送信されていることが確認されている。この動作はプレビューレンダリングや作業の自動復元を目的としたものとされているが、ToSやプライバシーポリシーへの明示的な記載がないことが問題として指摘されている。
ソースの情報をもとにまとめると、CodePenを含む多くのWebサービスが、入力中のデータをリアルタイムで収集している可能性があるという点は、開発者に限らずすべてのユーザーが意識しておくべき事実だといえる。
筆者の見解: 「保存しなければ安全」という思い込みは、オンラインエディタや多くのWebフォームにおいては通用しない場合がある。特に機密情報を扱う開発者は、オンラインエディタに秘密情報を入力しないことを習慣化することが重要だと感じる。代替手段として、スレッド内ではクライアントサイドのみで動作するHTMLプレイグラウンドツールも紹介されていた。
出典: Apparently CodePen 2.0 sends data to their servers as you type
