PolymerにWP-APIで取得したHTMLコンテンツを表示させる覚書

WP-APIのJSONはHTMLタグがエンコードされた状態になっています。

そのためデコードしないとHTMLタグとして認識されず、タグがそのまま出てくる状態となります。

こんな感じ

ということでPolymerでHTMLタグをデコードする方法を調べてみました。

Polymer-Elementsを作成する

考えることは皆同じ様子で、Stack Overflowにコードサンプルがありました。

javascript – How to inject HTML into a template with polymer – Stack Overflow

html-echo.html

[html]
<polymer-element name="html-echo" attributes="html">
<script>
Polymer(‘html-echo’, {
htmlChanged: function() {
// WARNING: potential XSS vulnerability if `html` comes from an untrusted source
this.innerHTML = this.html;
}
});
</script>
</polymer-element>
[/html]

使用方法

先ほど作ったhtml-echo.htmlをインポートして、html属性にWP-APIのデータを渡せばOKです。
[html]
<!–必要なファイルをインポート–>
<link rel="import" href="core-ajax.html">
<link rel="import" href="html-echo.html">

<!–WP-APIからデータを取得–>
<core-ajax url="wp-json/posts" handleAs="json" auto response="{{posts}}"></core-ajax>

<!–ループ–>
<template repeat="{{post in posts}}">
<html-echo html="{{json.content}}"></html-echo>
</template>
[/html]

WP-kyoto with Polymer

HTMLタグが反映されました。

セキリュティに注意

HTMLタグがデコードされているのはXSS対策なのですが、デコードさせているのでXSSリスクが存在することになります。

html-echoする項目がWordPress側でサニタイズされているか、それともXSSリスクのない項目かどうかをしっかり確認してから利用する事をお勧めします。