Discover Top Posts Tagged with #templateengine

Smarty Development

Smarty, a PHP-based web template system, is designed to enhance the separation of concerns within web development. It simplifies the process of compartmentalization, allowing the front-end of a web page to evolve independently of its back-end. This strategic approach aims to reduce costs and streamline the efforts required for software maintenance.

#Smarty #SmartyDevelopment #PHP #WebDevelopment #TemplateEngine #WebDesign #OpenSource #WebApp

PTE, PHP Programming . . #php #phpdeveloper #phpdevelopment #developer #programmer #programming #tabriz2018 #tabriz #tabrizdevelopers #tebriz #təbriz #tabrizim #coding #html #phphtmlcss #phptemplate #phptemplateengine #templateengine #phpfox #phpfoxclub #amirbassir #amirchrist #onenet (at Tabriz2018)

Handlebars.java を使う

Handlebars.java は Handlebars の Java 実装です。

ここでは Template Inheritance 機能とデフォルト HTML エスケープの動きを中心に見てゆきます。

セットアップ方法 Handlebars.java のページが詳しいです。Spring MVC の ViewResolver も提供されています。検証に使ったソースコードも参考になると思います。

Template Inheritance

Handlebars.java では Template Inheritance 機能が使えます。親テンプレートで定義された複数のブロックを子テンプレートから上書くことができ、多くのテンプレートエンジンが単一のブロックのみの上書きをサポートしているのに対して、より柔軟なテンプレートを書くことができます。

親レイアウトとなる basic.hbs を用意します。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../../stylesheets/bootstrap.min.css"> <title>{{#block "title"}}DEFAULT TITLE{{/block}}</title> </head> <body> {{> layout/navibar}} <div class="container"> {{#block "content"}}DEFAULT CONTENT{{/block}} </div> {{> layout/footer}} <script src="../../../javascripts/jquery-2.0.0.min.js"></script> {{#block "script"}}{{/block}} </body> </html>

3 つのブロックが定義されてて、これらを子テンプレートで上書きすることができます。

{{#block "title"}}DEFAULT TITLE{{/block}}

{{#block "content"}}DEFAULT CONTENT{{/block}}

次に、子テンプレート main.hbs を用意します。

{{#partial "title"}}andlebars{{/partial}} {{#partial "content"}} <article> {{#with wikiPage}} <h1>{{title}}</h1> <div>{{body}}</div> {{/#with}} </article> {{/partial}} {{#partial "script"}} <script> $('...').click(function() { ... }); </script> {{/partial}} {{> layout/basic}}

title, content, script を上書きしています。複数の変数を上書きできるのは多くのテンプレートエンジンでサポートされていますが、Template Inheritance ではこの例のように HTML のブロックで上書きできるので大変便利です。

デフォルト HTML エスケープ

Handlebars では何も設定しなくてもデフォルトで HTML エスケープされます。

前回までに使っていたのと同じモデルを使って動作を検証してみます。

WikiPage wikiPage = new WikiPage( "<strong>Tokyo</strong>", new WikiText("<strong>Tokyo</strong> is the capital of Japan."));

まず title の出力です。

エスケープできていますね。

続いて WikiPage の出力。

WikiPage#toString() の結果をエスケープできています。現行バージョンの 0.12.0 は JSP と同様にエスケープされない問題があるのですが修正されたので次バージョンからは問題がありません。上記は 0.13.0-SNAPSHOT の結果です。JSP のは仕様だけど。

今度は明示的にエスケープを回避してみます。{{{...}}} を使うとエスケープなしで出力できます。{{..}} と間違えてしまいそう...。デリミタを変更することができるのでたとえば erb スタイルにすれば間違えにくくなるかもしれません。

{{=<% %>=}} escape: <% title %> noescape: <%{ title }%> <%={{ }}=%>

いずれにしてもエスケープしていない箇所を検出して警告する処理がビルドやデプロイプロセスにあった方が良さそうです。

クラス定義でエスケープを回避する機能として SafeString が用意されています。このクラスにラップした文字列はエスケープされません。

モデルクラスでこのように SafeString を返しておくとエスケープされません。

public Handlebars.SafeString getHandlebarsSafeString() { return new Handlebars.SafeString(getSafeHtmlValue()); }

これはオリジナルの JavaScript 版にならった挙動ですがインターフェースかアノテーションで指定できた方が便利かもしれませんね。

まとめ

Handlebars.java により流行の Mustache/Handlebars を Java でも使えるようになります。Template Inheritance が使え、デフォルトで HTML エスケープされ、機能的には十分に実践で使えるレベルにあるでしょう。

検証に使ったソースコードは github にあります

こちらのサイトで動作を確認できます (非常に遅いです)

#java #handlebars #templateengine

Scalate を Java から使う

Scalate は Scala で書かれたテンプレートエンジン。Java から利用することも可能です。

Spring MVC から利用する

Spring MVC 用の ViewResolver が提供されています。依存ライブラリを pom.xml に書きます。

<dependency> <groupId>org.scala-lang</groupId> <artifactId>scala-compiler</artifactId> <version>2.10.1</version> </dependency> <dependency> <groupId>org.fusesource.scalate</groupId> <artifactId>scalate-spring-mvc_2.10</artifactId> <version>1.6.1</version> </dependency>

次に ViewResolver を設定します。ここでは SSP を使うようにしました。

@Configuration public class ScalateConfig { @Bean public ViewResolver scalateViewResolver() { ScalateViewResolver r = new ScalateViewResolver(); r.setPrefix("/WEB-INF/scalate/"); r.setSuffix(".ssp"); r.setContentType("text/html; charset=utf-8"); return r; } }

これで準備 OK。

テンプレートファイル

Scalate ではレイアウト機能がありますのでそれを使ってみます。

親レイアウトとなる basic.ssp を用意。

<%@ val title: String %> <%@ val body: String %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../../stylesheets/main.css"> <title>${title}</title> </head> <body> ${include("../layout/navibar.ssp")} <div class="container"> ${unescape(body)} </div> ${include("../layout/footer.ssp")} <script src="../../../javascripts/jquery-2.0.0.min.js"></script> ${unescape(script)} </body> </html>

コンテンツ側から basic.ssp を指定すると ${unescape(body)} のところに差し込まれます。

<%@ val wikiPage: net.physalis.javaviews.domain.model.WikiPage %> <% attributes("layout") = "/WEB-INF/scalate/layout/basic.ssp" %> <% attributes("title") = "Scalate" %> <article> <h1>${wikiPage.getTitle}</h1> </article>

デフォルト HTML エスケープ

Scalate では何も設定しなくてもデフォルトで HTML エスケープされます。

前回までに使っていたのと同じモデルを使って動作を検証してみます。

WikiPage wikiPage = new WikiPage( "<strong>Tokyo</strong>", new WikiText("<strong>Tokyo</strong> is the capital of Japan."));

まず title の出力です。

エスケープできていますね。 Java のクラスを参照する場合、プロパティ名ではなく ${wikiPage.getTitle} のように存在するメソッドを指定する必要があるのがちょっと微妙です。

続いて WikiPage の出力。

WikiPage#toString() の結果をエスケープできています。

今度は明示的にエスケープを回避してみます。${unescape(...)} を使うとエスケープなしで出力できます。

クラス定義によりエスケープをスキップする方法はわかりませんでした。

まとめ

Scalate は Java からも使え、Spring MVC 用のクラスが提供されていて簡単に組み込むことができます。レイアウト機能を標準装備、型安全で、SSP だけでなく Jade や Mustache などいろんなテンプレートが使えるなど魅力的な要素がたくさんありますね。

設定なしで HTML エスケープされ、${unescape(...)} によりエスケープなしで出力することができます。getXXX のようにプロパティ名ではなくメソッド名を使わないといけないのは微妙ですが許容範囲かな。

Java から Scala を呼び出すということで、別のバージョンの scala-compiler.jar を要求するライブラリがあったらどうしようとか、何か問題があった時のために Scala のコードを読めた方が安心とか、このへんが許容できるプロジェクトでかつ Scala じゃなくて Java を使わないといけないプロジェクト (どんなの?) なら使ってもおもしろいかも。

検証に使ったソースコードは github にあります

こちらのサイトで動作を確認できます (非常に遅いです)

#java #scala #scalate #templateengine

FreeMarker でデフォルト HTML エスケープ

デフォルト HTML エスケープシリーズ。今回は FreeMarker。

デフォルトエスケープの設定

FreeMarker では <#escape> タグで囲った部分を自動でエスケープすることができます。こんな風にファイルの最初と最後にセットしてやればそのファイルではデフォルトでエスケープされます。

<#escape x as x?html> <!DOCTYPE html> <html> ... ${foo.bar} ... </html> </#escape>

いちいち <#escape> で囲むのは面倒ですので TemplateLoader でテンプレートをロードするときに自動でつけるようにします。SpringMVC と組み合わせる場合は以下のようになります。(完全なソースコードはこちら)

FreeMarkerConfigurer c = new FreeMarkerConfigurer(); c.setPreTemplateLoaders( new SpringTemplateLoader( new ServletContextResourceLoader(servletContext), "/WEB-INF/freemarker/") { @Override public Reader getReader(Object templateSource, String encoding) throws IOException { String s = CharStreams.toString( super.getReader(templateSource, encoding)); return new StringReader( "<#escape x as x?html>" + s + "#escape>"); } }); return c;

ちょっと無理矢理な気もしますがこれで <#escape> を付け忘れてしまう心配はありません。

動作検証

JSP, Velocity の時と同じモデルを使って動作を検証します。

WikiPage wikiPage = new WikiPage( "<strong>Tokyo</strong>", new WikiText("<strong>Tokyo</strong> is the capital of Japan."));

まず title の出力です。

エスケープできていますね。続いて WikiPage の出力。

WikiPage#toString() の結果をエスケープできています。

今度は明示的にエスケープを回避してみます。<#escape> 内で <#noescape> を使うとエスケープなしで出力できます。

JSP や Velocity のようにクラス定義によりエスケープをスキップする方法はわかりませんでした。

まとめ

<#escape> を自動的にファイルの前後に挿入することによりデフォルト HTML エスケープを実現できました。クラス定義でエスケープを回避できればさらによかったのですがエスケープ漏れはないので優秀ですね。

検証に使ったソースコードは github にあります

こちらのサイトで動作を確認できます (非常に遅いです)

#java #freemarker #templateengine

Velocity でデフォルト HTML エスケープ

前回は JSP でのデフォルト HTML エスケープを検証しました。今回は Velocity を見てみます。

デフォルトエスケープの設定

Velocity では ReferenceInsertionEventHandler を使ってデフォルトでの HTML エスケープを実現できます。このクラスは名前の通り参照がテンプレートに挿入される時にフックして値を操作することができます。

コード例です。完全なソースコードはこちらを参照してください。

public class MyRefrenceInsertionEventHandler implements ReferenceInsertionEventHandler { @Override public Object referenceInsert(String reference, Object value) { if (value == null) { return null; } else if (reference.endsWith("NoEscape") || reference.endsWith("NoEscape}")) { return value; } else if (value instanceof SafeHtml) { return ((SafeHtml) value).getSafeHtmlValue(); } else { return escape(value.toString()); } } }

ここでの処理は以下の通りです。

参照名が NoEscape で終わっていたらエスケープしない

値が SafeHtml を実装していたらエスケープしない

それ以外の場合はエスケープする

JSP の ELResolver が EL の一部を受け取るのと違って、ReferenceInsertionEventHandler では完全な参照名を受け取れるので String 以外をエスケープできないなんてことはありません。

動作検証

JSP の時と同じモデルを使って動作を検証します。

WikiPage wikiPage = new WikiPage( "<strong>Tokyo</strong>", new WikiText("<strong>Tokyo</strong> is the capital of Japan."));

まず title の出力です。

エスケープできていますね。続いて WikiPage の出力。

WikiPage#toString() の結果をエスケープできています。前回の JSP はエスケープできていませんでした。

今度は明示的にエスケープを回避してみます。

ReferenceInsertionEventHandler で書いたように NoEscape で終わる参照名の場合はエスケープしません。

こちらも SafeHtml を実装している場合はエスケープしません。

まとめ

ReferenceInsertionEventHandler を使ってデフォルトでの HTML エスケープ、参照名とクラス定義による明示的なエスケープの回避ができました。完璧ですね。

検証に使ったソースコードは github にあります

こちらのサイトで動作を確認できます (非常に遅いです)

#java #velocity #templateengine

JSP でデフォルト HTML エスケープ

JSP で HTML エスケープするには <c:out> や fn:escapeXml を使うわけですが、いちいち書くの面倒だし付け忘れるもありがちです。付け忘れがないことを確認するにはコードを全部見たり、静的解析ツールを使ったり、サイトに対して XSS 検出ツールを使ったり、とても大変です。

そこで、デフォルトでエスケープする方法を考えてみます。具体的には次の機能を実現します。

デフォルトでエスケープする

<noescape> タグで囲った部分はエスケープしない

SafeHtml インターフェースを実装したクラスはエスケープしない

これらは ELResolver を使うとある程度実現できます。この後その方法と限界を見てゆきます。

ELResolver の実装

ELResolver では String のエスケープを行います。ソースコード全文は長いのでこちらを参照してください。

下記コードにより ELResolver チェインにより解決した値が String の場合はエスケープします。SafeHtml の場合はエスケープしません。

Object value = context.getELResolver().getValue(context, base, property); if (value instanceof String) { return escape((String) value); } else if (value instanceof SafeHtml) { String html = ((SafeHtml) value).getSafeHtmlValue(); context.setPropertyResolved(true); return html; } else { return value; }

また <noescape> タグをサポートするために request に NO_ESCAPE_KEY 属性があると処理をスキップします。

Boolean noescape = (Boolean) jspContext.findAttribute(NO_ESCAPE_KEY); if ((noescape != null && noescape)) { return null; }

noescape タグのソースコードは下記ようなものです。noescape.tag

<%@ tag pageEncoding="utf-8" trimDirectiveWhitespaces="true" %> <% request.setAttribute(EscapeHtmlElResolver.NO_ESCAPE_KEY, true); %> <jsp:doBody/> <% request.removeAttribute(EscapeHtmlElResolver.NO_ESCAPE_KEY); %>

検証用モデル

続いて準備として検証に使うモデルを用意します。Wiki ページを表す WikiPage とそのページ本文である WikiText です。

public class WikiPage { public WikiPage(String title, WikiText wikiText) { this.title = title; this.wikiText = wikiText; } public String getTitle() { return title; } public WikiText getWikiText() { return wikiText; } @Override public String toString() { return "WikiPage(" + title + ", " + wikiText + ")"; } private final String title; private final WikiText wikiText; }

WikiPage は String 型の title プロパティと WikiText 型の wikiText プロパティを持ちます。ログ出力やデバッグ時に便利なように toString() も実装してあります。

public class WikiText implements SafeHtml { public WikiText(String value) { this.value = value; } public String getValue() { return value; } @Override public String getSafeHtmlValue() { eturn value; } private final String value; }

WikiText は <script> など危険なタグを取り除いた HTML を持ち、このままレンダリングすることが想定されています。インターフェース SafeHtml とそのメソッド getSafeHtmlValue() を実装することで表現しています。

public interface SafeHtml { String getSafeHtmlValue(); }

動作検証

プロパティに HTML タグを含む次のモデルを使って動作を検証します。

WikiPage wikiPage = new WikiPage( "<strong>Tokyo</strong>", new WikiText("<strong>Tokyo</strong> is the capital of Japan."));

まず title の出力。

デフォルトエスケープできた! でもこれには抜け道があって、String 以外のクラスのレンダリングではエスケープされません。

太字になっている部分は <strong> によるものです。WikiPage#toString() がエスケープなしで出力されていますね。HTML が含まれるクラスの toString を意図的に利用することは少ないと思いますがうっかりやってしまうかもしれません。toString を使っていないことの調査は大変そうです。

noescape タグでのエスケープスキップはちゃんと動きます。