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
940
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
OSINT CTFを支える技術
xryuseix
1
450
HTTP通信を書きかえてみよう
xryuseix
0
53
Webアプリケーションのユーザ入力検証
xryuseix
3
1k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
2k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
560
Other Decks in Technology
See All in Technology
Consoles, printk, Nested-NMIs_ Oh my!
ennael
PRO
0
150
PREEMPT_RT over the years
ennael
PRO
0
250
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
540
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
230
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
0
210
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
2
130
BLEA v3.0.0の新しいベストプラクティスを取り入れた効率的なAWS CDK開発/jawsug_cdk16
mhrtech
3
340
映像・音声伝送システム
jtes
0
190
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
300
RemixでVersion skewに立ち向かう
chimame
1
720
Dual level of task scheduling for VM workloads
ennael
PRO
0
160
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
250
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
How to Ace a Technical Interview
jacobian
274
23k
Bash Introduction
62gerente
608
210k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Six Lessons from altMBA
skipperchong
26
3.4k
Faster Mobile Websites
deanohume
304
30k
The Cost Of JavaScript in 2023
addyosmani
43
5.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Web Components: a chance to create the future
zenorocha
309
42k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
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