EC-CUBEの商品説明やフリーエリアではHTMLが入力可能ですが、YouTube動画やGoogleマップの埋め込みコードを入れても、HTML Purifierのエスケープ処理によって除去されてしまいます。
商品説明内にYouTube動画を入れたいとか、フリーエリアでGoogleマップを表示させたいといった時のために、埋め込みコードを設置できるようにするための方法をご紹介いたします。
EC-CUBE4の商品説明やフリーエリア内にYouTube動画とGoogleマップの埋め込みコードを入れられるようにする方法
※検証環境はEC-CUBE4系です。実際に試したのは4.2.3ですが、4.0や4.1でも手順は同じです。
以下の内容で、exercise_html_purifier.yamlというファイルを作成します。
exercise_html_purifier:
html_profiles:
default:
config:
HTML.SafeIframe: true
URI.SafeIframeRegexp: '''^https://(www.youtube.com/embed|www.google.com/maps/embed)'''exercise_html_purifier.yamlを「/app/config/eccube/packages/」配下にアップします。
※すでにexercise_html_purifier.yamlが存在している場合は、既存ファイルを編集してください。デフォルトでは存在しません。
EC-CUBE管理画面の[コンテンツ管理] – [キャッシュ管理]でキャッシュをクリアします。
ここまでできたら、YouTube動画かGoogleマップの埋め込みコードを商品説明やフリーエリアに入れてみてください。除去されずに表示できるようになっているかと思います。
あとがき
商品ページにYouTube動画を入れられるようになると便利ですね。
「www.youtube.com/embed|www.google.com/maps/embed」の部分を編集すれば、他の埋め込みiframeにも対応可能です。