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
DIVER OSINT CTF を支える技術 2025
xryuseix
0
61
OSINT CTFの リアル作問環境を体験してみよう!
xryuseix
0
150
OSINT CTFを支える技術
xryuseix
1
660
HTTP通信を書きかえてみよう
xryuseix
0
67
Webアプリケーションのユーザ入力検証
xryuseix
3
1.2k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
2.8k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
700
Other Decks in Technology
See All in Technology
CDK Vibe Coding Fes
tomoki10
1
320
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
470
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
990
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
240
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
180
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
520
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
140
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
570
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
110
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.1k
Navigating Team Friction
lara
187
15k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Invisible Side of Design
smashingmag
301
51k
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