Salesforce 從 Winter'17 版本開始在 Lightning 框架中引入了 Locker Service 機制。
Locker Service 機制的引入可以增強 Lightning 應(yīng)用的安全性咧七。
Locker Service 的作用
Lightning 的應(yīng)用本質(zhì)上是 JavaScript 應(yīng)用中燥，其中包含了由各種 HTML 頁面元素組成的“文檔對象模型樹”（DOM Tree寸潦，參考官方定義）埠忘。
與此同時救军，Lightning 應(yīng)用是組件化的煮仇，來自不同開發(fā)者的組件可以以 DOM 的形式存在于同一個應(yīng)用頁面中。如果沒有任何的防護措施，這些 DOM 是可以互相訪問的邑闲，從而帶來安全隱患算行。
在 Lightning 框架中，不同來源的組件是由命名空間（namespace）來確定的苫耸，比如標(biāo)準(zhǔn)的組件有 “ui:button”州邢、“l(fā)ightning:select” 等，它們就屬于不同的命名空間鲸阔。
Locker Service 的主要作用就是提供了虛擬的 DOM 元素偷霉，將不同命名空間的組件封裝起來，限制它們之間的訪問褐筛。
封裝組件
Locker Service 中預(yù)定義了一些安全組件类少，將實際的 DOM 封裝起來，比如：
- SecureComponent：將同一命名空間下的 Component 元素封裝起來
- SecureComponentRef：另一命名空間下的 Component 元素
- SecureWindow：將 window 元素封裝起來
- SecureDocument：將 document 元素封裝起來
代碼示例
我們通過一段代碼來看看實際應(yīng)用的情況渔扎。
Lightning 組件：
<aura:component >
<!-- 定義一個 div 元素 -->
<div id="idDiv" aura:id="idDiv">
<p>Hello World!</p>
</div>
<!-- 定義一個 lightning 命名空間下的 button 元素 -->
<lightning:button name="button" label="click here" aura:id="idButton" onclick="{!c.handleClick}" />
</aura:component>
相應(yīng)的控制器代碼：
({
handleClick : function(component, event, helper) {
debugger;
},
})
在用戶點擊按鈕之后硫狞，JavaScript 的 debugger 語句可以讓我們在控制臺中進行斷點調(diào)試。
現(xiàn)在我們執(zhí)行一些命令：
命令：
window+''
結(jié)果：
"SecureWindow: [object Window]{ key: {"namespace":"c"} }"
解釋：
我們想要顯示 window 元素晃痴，可以看到結(jié)果中給出的是 SecureWindow 元素残吩，也就是說原始的 window 元素已經(jīng)被封裝起來了。
命令：
component.find('idDiv')+''
結(jié)果：
"SecureComponent: markup://aura:html {5:0} {idDiv}{ key: {"namespace":"c"} }"
解釋：
我們想要顯示 div 元素倘核，結(jié)果可以看到它已經(jīng)被封裝到了 SecureComponent 元素中泣侮，其命名空間是 “c”，這是基本 HTML 元素的默認(rèn)命名空間紧唱。
命令：
component.find('idButton')+''
結(jié)果：
"SecureComponentRef: markup://lightning:button {8:0} {idButton}{ key: {"namespace":"c"} }"
解釋：
我們想要顯示 lightning:button 元素活尊，結(jié)果可以看到它已經(jīng)被封裝到了 SecureComponentRef 元素中，其命名空間是 “c”漏益。lightning:button 元素本身的命名空間是 “l(fā)ightning”蛹锰，但是現(xiàn)在它被引用到了命名空間是 “c” 的組件中，所以類型是 SecureComponentRef绰疤。
命令：
component.find('idButton').getElement()+''
結(jié)果：
Uncaught TypeError: component.find(...).getElement is not a function
解釋：
我們想要顯示 lightning:button 元素中的內(nèi)容铜犬，結(jié)果出錯了，原因就是它屬于命名空間 “l(fā)ightning”轻庆，而我們所處的組件是屬于命名空間 “c”癣猾，Locker Service 限制了它們之間的訪問。
