Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
Ryusei Ishikawa
August 06, 2022
Technology
1
79
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
フィンテック養成勉強会#24
finengine
0
330
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
310
Power Automate for desktopで 配信環境を改善してみた話
akiika
0
280
今 SLI/SLO の監視をするなら Sloth が良さそうという話
shotakitazawa
1
280
合同IT企業説明会から学ぶエンジニア向けの広報戦略
nagutabby
1
220
2022 COSCUP - GKE Backend Cluster 除雷分享
brentchang
0
120
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
1
1.1k
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
pohsien
0
120
聊聊 Cgo 的二三事
david74chou
0
330
LINSTOR — это как Kubernetes, но для блочных устройств
flant
0
1k
インフラのテストに VPC Reachability Analyzer は外せないという話
nulabinc
PRO
2
710
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
270
Featured
See All Featured
The Cult of Friendly URLs
andyhume
68
4.8k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
Support Driven Design
roundedbygravity
87
8.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
Scaling GitHub
holman
451
140k
Optimizing for Happiness
mojombo
365
64k
Debugging Ruby Performance
tmm1
65
10k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Code Review Best Practice
trishagee
44
9.7k
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