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
910
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
OSINT CTFを支える技術
xryuseix
1
440
HTTP通信を書きかえてみよう
xryuseix
0
53
Webアプリケーションのユーザ入力検証
xryuseix
3
1k
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
1.9k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
550
Other Decks in Technology
See All in Technology
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
210
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
Optuna: a Black-Box Optimization Framework
pfn
PRO
1
110
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Fediverse Discovery Providers overview
andypiper
0
160
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
200
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
380
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
170
自作Cコンパイラ 8時間の奮闘
soukouki
0
820
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
230
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4.1k
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
4
380
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Mythical Team-Month
searls
218
43k
Why Our Code Smells
bkeepers
PRO
334
56k
Clear Off the Table
cherdarchuk
91
320k
Designing with Data
zakiwarfel
98
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
The Invisible Side of Design
smashingmag
295
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
How to name files
jennybc
75
98k
How to Ace a Technical Interview
jacobian
274
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
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