セキュリティ保護された ThingWorx ウィジェットの作成
カスタマイズされたウィジェットを作成する場合、セキュリティ保護されたウィジェットを作成してください。クロスサイトスクリプティング (XSS) およびクロスサイトリクエストフォージェリ (CSRF) の脆弱性を考慮しなければなりません。詳細については、
CSRF 対策のためのリクエストメソッドの更新とコンテンツタイプのフィルタを参照してください。
以降のセクションには、セキュリティ保護されたウィジェットを作成する際の最良事例が示されています。
ウィジェット内の HTML 出力値にエンコーディングを使用
ウィジェットを使用してユーザーインタフェースに値を表示する場合、HTML エンコーディングを使用することをお勧めします。以下のサンプルコードを参照してください。
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Text') {
var labelText = Encoder.htmlEncode(updatePropertyInfo.SinglePropertyValue);
thisWidget.setProperty('Text', labelText);
showLabelText(thisWidget.getProperty('Text'));
}
}
この例では、
• ウィジェットプロパティにバインドされている値が変化するたびに、関数 updatePropery() が呼び出されます。
• エンコーダライブラリを使用して、ウィジェットからの値が HTML エンコードされます。
• エンコーディングの後、Get メソッドおよび Set メソッドを使用してこの新規の値にアクセスします。
• この手順により、Get メソッドはユーザーインタフェースに返される値に対して追加のサニタイズを実行します。
ウィジェット内の HTML 出力値にデコードおよび jQuery を使用
ウィジェットを使用してユーザーインタフェースに値を表示し、HTML エンコーディングを使用して値をエンコードしている場合、HTML デコードを使用して、エンコードされた値を元の値に変換します。以下のサンプルコードを参照してください。
function showLabelText(labelText) {
labelText = Encoder.htmlDecode(labelText);
var spanText = thisWidget.jqElement.find('.label-text');
spanText.text(labelText);
}
この例では、
• 関数 showLabelText を使用して、ウィジェットの DOM エレメントを取得し、値を更新しています。
• エンコーダライブラリを使用して値をデコードします。
• DOM エレメントに対して text() メソッドを jQuery とともに使用して値を表示します。このメソッドには、XSS の脆弱性からアプリケーションを保護するエスケープ関数が組み込まれています。
JavaServer Pages (JSP) 内の HTML 出力値にエンコーディングを使用
JSP を使用してユーザーインタフェースに値を表示する場合、HTML エンコーディングを使用することをお勧めします。OWASP の ESAPI ユーティリティを使用することで、コンテキストに基づいてエンコーディングを処理できます。以下のサンプルコードを参照してください。
この例では、
• ユーザーは ThingWorx に独自のログインページを作成できます。
• ログイン画面では以下のフィールドにユーザー入力が必要です。
◦ orgName
◦ loginPrompt
• これらのフィールド内のデータは信頼されていないデータです。ユーザーがこれらのフィールドに悪意のある文字を入力するという潜在的な脅威があります。したがって、ESAPI ユーティリティにこのデータを通すことで HTML エンコーディングする必要があります。
カスタムユーザーインタフェースのセキュリティ保護
拡張機能を開発することで独自のカスタムユーザーインタフェースを構築することも、ThingWorx REST API を使用する独自のホストされた Web アプリケーションを持つこともできます。これらのシナリオでは、データがブラウザに表示される前にサニタイズおよびエンコーディングされるようにしなければなりません。
実装するフレームワークについて理解し、その環境において XSS の脆弱性からアプリケーションを保護するための最良事例を使用するようにします。
以下の例では、AngularJS アプリケーションは拡張機能としてインポートされたテンプレートを使用しています。ThingWorx ユーティリティを使用してこのワークフローを構築できます。
この例では、
• node.label は信頼されていないユーザー入力です。これは任意の文字列です。ユーザーはワークフローノードのラベル名を入力します。
• AngularJS アプリケーションのテンプレート内で、信頼されていない入力を二重波括弧 {{}} で囲んだ場合 (例: {{node.label}})、文字列補間が強制的に行われます。値は文字列として扱われ、スクリプトのコンテキストで実行されません。
HTML レスポンス
PTC はその HTML レスポンスを、ESAPI ユーティリティを介して出力をフィルタする共通クラスで文書化しています。
public void writeTableCell(String value, String id, String sClass, String sStyle) throws Exception {
startTableCell(id, sClass, sStyle);
writeValue(value);
endTableCell();
}
public void writeValue(String value) throws Exception {
write(ESAPIUtilities.getEncoder().encodeForHTML(value));
}