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

WP-APIのJSONはHTMLタグがエンコードされた状態になっています。 そのためデコードしないとHTMLタグとして認識されず、タグがそのまま出てくる状態となります。 こんな感じ ということでPolymerでHTMLタ […]

広告ここから
広告ここまで

目次

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

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

    Cursor_と_WP-kyoto_with_Polymer
    こんな感じ

    ということで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
    WP-kyoto with Polymer

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

    セキリュティに注意

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

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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark