Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
Search
Ryusei Ishikawa
August 06, 2022
Technology
0
1.1k
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
OSINT CTFの リアル作問環境を体験してみよう!
xryuseix
0
43
OSINT CTFを支える技術
xryuseix
1
520
HTTP通信を書きかえてみよう
xryuseix
0
59
Webアプリケーションのユーザ入力検証
xryuseix
3
1.1k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
2.2k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
620
Other Decks in Technology
See All in Technology
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
250
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
190
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
270
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
210
Amazon Kendra GenAI Index 登場でどう変わる? 評価から学ぶ最適なRAG構成
naoki_0531
0
120
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
130
ハイテク休憩
sat
PRO
2
170
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
110
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
290
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
610
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Code Reviewing Like a Champion
maltzj
520
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Speed Design
sergeychernyshev
25
670
Transcript
「Reactはビルド時にコメントが消えるから」 と⾔ってコメントに 💩 を書いてはいけない ⽴命館⼤学 RiST xryuseix
• create-react-app でアプリを作成し、react-scripts build で普通にビルドします • すると図のようなディレクトリ構成になります <Reactのビルド />
• react-scripts build でビルドしたJSファイルは💩コードになっています • ファイルサイズを減らして⾼速化が期待できます ◦ 少しだけ難読化の効果もあります <Minify />
こういうJSの変換をMinify処理と呼んだりします
👴「Minify処理後のファイルでエラーが起きたらデバッグが難しくなるじゃろ💢」 <Sourcemap /> 👶「いいえ、Minifyの復元情報がソースコード内に含まれています(デフォルトでは) 」 ビルド前のソースコード ブラウザのコンソール 開発者ツール (1).toFIxed(-1)は⼩数点以下の有効数字を-1桁で”1”を⼩数表記⽂字列にするプログラムです
<Sourcemap /> ビルド後のファイル sourcemapファイル *.mapファイルがソースマップファイルと呼ばれる その復元ファイルです 昔どこかのCTFでsoucemapファイルを解析する問題が出てた記憶がありますが、僕は⼈間なので読めません
そろそろお察しかと思いますが...... <💩復活の儀式 /> 👈 消えません 💪 💩
そろそろお察しかと思いますが...... <💩復活の儀式 /> 👈 消えません(2) 💪 💩
そろそろお察しかと思いますが...... <💩復活の儀式 /> 👈 消えません(3) 💪 💩
• 綺麗なソースコードが漏れる • アノテーションコメントが読まれる <💩が復活して何がまずい︖ /> アノテーションコメントってこれのこと https://qiita.com/taka-kawa/items/673716d77795c937d422 攻撃者にとって 脆弱性を発⾒しやすくなる
そりゃ // FIXME: ここ不具合あるから後で直す // XXX: 動くけどなぜか良くわからない とか書いてあったら集中して調査するでしょ
<💩を封印するにはどうしたらいい︖ /> 結論: 本番環境にソースマップを置かなければ良い 1. GENERATE_SOURCEMAP=false を設定する a. ビルドコマンドを GENERATE_SOURCEMAP=false
react-scripts build にする b. .envファイルに記述する 2. or ビルド前に rm build/**/*.map を実⾏する
1. Reactの通常ビルドではソースマップファイルが含まれるよ 2. ソースマップファイルがあるとソースコードが復元されるよ 3. 本番環境にはソースマップファイルを置かないようにしよう <まとめ /> ご清聴ありがとうございました✨ ※今⽇のスライドはこのスライドをリスペクトしています
『テスト⽂字列に「うんこ」と⼊れるな』 https://www.slideshare.net/ketaiorg/ss-250149770