JCEエディタ上でIFRAMEを利用したGoogle Mapの埋め込みができない場合

JCEエディタ上でIFRAMEを利用したGoogle Mapの埋め込みができない場合

サイトの記事などにGoogleマップを埋め込む場合、JCEエディタを使った状態では、セキュリティー違反になる為、記事を保存しても自動的に削除されます。このためGoogle Mapが埋め込めない場合が出てきます。

screenshot www.google.com 2023.04.09 11 53 41

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1679.3490857389252!2d130.67901533829283!3d32.6674752360178
86!3m2!1i10!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

例えば上記の様なコードです。これを埋め込んで下記のように表示したいわけですが、デフォルトの設定ではIFAMEタグは許可されていません。

これには理由があります。IFRAMEというタグはぷページから他のサイトを見ることが出来る窓のようなものを作るのものです。よって、そこに悪意のあるサイトを表示させハッキングするるために悪用される事例が出てきました。そこで IFRAME タグは初期値では使えないように成っています。

 このため、同じタグを使う埋め込みができないわけですが、これら IFRAME の使用を許可することで利用出来るようになります。

1.TineMCEの禁則ワードの削除

JECエディタをつかっていないひとは、システム基本の TinyMCE の禁則ワードから削除しておきましょう。JCE エディタも基本は TinyMCE を拡張する形ですので、こちらもやっておいたほうがいいです。

 

 tinymce01

 tinymce02

 tinymce03

 

 2.JCE エディタの設定

引き続きJCEの設定です。こちらはエディタプロファイルから設定します。

 管理画面からJCEエディタのエディタプロファイルを表示します。JCEエディタの場合、ユーザーによって利用できる機能を制限したり、状況によってもそれら機能を制限できますが、初期段階では Default というのがバックエンドのユーザです。それ以外に Front End といってフロントエンドから利用できるものもあります。 

 JCEeditor01

 JCEeditor02

 JCEeditor03

 

 

 JCEeditor04

 

 

 

これら方法で表示できるようになるとおもいますが、あくまでも管理者のみのプロファイルで利用してください。ブログなどの投稿などで一般向けにHTMLエディタを開放してしまうとハッキングなどの危険にさらされることとなりますので開放は自己責任でお願いします。