Salesforce 從 Winter'17 版本開始在 Lightning 框架中引入了 Locker Service 機(jī)制。

Locker Service 機(jī)制的引入可以增強(qiáng) Lightning 應(yīng)用的安全性。

Locker Service 的作用

Lightning 的應(yīng)用本質(zhì)上是 JavaScript 應(yīng)用，其中包含了由各種 HTML 頁面元素組成的“文檔對(duì)象模型樹”（DOM Tree，參考官方定義）。

與此同時(shí)，Lightning 應(yīng)用是組件化的，來自不同開發(fā)者的組件可以以 DOM 的形式存在于同一個(gè)應(yīng)用頁面中。如果沒有任何的防護(hù)措施，這些 DOM 是可以互相訪問的，從而帶來安全隱患。

在 Lightning 框架中，不同來源的組件是由命名空間（namespace）來確定的，比如標(biāo)準(zhǔn)的組件有 “ui:button”、“l(fā)ightning:select” 等，它們就屬于不同的命名空間。

Locker Service 的主要作用就是提供了虛擬的 DOM 元素，將不同命名空間的組件封裝起來，限制它們之間的訪問。

封裝組件

Locker Service 中預(yù)定義了一些安全組件，將實(shí)際的 DOM 封裝起來，比如：

• SecureComponent：將同一命名空間下的 Component 元素封裝起來
• SecureComponentRef：另一命名空間下的 Component 元素
• SecureWindow：將 window 元素封裝起來
• SecureDocument：將 document 元素封裝起來

代碼示例

我們通過一段代碼來看看實(shí)際應(yīng)用的情況。

Lightning 組件：

<aura:component >
    <!-- 定義一個(gè) div 元素 -->
    <div id="idDiv" aura:id="idDiv">
        <p>Hello World!</p>
    </div>

    <!-- 定義一個(gè) 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;
    },
})

在用戶點(diǎn)擊按鈕之后，JavaScript 的 debugger 語句可以讓我們在控制臺(tái)中進(jìn)行斷點(diǎn)調(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é)果出錯(cuò)了，原因就是它屬于命名空間 “l(fā)ightning”，而我們所處的組件是屬于命名空間 “c”，Locker Service 限制了它們之間的訪問。