ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。
フラグメント設定を使用する際のベストプラクティス
独自の 構成を使用してサイトのページ フラグメントを作成する場合、HTML プレゼンテーションでそれらを安全かつ効果的に使用するのはユーザーの責任です。 フラグメントをより効果的かつ堅牢にするために使用できるテクニックをいくつか紹介します。
構成テキスト値のエスケープ
悪意のあるコードが テキスト フィールド構成に挿入され、他のフラグメント ユーザーに大混乱を引き起こす可能性があります。 クロスサイト スクリプティング (XSS) 攻撃を防ぐために、フラグメント テキスト値をエスケープする必要があります。
一般的なケースでは、HTML escape()メソッドを使用できます。 詳細については、 HtmlUtil クラスを参照してください。
<div class="fragment_38816">
"${htmlUtil.escape(configuration.text)}"
</div>
属性の設定やHTMLの子要素の追加など、JavaScript攻撃を防ぐには、Liferay.Util.escapeHTML() 関数を使用します。
function (fragmentElement, configuration) {
const escapedValue = Liferay.Util.escapeHTML(configuration.text)
}
繰り返しのHTML要素にはリストを使用する
FreeMarker リストを使用して、フラグメントに同じ HTML 要素を繰り返し記述することを回避します。 実装した構成オプションの値を使用して、リストのロジックを実装できます。
たとえば、構成で定義された行 ( この選択構成 の例など) を反復処理し、次の HTML を使用して指定した行数を一覧表示できます。
<div class="fragment_1">
[#list 1..configuration.numberOfLines as index]
<li>Line number: ${index}</li>
[/#list]
</div>
コレクション セレクター構成を実装している場合は、次の例のように、構成されたコレクション内のすべてのタイトルを一覧表示することもできます。
<div class="fragment_310">
<h1>
List of Items:
</h1>
<ul>
[#if collectionObjectList??]
[#list collectionObjectList as item]
<li>${item.title}</li>
[/#list]
[/#if]
</ul>
</div>
詳細については、 FreeMarker の公式ドキュメント を参照してください。