如何沙盒div元素？

我想構建一個內容編輯器。這個contenteditor會將一個HTML文檔（帶有JavaScript）加載到例如#result元素中。問題在於，如果在這個HTML元素中有例如$("input").hide();，那麼我的所有輸入都會在整個頁面中消失，所以不僅僅在加載的HTML（我的目標）中。如何沙盒div元素？

我想與編輯器做的是當客戶點擊，它表示數據庫的東西一個元素，該元素的信息將彈出，用戶將能夠編輯。（因此，如果用戶將鼠標懸停與類「接觸型」（這是在數據庫中的一個形式中，連接到加載的頁）的新窗口將有關此特定形式的元素信息彈出。

此外，我不能完全禁用Javascript，因爲加載的HTML可能包含Javascript的樣式等。

我的目標：刪除Javascript，當用戶加載HTML文件時可能會很煩人。此外，刪除了Javascript功能來編輯之外它自己的DOM somehthing的能力。

PS我開賭這種變通方法就像爲此使用iframe，但我希望能夠將鼠標懸停在與它們交互的元素上。

編輯：看來這個問題可能有點過於寬泛，看着評論。 我的問題摘要：如何禁用特定div的alert（）以及如何創建沙箱，以便div內的代碼只能從該div內部更改元素。

來源

2016-08-14 Gerrit Luimstra

請張貼一些代碼。以及你正在面臨的問題。 –

你不需要在這種情況下沙盒這個div。尋找SQL注入，這是完全一樣的..至少是原因。所以要避免這種情況，請使用用於避免sql注入的方法。 –

另外，當你捕捉到這個可編輯的內容時，將所有特殊字符轉換爲它們各自的html實體.. google for html entities –

你在找什麼是HTML清理。這是您在瀏覽器中加載之前，從服務器上的HTML代碼片段中刪除任何危險內容的過程。有很多消毒庫可以去除腳本標籤，對象標籤等。請記住，您無法使用javascript進行消毒，因爲當您注入腳本時，另一個惡意腳本可能已經加載並運行。

有效沙箱中的JavaScript環境的唯一途徑是藉助iframe。你會注意到像CodePen,JSBin和JSFiddle這樣的網站廣泛使用它們。有一種叫做ShadowDOM的東西，它是Web組件的基礎，但它還沒有得到很好的支持。

爲了能夠運行你自己的前端腳本允許懸停，您可以在消毒處理後注入腳本。這樣，如果它被加載到iframe中，你的腳本也將被加載。

最後，alert()不屬於對DOM的任何元素。例如，您可以在頁面加載後立即觸發警報。但是，如果您試圖阻止用戶交互中出現警報，則可以嘗試從特定元素中刪除所有事件偵聽器。如果您清理腳本標記的HTML，這將不是必需的，但是，由於腳本不會有機會加載，所以不會有任何事件偵聽器。

來源

2016-08-14 17:14:55 Soviut

完美！謝謝！這是我正在尋找的。 –

您可以使用ShadowDOM將html文檔加載到host節點中。另請參見WHY SHADOW DOM?

來源

2016-08-14 17:12:09 guest271314

如何沙盒div元素？

回答

相關問題