PolymerにWP-APIで取得したHTMLコンテンツを表示させる覚書
WP-APIのJSONはHTMLタグがエンコードされた状態になっています。 そのためデコードしないとHTMLタグとして認識されず、タグがそのまま出てくる状態となります。 こんな感じ ということでPolymerで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]
HTMLタグが反映されました。
セキリュティに注意
HTMLタグがデコードされているのはXSS対策なのですが、デコードさせているのでXSSリスクが存在することになります。
html-echoする項目がWordPress側でサニタイズされているか、それともXSSリスクのない項目かどうかをしっかり確認してから利用する事をお勧めします。