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
650
HTTP通信を書きかえてみよう
xryuseix
0
65
Webアプリケーションのユーザ入力検証
xryuseix
3
1.2k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
2.7k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
700
Other Decks in Technology
See All in Technology
Long journey of Continuous Delivery at Mercari
hisaharu
1
230
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
440
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
640
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
450
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
24
8.9k
Model Mondays S2E01: Advanced Reasoning
nitya
0
420
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
190
OTFSG勉強会 / Introduction to the History of Delta Lake + Iceberg
databricksjapan
0
110
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1k
IIWレポートからみるID業界で話題のMCP
fujie
0
580
SFTPコンテナからファイルをダウンロードする
dip
0
480
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
110
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
We Have a Design System, Now What?
morganepeng
52
7.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Being A Developer After 40
akosma
90
590k
The World Runs on Bad Software
bkeepers
PRO
68
11k
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