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.3k
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
OSINT CTFの リアル作問環境を体験してみよう!
xryuseix
0
140
OSINT CTFを支える技術
xryuseix
1
620
HTTP通信を書きかえてみよう
xryuseix
0
63
Webアプリケーションのユーザ入力検証
xryuseix
3
1.2k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
2.6k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
690
Other Decks in Technology
See All in Technology
熱々🔥のUDN🍜を喰らえ❗マルチテナントもVM統合も思いのまま❗新機能で切り拓くk8sネットワークの未来
tsukaman
0
200
ゼロコードで実現! - OpenTelemetryとOCI APM Agentによる簡単アプリケーション監視 - / Zero-Code Observability with OpenTelemetry and OCI APM
oracle4engineer
PRO
1
180
Digitization部 紹介資料
sansan33
PRO
1
3.7k
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
130
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
2025advance01
minamizaki
0
120
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
トイルを撲滅!インフラ領域での生成AI活用のススメ
shuya
0
340
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
taiseiue
0
120
Project Referencesを活用した実行環境ごとのtsconfig最適化
itatchi3
1
230
declaration mergingの威力:ライブラリアップデート時の書き換え作業を90%短縮するテクニック
yutake27
2
250
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Applications with DynamoDB
mza
95
6.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Balancing Empowerment & Direction
lara
1
73
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Documentation Writing (for coders)
carmenintech
71
4.8k
The Invisible Side of Design
smashingmag
299
50k
The Pragmatic Product Professional
lauravandoore
34
6.6k
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