oo

フラグメント・コンフィギュレーションを使用する際のベストプラクティス

独自の 構成でサイトのページフラグメントを作成する場合、それらを安全かつ効果的に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要素を繰り返し記述することを避けることができます。 実装した設定オプションの値を使って、リストのロジックを実装することができます。

例えば、設定で定義された行数を反復処理し(この例では select configuration )、この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 公式ドキュメント をご覧ください。

関連トピック

Feature: