コンポーネントの非同期コード

setTimeout() や setInterval() などの非同期関数を使用してコンポーネントを参照するときは、フレームワークのライフサイクルを終了します。非同期コードの実行中にユーザーインターフェースで他の場所に移動すると、フレームワークは、非同期要求を実行したコンポーネントを非表示にして破棄します。そのコンポーネントを引き続き参照できますが、コンポーネントは無効になっています。ハッカーは、この脆弱性を悪用して、アプリケーションをクラッシュさせるなどします。

フレームワークに安全に再入するには、$A.getCallback() 関数でコードをラップします。次に、コンポーネントが依然として有効であることを保証するため、コールバックで処理を実行する前に component.isValid() 関数を使用します。あるいは、enqueueAction() を使用して、複数のアクションを 1 つの要求にまとめます。

セキュリティ違反とその修正方法の例を次に示します。

Aura の例

1vars.Timer = setInterval(function(){ helper.action(component); },1);

getCallback() を使用した修正コードの例

フレームワークに安全に再入するには、$A.getCallback() 関数でコードをラップします。次に、コンポーネントが依然として有効であることを保証するため、コールバックで処理を実行する前に component.isValid() 関数を使用します。

$A.getCallback() を使用して、setTimeout() コールや setInterval() コールの場合のように通常の再表示ライフサイクル外のコンポーネントにアクセスするコードをラップします。$A.getCallback() では、現在の実行コンテキストが保持され、非同期コードに正しいアクセスレベルが付与されます。それ以外の場合では、フレームワークでコンテキストが失われ、グローバルリソースへのアクセスのみが許可されます。

1window.setTimeout(
2   $A.getCallback(function() {
3      if(cmp.isValid()){ 
4         cmp.set("v.visible", true); 
5      }
6   }), 5000
7);

enqueueAction() を使用した修正コードの例

enqueueAction() を使用して、サーバー側コントローラーのアクションをアクション実行キューに追加する方法もあります。フレームワークでは、個々のアクションごとに個別の要求を送信するのではなく、イベントチェーンを処理し、キューのアクションを 1 つの要求にまとめます。これらのアクションは非同期で、コールバックが設定されます。

1var action = component.get(“c.usually_a_server_side_controller”);
2action.setCallback(this, function()(response) {...});
3$A.enqueueAction(action2);

詳細は、Trailhead の「Secure Client-Side Development module (セキュアなクライアントサイド開発モジュール)」を確認してください。