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
どんなページでも動かす!JS_CSS汚染を避ける戦い
Search
Ryota Kunisada
August 04, 2023
Technology
0
250
どんなページでも動かす!JS_CSS汚染を避ける戦い
第1回 3rdparty.jsで発表した資料です。
https://3rdpartyjs.connpass.com/event/289558/
Ryota Kunisada
August 04, 2023
Tweet
Share
More Decks by Ryota Kunisada
See All by Ryota Kunisada
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
330
フロントエンドエンジニアとQAエンジニアの協働による自動テストを増やす開発プロセス
92thunder
0
69
トランクベース開発の導入で見えた DevOpsの技術・プロセス・文化との繋がり
92thunder
0
1.1k
開発生産性向上の取り組みログ
92thunder
0
99
Other Decks in Technology
See All in Technology
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
[MIRU2025]Preference Optimization for Multimodal Large Language Models for Image Captioning Tasks
keio_smilab
PRO
0
100
Wasmで社内ツールを作って配布しよう
askua
0
150
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.8k
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
180
MCPと認可まわりの話 / mcp_and_authorization
convto
2
290
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
510
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
110
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
610
今日からあなたもGeminiを好きになる
subaruhello
1
650
スプリントレビューを効果的にするために
miholovesq
9
1.7k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Adopting Sorbet at Scale
ufuk
77
9.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Visualization
eitanlees
146
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
どんなページでも動かす! JS/CSS汚染を避ける戦い テックタッチ株式会社 / 国定 凌太
92thunder • テックタッチ株式会社に1人目社員として入社後 フロントエンドエンジニアとして開発をリード • 2023年6月から北海道旭川市へ移住しフルリモートワークに • 普段語られることの少ないサードパーティJS開発の 仲間と会うためにイベントを企画!
「テックタッチ」の紹介 • WebサイトにサードパーティJSを組み込むことで、 ノーコードでガイドやツールチップでの案内を追加できる • スニペット / ブラウザ拡張で提供
個人的サードパーティスクリプトの分類 Embed • Google Map • 広告系 Widget • Intercom
• HubSpot Analytics • Google Analytics • Google Tag Manager UI拡張 • Techtouch • Grammarly Intercomホームページより抜粋
DOMアクセスは多い?少ない? Widget • チャットUIは画面内の 一部分で完結 • DOMへのアクセス を必要としない iframeを使うことで JS/CSS汚染を回避できる
UI拡張 • 吹き出しが要素に追従 • ページ内の要素にイベントを設定して動作 DOMアクセスが頻繁に発生するため iframeを介すとpostMessageのやり取りが複雑に 今日はこちらの話がメインになります 🙏 Intercomホームページより抜粋
苦労した話 🥺 • 「テックタッチ」を組み込むとページを一切クリックできない! • ページのCSSの影響を受けてレイアウトが崩れた! • とあるライブラリが入っているシステムでは 「テックタッチ」が動かない!
サードパーティスクリプトの不具合の例 https://twitter.com/ckazu/status/1622428980304568325 • Merlin AI powered by ChatGPT というChrome拡張が .loader
クラスのついた要素に 回転アニメーションを付与 • サードパーティスクリプトは 影響を考慮したCSS設計が必要
課題と解決策 プロトタイプJS汚染 CSSグローバル汚染 iframe Transform Runtime CSS詳細度 を上げる Shadow DOM
❌
プロトタイプ汚染 プロトタイプJS汚染 CSSグローバル汚染 Transform Runtime CSS詳細度 を上げる Shadow DOM
プロトタイプ汚染 • Webサイト側でJSの動作が書き換えられていることにより サードパーティスクリプトが意図しない動作になってしまう問題 • 汚染による影響を受けない/与えないための対策が必要 Prototype.js 1.5系 Native
プロトタイプ汚染を避けるには 🤔 3rd party script 1st party script ❌ プロトタイプ汚染された関数を呼び出すと意図しない動作に
Prototype.js 1.5系
プロトタイプ汚染を避けるには 🤔 3rd party script 1st party script ❌ プロトタイプ汚染された関数を呼び出すと意図しない動作に
Native 3rd party scriptではネイティブの関数を使いたいが、汚染されてしまっている … Prototype.js 1.5系
プロトタイプ汚染を避けるには 🤔 3rd party script 1st party script ❌ プロトタイプ汚染された関数を呼び出すと意図しない動作に
Prototype.js 1.5系 @babel/plugin-transform-runtime で変換 core-jsでネイティブに近い動作を実現 Native
transform-rutime を使って core-js に置き換える babel • 新しいバージョンでのJavaScriptの書き方を 古いバージョンのブラウザでも動作するようにトランスパイルする @babel/plugin-transform-runtime •
babelが変換するコードを指定したヘルパーコードに置き換えることができる • core-jsをヘルパーコードとして指定できる core-js • JavaScriptのポリフィル実装。グローバル汚染せずに使うこともできる。
CSSグローバル汚染 プロトタイプJS汚染 CSSグローバル汚染 Transform Runtime CSS詳細度 を上げる Shadow DOM
CSSグローバル汚染 • CSSはグローバルに影響する • サードパーティスクリプトの動作を考慮してCSSを実装する人は存在しない <div id="app"> <p>main-app</p> </div> <div
id="thirdparty-app"> <p>3rdparty-app</p> </div> p:not(#fakeId#fakeId) { color: red; } #thirdparty-app p { color: blue; } 適用されない
CSS詳細度とは • 詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定する ためにブラウザーが使用するアルゴリズムで、これによって、その要素に使 用するプロパティ値が決定されます。出典: https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
• CSS詳細度の重み付け計算方法 ◦ ID - CLASS - TYPE • 例 #thirdparty-app p 1-0-1 IDが1つ、pタグが1つ p:not(#fakeId#fakeId) 2-0-1 :not()の中身が加算される
CSSの詳細度を上げる :is() や :not() を使い、冗長なIDを設定して詳細度を上げることで打ち勝つ /* 2-0-1 */ p:not(#fakeId#fakeId) {
color: red; } /* 3-0-1 */ #thirdparty-app p:not(#fakeId#fakeId) { color: blue; } IEサポートするなら 詳細度の対応が必要だった
Shadow DOM 通常のDOMとの境界を作ることでCSSの影響を無効化できる 出典:https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_shadow_DOM
const thirdpartyApp = document.getElementById("thirdparty-app"); const shadow = thirdpartyApp.attachShadow({ mode: "open"
}); const p = document.createElement("p"); p.textContent = "3rdparty-app"; shadow.appendChild(p); const style = document.createElement("style"); style.textContent = `p { color: blue }`; shadow.appendChild(style); ShadowRootを介して内部のDOMにアクセスする必要があるため、 Shadow DOM対応していないライブラリに注意
今後の取り組み プロトタイプJS汚染 CSSグローバル汚染 Transform Runtime CSS詳細度 を上げる Shadow DOM Shadow
Realm Web Worker WASM パフォーマンス改善
おわりに • iframeを使わずにJS/CSS汚染を回避するための技術を紹介しました • サードパーティスクリプト開発に限った話だけではなく 通常のWebアプリケーション開発で扱う技術も多くある ◦ サードパーティではより深い理解が必要! • ブラウザサイドJavaScriptのSandbox技術は今後も進化していくので、
動向を見ながらユーザーによりよい体験を提供できるように取り入れる ◦ #3rdpartyjs でやっていきましょう!
検証 • プロトタイプ汚染: https://codesandbox.io/s/infallible-noyce-j64clh • CSS詳細度: https://codesandbox.io/s/css-specificity-q8g3pk • Shadow DOM:
https://codesandbox.io/s/shadow-dom-8h5pms
参考 • https://github.com/tc39/proposal-shadowrealm • https://github.com/tc39/proposal-ses