2022.06.03

Lightning Web セキュリティ入門

Lightning Web セキュリティとは

Lightning Web セキュリティは、Lightning Web コンポーネント用のクライアント側セキュリティアーキテクチャです。
クライアント側セキュリティアーキテクチャとは、Lightning Web コンポーネントを利用するときに発生する脅威に対抗するセキュリティ機能そのものを、安全に実装するための設計方針・プログラムの仕組みのことです。

Lightning Web セキュリティを導入する目的

Lightning Web セキュリティの導入は、Lightning Web コンポーネントが他の名前空間のコンポーネントのデータに干渉したり、アクセスしたりすることを防ぐことを目的としています。

どういうことかというと、Salesforce では、AppExchange などのパッケージを利用して、複数の企業が作成したLightning Web コンポーネントを同じページに配置できます。
これらの Lightning Web コンポーネントには、企業が公開にしたくない非公開リソースやデータも含まれています。
Lightning Web コンポーネントは JavaScript を利用して作成されているため、予防策を講じなければ、同一ページ上の Lightning Web コンポーネントが window グローバルオブジェクトにアクセスし、ページ上の他のコンポーネントから非公開リソースやデータを取得できてしまう問題が発生します。
(JavaScript では、グローバルオブジェクトが常に定義されており、ウェブブラウザ上でスクリプトがグローバル変数を生成する時、グローバルオブジェクトのメンバーとして作成されるため)

これを防ぐために用意された機能こそが、今回紹介する Lightning Web セキュリティなのです。
それでは Lightning Web セキュリティがどのような仕組みでページの安全性を確保しているかを見ていきましょう。

Lightning Web セキュリティの仕組み

仮想環境でコンポーネントのリソースを守る!

Lightning Web セキュリティでは、コンポーネントを名前空間で分離することで、名前空間の外部にあるコンポーネントのリソースにアクセスできないようにしています。
このときコードは仮想環境(ホスト環境のレプリカ内)で実行されます。
ホスト環境で複数の仮想環境が同時に実行され、仮想環境で動作するコードは他の仮想環境のリソースにアクセスできなくなります。
これによりコンポーネントに有害なコードが含まれていても、実行先の仮想環境にしか影響を与えることがなくなり、コンポーネント間での安全性が確保されます。

ホスト環境で動作する仮想化エンジンで、仮想環境の構築と管理を行う機能を Lightning Web セキュリティと言っているのですね。
そして Lightning Web セキュリティは、各仮想環境でホスト環境からのグローバルオブジェクト、ネットワークアクセス、Cookie アクセス、ローカルストレージなどのリソースへのアクセスを制限付きで許可できます。

ディストーションで危険な動作を回避!

Lightning Web セキュリティでは、仮想環境内で実行されるコードを変更して、安全ではない動作を防ぐ手法が用いられており、この手法をディストーション(ゆがみ)と呼びます。
ディストーションは次のような目的のために利用されます。
・JavaScript Sandbox の外部のコンテンツやデータを変更しようとする API の試行の防止。

・実行中のコードを Sandbox の境界内に封じ込める。

・JavaScript Sandbox 内で、DOM、window.location などの共有グローバルオブジェクト、および Cookie などのデータへのアクセスを制限または削減する。
そしてディストーションで行われる処理のほとんどは、以下の3つに分類されるらしいです。
・コンテンツフィルタリング
 → 他の Sandbox のプロパティ (document.cookie、localStorage、sessionStorage など) にアクセスする試みを排除し、一方で現在のサンドボックス内でのアクセスは許可します。

・サニタイズ
 → innerHTML や outerHTML の要素から悪意のあるコードを排除します。

・プロパティアクセス機構の変更
 → 特定のプロパティの値を読み書きできないようにします (例: shadowRoot.mode)
ディストーションは仮想環境内でコードを変換しますので、Lightning Web コンポーネントの JavaScript コードへの影響が気になりますよね。
そんなときの便利機能がありました。

Lightning Web セキュリティを有効化したときの Lightning Web コンポーネント(JavaScript コード)への影響は、「Lightning Web Security Console」で確認しましょう。

Lightning Web Security Console とは

Lightning Web Security Console とは、Lightning Web セキュリティで Ligntning Web コンポーネントの JavaScript コードが正常に機能するかを確認するためのツールです。
JavaScript コードに問題がある場合は、その問題がLightnig Web セキュリティと関連があるか ESLint ルールを基にして評価してくれます。

Lightning Web Security Console は、コンポーネントライブラリのナビゲーションバーから使用できます。
このツールへの直接リンクは、https://developer.salesforce.com/docs/component-library/tools/lws-console です。

Lightning Web Security Console 画面

図1. Lightning Web Security Console 画面

こちらが実際のLightning Web Security Console 画面です。(図1)
画面の構成要素は、以下の通りです。

① コードコンソール
ここに評価したい JavaScript コードを入力します。

② 各種ボタン
・LWS:Enabled
このボタンでは、LWS を有効化した状態で評価するか、無効化した状態で評価するかを切り替えることができます。
有効化した状態でエラーが出た場合、無効化しても同様のエラーが出るか確認して、Lightning Web セキュリティが影響しているか等の確認がすばやくできるので便利ですね。

・Evaluate(評価)
このボタンをクリックすると、①に入力した JavaScript コードの評価が実行されます。

・Clear(クリア)
このボタンをクリックすると③、④に表示される結果のみクリアされます。
①に入力した JavaScript コードはクリアされません。

③ 評価結果
JavaScript の評価結果が表示されます。
ここにはLightning Web セキュリティのディストーションが原因のエラーも表示されます。

④ リンティングの結果
リンティング(linting)とは、コードの潜在的な問題を確認するためのツールです。
ここでは ESLint という JavaScript用のリンティングツールを利用した LWS ESLint ルールを用いたリンティングの結果が表示されます。
Salesforce で JavaScript を利用した開発をする際のリンティングルールの詳細は、開発者ガイドの「リンティング」に記載されています。

Lightning Web Security Console を試してみよう

Lightning Web Security Console での JavaScript 評価手順

Lightning Web Security Console の概要が把握できたところで、このツールを利用して JavaScript を評価する手順を確認していきましょう。
大まかな手順は以下になります。

1. 評価したい JavaScript コードをコピーし、Lightning Web Security Console に貼り付ける。
2. 「LWS:Enabled」の状態で、[Evaluate (評価)]をクリックし、評価を実行する。
3. 評価の結果表示されたエラーメッセージや ESLint ルールを確認する。
4. JavaScript に Lightning Web セキュリティの影響がありそうな場合は、LWS Distortion Viewer で回避策を確認する。

実際に使ってみた

今回 Lightning Web Security Console で評価してみる JavaScript コードはこちら。
Apex で取引先(Account)を取得して、Lightning Web コンポーネントで一覧表示することを想定した Lightning Web コンポーネントの JavaScript ファイルです。
import { LightningElement, track } from 'lwc';
import getAccount from '@salesforce/apex/lWC_TESTController.getAccount';

const columns = [
    {label: '取引先名', fieldName: 'Name', type: 'text',},
    {label: '電話番号', fieldName: 'Phone', type: 'text'},
];

export default class LWS_TEST extends LightningElement {
    @track data = [];
    columns = columns;

    connectedCallback() {
        getAccount()
        .then(result => {
            if(result.length > 0) {
                let accList = [];
                result.forEach(record => {
                    let acc = {};
                    acc.Name = record.Name;
                    acc.Phone = record.Phone;
                    accList.push(acc);
                })
                this.data = accList;
            }
        })
    }
}
LWS_Test.js
こちらの JavaScript コードをコピーして、 Lightning Web Security Console のコードコンソールに貼り付けます。
貼り付けたら、「LWS:Enabled」になっていることを確認して、[Evaluate]をクリックします。

図2. Lightning Web セキュリティでの JavaScript 評価結果

評価の結果が出ました。(図2)
今回は「@」が予期せぬ文字列として構文エラーが返されました。

ここで Lightning Web セキュリティの影響によるエラーが返されたら、LWS Distortion Viewer で回避策を確認しましょう。

LWS Distortion Viewer とは

LWS Distortion Viewer とはLightning Web セキュリティのディストーションによる影響と、その影響の回避策がまとめられているガイドです。(図3)
LWS Distortion Viewer を参考にすることで、コンポーネントに影響するディストーションを回避するための JavaScript コードの変更方法等を確認することができます。

LWS Distortion Viewer も、コンポーネントライブラリのナビゲーションバーから使用できます。
このツールへの直接リンクは、https://developer.salesforce.com/docs/component-library/tools/lws-distortion-viewer です。

図3. LWS Distortion Viewer 画面

Lightning Web Security Console を利用する際の注意点

Lightning Web Security Console では、Lightning Web セキュリティを適応した環境でコードを実行することできるため、コンポーネントの JavaScript を開発しながら、すばやく影響チェックを行うことができます。
ただし、組織の完全な実行環境を作成することはできないため、本番環境でコンポーネントを使用する前に Sandbox 組織内で機能テストを実施する必要は依然としてあります。
実際の Salesforce 環境で Lightning Web セキュリティを有効化する際は、Sandbox 組織での動作確認やテストを忘れずに実施しましょう。
33 件
     
  • banner
  • banner

関連する記事