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.4k
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
DIVER OSINT CTF を支える技術 2025
xryuseix
0
87
OSINT CTFの リアル作問環境を体験してみよう!
xryuseix
0
190
OSINT CTFを支える技術
xryuseix
1
770
HTTP通信を書きかえてみよう
xryuseix
0
70
Webアプリケーションのユーザ入力検証
xryuseix
3
1.3k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
3.2k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
740
Other Decks in Technology
See All in Technology
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
160
Digitization部 紹介資料
sansan33
PRO
1
5.5k
このままAIが発展するだけでAGI達成可能な理由
frievea
0
110
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.1k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
フレームワークを意識させないワークショップづくり
keigosuda
0
190
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A designer walks into a library…
pauljervisheath
209
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Why Our Code Smells
bkeepers
PRO
340
57k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Unsuck your backbone
ammeep
671
58k
How to Ace a Technical Interview
jacobian
280
24k
GraphQLの誤解/rethinking-graphql
sonatard
73
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