XSS 前端防火牆 —— 可疑模塊攔截

上一篇介紹的系統，雖然能防禦簡單的內聯 XSS 代碼，但想繞過還是很容易的。

由於是在前端防護，策略配置都能在源代碼裏找到，因此很快就能試出破解方案。並且攻擊者可以屏蔽日誌接口，在自己電腦上永不發出報警信息，保證測試時不會被發現。

昨天提到最簡單並且最常見的 XSS 代碼，就是加載站外的一個腳本文件。對於這種情況，關鍵字掃描就無能爲力了，因爲代碼可以混淆的千變萬化，我們看不出任何異常，只能將其放行。

因此，我們還需增加一套可疑模塊跟蹤系統。

被動掃描

和之前說的一樣，最簡單的辦法仍是遍歷掃描。我們可以定時分析頁面裏的腳本元素，發現有站外地址的腳本就發送預警日誌。

如果昨天說的內聯事件使用定時掃描，或許還能在觸發前攔截一部分，但對於腳本則完全不可能了。腳本元素一旦被掛載到主節點之下，就立即加載並執行了。除非定時器開的特別短，能在腳本加載的過程中將其銷燬，或許還能攔截，否則一不留神就錯過了。

我們得尋找更高端的瀏覽器接口，能在元素創建或添加時，進行分析和攔截。

主動防禦

在無所不能的 HTML5 裏，這當然是能辦到的，它就是 MutationEvent。與其相關的有兩個玩意：一個叫 DOMNodeInserted 的事件，另一個則是 MutationObserver 類。

前者雖然是個事件，但即使阻止冒泡它，或調用 preventDefault 這些方法，仍然無法阻止元素被添加；而後者就不用說了，看名字就是一個觀察器，顯然優先級會更低。

MutationEvent 試探

但不管能否實現我們的目標，既然有這麼個東西，就先測試看看究竟能有多大的本領。

<script>
    var observer = new MutationObserver(function(mutations) {
        console.log('MutationObserver:', mutations);
    });
    observer.observe(document, {
        subtree: true,
        childList: true
    });

    document.addEventListener('DOMNodeInserted', function(e) {
        console.log('DOMNodeInserted:', e);
    }, true);
</script>

<script>console.warn('site-in xss 1');</script>
<script src="http://www.etherdream.com/xss/out.js"></script>
<script>console.warn('site-in xss 2');</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

出乎意料的是，MutationObserver 居然能逐一捕捉到頁面加載時產生的靜態元素，這在過去只能通過定時器才能勉強實現。同時爲了更高效的記錄，MutationObserver 並非發現新元素就立即回調，而是將一個時間片段裏出現的所有元素，一起傳過來。這對性能來說是件好事，但顯然會損失一些優先級。

再看 DOMNodeInserted，它雖然無法捕獲到靜態元素，但在動態創建元素時，它比 MutationObserver 更早觸發，擁有更高的優先級。

靜態腳本攔截

接着再來嘗試，能否利用這兩個事件，銷燬可疑的腳本元素，以達到主動攔截的效果。

<script>
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

            var nodes = mutation.addedNodes;
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes[i];

                if (/xss/.test(node.src) || /xss/.test(node.innerHTML)) {
                    node.parentNode.removeChild(node);
                    console.log('攔截可疑模塊:', node);
                }
            }
        });
    });

    observer.observe(document, {
        subtree: true,
        childList: true
    });
</script>

<script>console.warn('site-in xss 1');</script>
<script src="http://www.etherdream.com/xss/out.js"></script>
<script>console.warn('site-in xss 2');</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/x\ss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

又是一個出人意料的結果，所有靜態腳本被成功攔截了！

然而這並非標準。FireFox 雖然攔截到腳本，但仍然執行代碼了。

不過對於預警系統來說，能夠發現問題也足夠了，可以攔截風險那就再好不過。

動態腳本攔截

剛剛測試了靜態腳本的攔截，取得了不錯的成績。但在動態創建的元素上，和我們先前猜測的一樣，MutationObserver 因優先級過低而無法攔截。

那就讓 DOMNodeInserted 來試試：

<script>
    document.addEventListener('DOMNodeInserted', function(e) {
        var node = e.target;

        if (/xss/.test(node.src) || /xss/.test(node.innerHTML)) {
            node.parentNode.removeChild(node);
            console.log('攔截可疑模塊:', node);
        }
    }, true);
</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

遺憾的是，DOMNodeInserted 也沒能攔截動態腳本的執行 —— 儘管能檢測到。經過一番嘗試，所有瀏覽器都宣告失敗。

當然，能實時預警已滿足我們的需求了。但若能攔截動態腳本，整套系統防禦力就更高了。

既然無法通過監控節點掛載來攔截，我們不妨換一條路。問題總有解決的方案，就看簡單與否。

屬性攔截

仔細分析動態腳本創建的所有步驟：

var el = document.createElement('script');
el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
document.body.appendChild(el);

是哪一步觸發了掛載事件？顯然是最後行。要獲得比它更高的優先級，我們只能往前尋找。

既然是動態創建腳本，賦予它 src 屬性必不可少。如果創建腳本只爲賦值 innerHTML 的話，還不如直接 eval 代碼更簡單。

如果能在屬性賦值時進行攔截，那麼我們即可阻止賦予可疑的 src 屬性。

類似 IE 有個 onpropertychange 事件，HTML5 裏面也是有屬性監聽接口的，並且就是剛剛我們使用的那個：MutationEvent。甚至還是那兩套方案：DOMAttrModified 和 MutationObserver。

在根節點上監聽屬性變化，肯定會大幅影響頁面的性能，但我們還是先來看看是否可行。

先嚐試 MutationObserver：

var observer = new MutationObserver(function(mutations) {
    console.log(mutations);
});
observer.observe(document, {
    subtree: true,
    attributes: true
});

var el = document.createElement('script');
el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
document.body.appendChild(el);

站外腳本執行了，但奇怪的是，回調卻沒有觸發。原來，我們監控的是 document 下的元素，而腳本賦值時還處於離屏狀態，顯然無法將事件冒泡上來。

如果我們先 appendChild 再賦值 src 屬性，倒是可以捕獲到。但現實中調用順序完全不是我們說了算的。

同樣的，DOMAttrModified 也有這問題。

看來，事件這條路的侷限性太大，我們得另闢蹊徑。

API 攔截

監控屬性賦值的方式肯定不會錯，只是我們不能再用事件那套機制了。

想在修改屬性時觸發函數調用，除了事件外，另一個在傳統語言裏經常用到的、並且主流 JavaScript 也支持的，那就是 Setter 訪問器。

當我們設置腳本元素 src 屬性時，理論上說 HTMLScriptElement.prototype.src 這個訪問器將被調用。如果我們重寫這個訪問器，即可在設置腳本路徑時將其攔截。

<script>
    HTMLScriptElement.prototype.__defineSetter__('src', function(url) {
        console.log('設置路徑:', url);
    });
</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

如果這套方案可行的話，一切都將迎刃而解。而且我們只監聽腳本元素的 src 賦值，其他元素和屬性則完全不受影響，因此性能得到極大提升。

經測試，FireFox 和 IE 瀏覽器完全可行。我們事先保存原始的 setter 變量，然後根據策略，決定是否向上調用。

<script>
    var raw_setter = HTMLScriptElement.prototype.__lookupSetter__('src');

    HTMLScriptElement.prototype.__defineSetter__('src', function(url) {
        if (/xss/.test(url)) {
            if (confirm('試圖加載可疑模塊：\n\n' + url + '\n\n是否攔截？')) {
                return;
            }               
        }
        raw_setter.call(this, url);
    });
</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

效果非常漂亮，然而現實卻令人遺憾 —— 我們的主流瀏覽器 Chrome 並不支持。由於無法操作原生訪問器，即使在原型鏈上重寫了 setter，實際賦值時仍不會調用我們的監控程序。

先不急，若是拋棄原型鏈，直接在元素實例上定義訪問器又會如何？

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');

        el.__defineSetter__('src', function(url) {
            console.log('設置路徑:', url);
        });

        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

run

這一回，Chrome 終於可以了。

然而，這僅僅是測試。現實中哪有這樣的機會，供我們裝上訪問器呢。

因此，我們只能把主動防禦的時機再往前推，在元素創建時就調用我們的防禦代碼。我們得重寫 createElement 這些能創建元素 API，只有這樣，才能第一時間裏，給實例裝上我們的鉤子程序，爲 Chrome 實現動態模塊的防禦：

<script>
    // for chrome
    var raw_fn = Document.prototype.createElement;

    Document.prototype.createElement = function() {

        // 調用原生函數
        var element = raw_fn.apply(this, arguments);

        // 爲腳本元素安裝屬性鉤子
        if (element.tagName == 'SCRIPT') {
            element.__defineSetter__('src', function(url) {
                console.log('設置路徑:', url);
            });
        }

        // 返回元素實例
        return element;
    };
</script>

<button id="btn">創建腳本</button>
<script>
    btn.onclick = function() {
        var el = document.createElement('script');
        el.src = 'http://www.etherdream.com/xss/out.js?dynamic';
        document.body.appendChild(el);
    };
</script>

Run

這樣，當元素創建時，就已帶有我們的屬性掃描程序了，Chrome 不支持的問題也迎刃而解。

事實上，除了重寫 property 訪問器，我們還得考慮通過 setAttribute 賦值 src 的情況。因此需整理出一套完善的瀏覽器鉤子程序。

重寫原生 API 看似很簡單，但如何才能打造出一個無懈可擊的鉤子系統呢？明天繼續講解。

XSS 前端防火牆 —— 可疑模塊攔截

被動掃描

主動防禦

MutationEvent 試探

靜態腳本攔截

動態腳本攔截

屬性攔截

API 攔截

這種嵌套字典類型的數據，我想把它讀取到df裏，如何操作？

微調真的能讓LLM學到新東西嗎:引入新知識可能讓模型產生更多的幻覺

iNeuOS工業互聯網操作系統，增加電力IEC104協議

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

kbgressdb之數據結構V0.2

響應式設計的現狀與趨勢

AngularJS 五大特性，加快 Web 應用開發

滾動條滾動到可視區域加載數據

js中幾種實用的跨域方法原理詳解

HTML5 Canvas 製作水波紋效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結