HTML Javascript - 防止從 dom 樹的子節點執行腳本

Question

我從一個不可信的來源下載了一些 html 樹，並使用它來將內容顯示為我頁面中某個 HTML div 的子項。 但是，此下載的代碼存在運行腳本/或在事件處理程序中執行腳本的危險。 是否可以在 HTML 中就像使用標簽來定義腳本一樣，做一個

<noscriptex>
    <script>
        ...
    </script>
</noscriptex>

那么瀏覽器不會在這個標簽中執行任何代碼？

如果沒有這樣的東西，我如何清理下載的 HTML 以顯示帶有 CSS 的 DOM 元素而不涉及任何腳本？

Answer 1

不; 沒有這樣的功能。

相反，您需要解析 HTML 並使用嚴格的白名單刪除任何無法識別的標簽和屬性。

您還需要驗證屬性值； 尤其是網址。

Answer 2

您可以使用函數從標記中刪除腳本，例如

function stripScripts(markup) {

    var div = document.createElement('div');
    var frag = document.createDocumentFragment();

    div.innerHTML = markup;

    var scripts = div.getElementsByTagName('script');
    var i = scripts.length;

    while (i--) {
      scripts[i].parentNode.removeChild(scripts[i]);
    }

    while (div.firstChild) {
      frag.appendChild(div.firstChild);
    }
    return frag;
}

任何使用 innerHTML 插入的腳本元素都不會執行，因此它們是安全的。 它們也不在 DOM 中，因此功能有限。

注意createDocumentFragment返回的對象可以直接插入到DOM中，函數返回的fragment沒有script元素。

Answer 3

這就是 iframe 的用途。 如果內容來自與主機頁面不同的域，則不允許與任何其他內容進行通信。 您可以讓它按照其核心內容運行腳本，並且它們不會影響您的頁面部分。