この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

セキュアなラッパー

Locker Service は、オブジェクトを非表示にすることや、それらのオブジェクトのセキュアなバージョンを提供することで、グローバル参照に制限を適用します。たとえば、window のセキュアなバージョンは SecureWindow です。セキュアなバージョンは、メソッドおよびプロパティに応じて絞り込まれたり、非表示になったりする点を除き、セキュアでないバージョンと同じ方法でやりとりできます。

他のオブジェクト (コンポーネントやイベントなど) のインスタンスも、ラップされたセキュアなバージョンで置き換えられます。最も一般的なセキュアなラッパーのリストを次に示します。

SecureAura
$A のセキュアなラッパー。JavaScript コードのフレームワークを使用するためのエントリポイントです。
SecureComponent
同じ名前空間内の Component オブジェクトのセキュアなラッパー。
SecureComponentRef
SecureComponentRef は、異なる名前空間のコンポーネントの外部 API を提供する SecureComponent のサブセットです。
コントローラまたはヘルパーの使用中は、SecureComponent (基本的に this オブジェクト) にアクセスできます。異なる名前空間のコンポーネントを参照すると、代わりに SecureComponentRef が返されます。たとえば、マークアップに lightning:button が含まれ、cmp.find("buttonAuraId") をコールすると、lightning:button はボタンマークアップを含むコンポーネントとは異なる名前空間にあるため、SecureComponentRef が返されます。
SecureDocument
document オブジェクトのセキュアなラッパー。HTML ドキュメントまたはページのルートノードを表します。document オブジェクトは、ページのコンテンツ (DOM ツリー) へのエントリポイントです。
SecureElement
さまざまな HTML 要素を表す Element オブジェクトのセキュアなラッパー。SecureElementProxy オブジェクトでラップされているため、そのデータにアクセスされたときに遅延絞り込みを実行できるようにパフォーマンスが最適化されます。そのため、ブラウザコンソールでデバッグしている場合、HTML 要素は Proxy オブジェクトによって表されます。
SecureObject
Locker Service によってラップされるオブジェクトのセキュアなラッパー。SecureObject がある場合、通常は基盤となるオブジェクトへのアクセス権がないため、一部のプロパティは使用できません。
SecureWindow
window オブジェクトのセキュアなラッパー。DOM ドキュメントがあるウィンドウを表します。

いくつかのセキュアなラッパーを表すサンプルコンポーネントを見てみましょう。

1<!--c:secureWrappers-->
2<aura:component >
3    <div id="myDiv" aura:id="div1">
4        <p>See how Locker Service uses secure wrappers</p>
5    </div>
6    <lightning:button name="myButton" label="Peek in DOM"
7        aura:id="button1" onclick="{!c.peekInDom}"/>
8</aura:component>

c:secureWrappers コンポーネントは、<div> HTML 要素と lightning:button コンポーネントを作成します。

次に、DOM 内でピークするクライアント側コントローラを示します。

1({ /* secureWrappersController.js */
2    peekInDom : function(cmp, event, helper) {
3        console.log("div1: ", cmp.find("div1").getElement());
4        
5        console.log("button1: ", cmp.find("button1"));
6        console.log("button name: ", event.getSource().get("v.name"));
7        // add debugger statement for inspection
8        // always remove this from production code
9        debugger;
10    }
11})

console.log() を使用して、<div> 要素とボタンを調べます。<div> SecureElementProxy オブジェクトでラップされているため、そのデータにアクセスされたときに遅延絞り込みを実行できるようにパフォーマンスが最適化されます。

ブラウザコンソールの要素を調べることができるように、コードに debugger ステートメントが追加されています。

ブラウザコンソールに次の式を入力し、結果を確認します。

1cmp
2cmp+""
3cmp.find("button1")
4cmp.find("button1")+""
5window
6window+""
7$A
8$A+""

オブジェクトが String に変換されるように、いくつかの式に空の文字列が追加されています。toString() メソッドを使用することもできます。

出力は次のとおりです。ブラウザコンソールの出力

出力の一部を調べてみましょう。

cmp+""
c:secureWrappers コンポーネン��を表す cmpSecureComponent オブジェクトを返します。
cmp.find("button1")+""
異なる名前空間のコンポーネントの外部 API を表す SecureComponentRef を返します。この例では、このコンポーネントは lightning:button です。
window+""
SecureWindow オブジェクトを返します。
$A+""
SecureAura オブジェクトを返します。