? ? 作為前端開放的基礎安全保證，caja 是目前比較合適的運行機制，包括前端運行環境以及后端編譯環境，這次先整體介紹下 caja 在前端是如何屏蔽外部模塊代碼對整體應用的影響 （注意：官方文檔較少，以下為自己理解，難免偏頗）.

組成部分

1. 整體運行環境：隔離模塊與宿主環境，并提供外部應用與模塊的溝通機制.

?

2. 提供 ecmascript5 以及 dom2 的全平臺兼容實現，注入到運行環境中。

?

? ? ?es5 部分通過直接修改本地原生對象原型實現，運行時直接使用原生對象，這種做法值得推薦 。

?

? ? ? 其中比較重要的是：模擬實現 es5 中的屬性描述符 ，結合后端編譯，用戶的所有讀寫操作都會經過 caja 前端運行環境監測，是 caja 安全保證的核心機制.

?

? ? ?dom 兼容部分則并不是直接修改宿主 dom 原型 ，而是自行構造了一系列 javascript 實現的 dom 類，使用組合模式，將操作增強并委托到對應的原生節點，然后將這些 dom 類注入到模塊運行環境。用戶程序對 dom 節點的操作都要經過 caja 運行環境的轉發，便于控制。

?

3. html/css parser ，包含了簡易的 html/css parser，對用戶的 html，css進行必要的過濾以及添加自定義規則，最常見的是

?

?1. 防止 id 沖突，經過過濾后，每個 id 都改寫為全局唯一的標志.

?

?2. 攔截隨意跳轉，監控代碼的可能跳出點( src , href ...).

?

?3. 代碼模塊化機制，后端將用戶代碼編譯為模塊化單元，前端通過模塊化機制加載并初始化用戶代碼。實現代碼廣泛采用了 promise .

運行機制

caja 中的每個模塊表示為一段 html，css，javascript 的結合體，外部應用嵌入多個模塊，caja 保證每個模塊的獨立性與安全性：

?

1.不能訪問平臺的相關特性.(window.location，cookie )

2.不能污染全局。( 全局變量，原生對象，宿主對象 )

3.節點操作限于模塊內部.

轉自 { focus : web }

轉載于:https://www.cnblogs.com/kailzhou/p/5027668.html

總結

以上是生活随笔為你收集整理的caja 原理 : 前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。