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
98
Other Decks in Technology
See All in Technology
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
ビギナーであり続ける/beginning
ikuodanaka
3
760
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.7k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
OPENLOGI Company Profile for engineer
hr01
1
34k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing for humans not robots
tammielis
253
25k
Being A Developer After 40
akosma
90
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Docker and Python
trallard
44
3.5k
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