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

「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない

 「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない

NUTMEGさん主催LT会で発表した内容です

Ryusei Ishikawa

August 06, 2022
Tweet

More Decks by Ryusei Ishikawa

Other Decks in Technology

Transcript

  1. 「Reactはビルド時にコメントが消えるから」
    と⾔ってコメントに
    💩
    を書いてはいけない
    ⽴命館⼤学 RiST
    xryuseix

    View full-size slide

  2. ● create-react-app でアプリを作成し、react-scripts build で普通にビルドします
    ● すると図のようなディレクトリ構成になります

    View full-size slide

  3. ● react-scripts build でビルドしたJSファイルは💩コードになっています
    ● ファイルサイズを減らして⾼速化が期待できます
    ○ 少しだけ難読化の効果もあります

    こういうJSの変換をMinify処理と呼んだりします

    View full-size slide

  4. 👴「Minify処理後のファイルでエラーが起きたらデバッグが難しくなるじゃろ💢」

    👶「いいえ、Minifyの復元情報がソースコード内に含まれています(デフォルトでは)

    ビルド前のソースコード ブラウザのコンソール 開発者ツール
    (1).toFIxed(-1)は⼩数点以下の有効数字を-1桁で”1”を⼩数表記⽂字列にするプログラムです

    View full-size slide


  5. ビルド後のファイル sourcemapファイル
    *.mapファイルがソースマップファイルと呼ばれる
    その復元ファイルです
    昔どこかのCTFでsoucemapファイルを解析する問題が出てた記憶がありますが、僕は⼈間なので読めません

    View full-size slide

  6. そろそろお察しかと思いますが......
    <💩復活の儀式 />
    👈 消えません
    💪 💩

    View full-size slide

  7. そろそろお察しかと思いますが......
    <💩復活の儀式 />
    👈 消えません(2)
    💪 💩

    View full-size slide

  8. そろそろお察しかと思いますが......
    <💩復活の儀式 />
    👈 消えません(3)
    💪 💩

    View full-size slide

  9. ● 綺麗なソースコードが漏れる
    ● アノテーションコメントが読まれる
    <💩が復活して何がまずい︖ />
    アノテーションコメントってこれのこと
    https://qiita.com/taka-kawa/items/673716d77795c937d422
    攻撃者にとって
    脆弱性を発⾒しやすくなる
    そりゃ
    // FIXME: ここ不具合あるから後で直す
    // XXX: 動くけどなぜか良くわからない
    とか書いてあったら集中して調査するでしょ

    View full-size slide

  10. <💩を封印するにはどうしたらいい︖ />
    結論: 本番環境にソースマップを置かなければ良い
    1. GENERATE_SOURCEMAP=false を設定する
    a. ビルドコマンドを GENERATE_SOURCEMAP=false react-scripts build にする
    b. .envファイルに記述する
    2. or ビルド前に rm build/**/*.map を実⾏する

    View full-size slide

  11. 1. Reactの通常ビルドではソースマップファイルが含まれるよ
    2. ソースマップファイルがあるとソースコードが復元されるよ
    3. 本番環境にはソースマップファイルを置かないようにしよう
    <まとめ />
    ご清聴ありがとうございました✨
    ※今⽇のスライドはこのスライドをリスペクトしています
    『テスト⽂字列に「うんこ」と⼊れるな』
    https://www.slideshare.net/ketaiorg/ss-250149770

    View full-size slide