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
680
「Reactはビルド時にコメントが消えるから」と言ってコメントに💩を書いてはいけない
NUTMEGさん主催LT会で発表した内容です
Ryusei Ishikawa
August 06, 2022
Tweet
Share
More Decks by Ryusei Ishikawa
See All by Ryusei Ishikawa
HTTP通信を書きかえてみよう
xryuseix
0
25
Webアプリケーションのユーザ入力検証
xryuseix
3
860
Privateリポジトリで 管理しているソースコードを 無料でGitHub Pagesに公開する
xryuseix
0
1.4k
CTFにおけるOSINT問題作問の難しさ
xryuseix
0
410
Other Decks in Technology
See All in Technology
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
380
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
640
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
VS CodeでAWSを操作しよう
smt7174
8
1.7k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Featured
See All Featured
Practical Orchestrator
shlominoach
182
9.7k
A Philosophy of Restraint
colly
197
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Agile that works and the tools we love
rasmusluckow
325
20k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Embracing the Ebb and Flow
colly
80
4.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Gamification - CAS2011
davidbonilla
76
4.6k
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