CSS注入實例

習CSS注入的目的是學習計算機知識，千萬不要做違反法律的事情，不然等待你的是法律的嚴懲。

CSS僅僅只是一種用來表示樣式的語言嗎？當然不是！CSS就已被安全研究人員運用于滲透測試當中。使用屬性選擇器和iFrame，并通過CSS注入來竊取敏感數據的方法。但由于該方法需要iFrame，而大多數主流站點都不允許該操作，因此這種攻擊方法并不實用。這里為大家詳細介紹一種不需要iframe且只需10秒，就能為獲得CSRF token的方法。

一、背景

CSS屬性選擇器開發者可以根據屬性標簽的值匹配子字符串來選擇元素。這些屬性值選擇器可以做以下操作：

如果字符串以子字符串開頭，則匹配
如果字符串以子字符串結尾，則匹配
如果字符串在任何地方包含子字符串，則匹配

屬性選擇器能讓開發人員查詢單個屬性的頁面HTML標記，并且匹配它們的值。一個實際的用例是將以“https://example.com”開頭的所有href屬性變為某種特定的顏色。而在實際環境中，一些敏感信息會被存放在HTML標簽內。在大多數情況下CSRF token都是以這種方式被存儲的：即隱藏表單的屬性值中。

可以將CSS選擇器與表單中的屬性進行匹配，并根據表單是否與起始字符串匹配，加載一個外部資源，例如背景圖片，來嘗試猜測屬性的起始字母。通過這種方式，攻擊者可以進行逐字猜解并最終獲取到完整的敏感數值。想要解決這個問題受害者可以在其服務器實施內容安全策略（CSP），防止攻擊者從外部加載CSS代碼。

二、無 iFrames

要做到無iFrame，使用一種方法：創建一個彈窗，然后在設置計時器后更改彈出窗口的位置。使用這種方仍然可以加載受害者的CSS，不再依賴于受害者是否允許iFrame。因為最初的彈出是通過用戶事件觸發的，沒有被瀏覽器阻止。為了強制重載，在CSS注入間彈出一個虛擬窗口，如下：

但由于CSRF是針對客戶端的攻擊，因此如果能想出一種不需要服務器的方法，那么就可以節省大量的開銷和簡化操作。為了接收客戶端加載資源，可以利用Service Workers來攔截和讀取請求數據。Service Workers目前只適用于同源請求，在演示中受害者和攻擊者頁面已處于同一源上。

不久后，chrome很可能會合并這個實驗性的功能，允許Service Workers攔截跨域請求。這樣，就可以確保在客戶端的攻擊100%的執行，并強制用戶在10秒內點擊鏈接執行CSRF攻擊，演示如下：

三、Demo

如上所述，因為不想運行一個web服務器，所以使用service workers攔截和模擬服務器端組件。目前，該演示只適用于Chrome瀏覽器。首先創建了一個易受攻擊的目標，它存在一個基于DOM的CSS注入漏洞，并在頁面放置了一個敏感token。再對腳本標簽添加了一些保護措施，對左尖括號和右尖括號進行了編碼。

接下來將強制加載受害者的CSS，并且使用上述方法，可一次竊取（猜解）一個敏感字符。在接收端，定義一個攔截請求的service worker，并通過post-message將它們發送回域，然后將token存儲在本地存儲中以供后續使用。你也可以想象一個后端Web服務器，通過Web套接字或輪詢將CSRF token回發給攻擊者域。

如果你的瀏覽器支持的話，只需點擊打開頁面任意位置，你將看到CSRF token將逐一被猜解出來。

四、結束語

反射型CSS注入實際上比存儲型CSS注入更致命，因為存儲型CSS注入需要一個服務器在受害者渲染之前來更新CSS。一段時間以來，CSS注入在嚴重程度上來回變化。過去IE瀏覽器是允許用戶在CSS中執行Javascript代碼的。這個演示也從某種程度上表明了CSS注入，以及渲染不受信任的CSS仍會導致嚴重的安全問題。所以在設計軟件一定要測試，才能及時發現和修復各種漏洞。

讓我們看看如下這個web應用示例：

<html>
 <meta http?equiv="Content?Security?Policy"
 content="script?src 'nonce?...' 'unsafe?eval'">
 <div id="template_target"></div>
 <script type="application/template" id="template">
 Hello World! 1 + 1={{ 1 + 1 }}
 </script>
 Your search is <?php echo $_GET['q']; ?>
 <script nonce="...">
 let template=document.getElementById('template');
 template_target.innerHTML=template.innerText.replace(/{{(.?)}}/g,eval)
 </script>
</html>

以上這段簡單的HTML代碼可能反映了現在滲透測試人員經常碰到的模板化Web應用。某些模板內容存儲在Web頁面中，然后再轉換為HTML代碼的一部分。上段代碼中含有id為template的HTML元素內容先被讀取，然后再執行{{}}括號內的內容，最后在某個單獨HTML元素中呈現出來。

Hello World! 1 + 1=2
Your search is ...........

其次，這段代碼應用程序會在頁面上打印URL中的參數值。這顯而易見是一個XSS漏洞，但由于CSP（內容安全策略）的存在，攻擊者并不能直接執行javascript。雖然直接運行javascript的路被堵死，但是我們可以找到其他繞過方法。

乍一看，貌似eval函數是一個可以利用的點，我們或許可以直接插入某些特制代碼，讓eval函數去執行。

為了實現這點，我們必須插入HTML元素中id為template的代碼。但在我們插入語句的前面已有id為template的HTML元素，而document.getElementById('template')只會去獲取第一個HTML元素，并不是我們所輸入的語句。

此刻，我們需要換個角度，看看瀏覽器是否能出現“意外”，以前就出現過很多瀏覽器的異常解析所導致的XSS攻擊。我把所有能使用的tag都收集起來進行測試，看看是否有驚喜。測試代碼如下：

<div id="template">First Tag</div>
 {% for tag in tag_list %}
 <{{tag}} id="template">{{tag}}</{{tag}}>
 {% endfor %}
<script>console.log(document.getElementById('template'));</script>

當程序運行完畢時，我得到一個奇怪的結果：當輪到<html>時，頁面結構似乎發生了大變，此時已不再是<div>排在前面。讓我們看下當插入<html id="template">時的變化：

此時<html>已排在文檔頂部（在我所測試的所有瀏覽器中都是如此！），現在getElementById('template')將獲取<html>中的惡意數據，而不是<div>的內容。

只需簡單的?q=<html id="template">{{ alert("xss") }}</html>就可進行攻擊

最終，由于瀏覽器這個“莫名其妙”的特性，我們繞過了CSP成功進行了XSS攻擊！

本文由白帽匯整理并翻譯，不代表白帽匯任何觀點和立場

來源：https://nosec.org/home/detail/2860.html

原文：https://pagedout.institute/download/PagedOut_001_beta1.pdf（該PDF文檔的第62頁

白帽匯從事信息安全，專注于安全大數據、企業威脅情報。

公司產品：FOFA-網絡空間安全搜索引擎、FOEYE-網絡空間檢索系統、NOSEC-安全訊息平臺。

為您提供：網絡空間測繪、企業資產收集、企業威脅情報、應急響應服務。

移動應用程序開發中，有一種情況是用戶希望將他們的交互式 Web 內容作為原生 Android 或 iOS 應用程序。為此，開發人員有 2 個選項，他們可以從頭開始構建應用程序，這需要額外的時間和資源，或者是將網頁作為 web 視圖嵌入到原生 android 應用程序中的最簡單和更快的選項。它將減少開發人員開發本機應用程序 UI 并僅使用當前網頁中的 UI 的時間。

但是，這種方法存在局限性，例如某些任務或手勢只能在移動應用程序中發生，而不能在瀏覽器中發生，例如語音命令或滑動手勢。為了適應這一點，我們需要在原生應用程序中添加額外的代碼，并將這個原生任務連接到我們的 webview 應用程序。在這種情況下，javascript 注入作為將本機代碼（Java 或 Swift）橋接到網頁代碼（Javascript）的解決方案

Android 中的 Javascript 注入

在這里，我將嘗試解釋在 Native android 應用程序中加載網頁所需完成的基本設置。首先，您需要在活動布局中設置 webview，下面是如何在 Android XML 文件中添加 <Webview> 標記的示例

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

之后，我們需要訪問互聯網才能在我們的應用程序中工作，為此我們應該在 Android 清單文件中添加以下語法

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

現在，我們可以移動到 MainActivity.java 文件，在這里我們需要在 onCreate() 函數中添加以下語法。因為 onCreate 函數是我們初始化一切的第一個地方，所以下面的語法幫助我們初始化我們的 webview。 setJavaScriptEnabled(true) 語法需要設置為 true，以授予在此使用 javascript 注入的權限。 addJavascriptInterface(this,"android") 語法將有助于創建可用作 Java 和 Javascript 之間的橋梁的 Web 界面。在這里，我們的界面將被稱為android。最后一個語法是 loadUrl ，它有助于在 Native 應用程序中加載我們的網頁。

WebView webViewMain;
webViewMain=findViewById(R.id.webview);

webViewMain.getSettings().setJavaScriptEnabled(true);
webViewMain.addJavascriptInterface(this, "android");
webViewMain.loadUrl("https://www.example.com");

仍然在 MainActivity.java 文件中，我們需要在 onCreate() 函數之外添加一個類。這個類將存儲我們想要在 javascript 中運行的所有函數，我們也可以從 javascript 中獲取任何值以傳輸到 Java 原生應用程序變量。示例之一是 getId 函數，它將 HTML 標簽中的 id 傳輸到本地應用程序中進行識別。

public class WebAppInterface {
    String value="hello"
    
    @JavascriptInterface
    public String runValue() {
       return value;
    }
    @JavascriptInterface
    public int getId(id) {
       return id;
    }
}

要使用上述函數，下面是我們可以在 onCreate() 或其他偵聽器函數中添加的語法。您可以識別出我們使用 loadUrl 來注入 javascript，在 loadurl 中我們可以使用每種 javascript 語法來導出網頁。同樣在 loadurl 中，我們需要添加上面已經創建的函數，并將 android 作為父函數。

webViewMain.loadUrl("javascript：window.onclick=function(e) {\n" +
    "android.getId(e.target.id);}");
webViewMain.loadUrl("javascript：android.getSpeechIndex()");

關注七爪網，獲取更多APP/小程序/網站源碼資源！

在線咨詢

上一篇：SSM框架基于JavaWeb在線投票系統的設計與實現
下一篇：12-25-(老貓軟件)短視頻多賬號發布小紅書素人鋪

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS注入實例

您的項目需求