【WP初心者 様】インスタグラムの埋め込みでエラーが表示される

インスタグラムの埋め込みコードを貼り付けると Refused to display ～ Security Policy directive といったエラーが出るというご相談を頂きました。

インスタグラムの埋め込みでエラーが表示される場合の対処方法（WordPress）をいくつかご紹介します。

[Report Only] Refused to display というエラーが多発します。

どうも初めまして。Wp初心者の者ですがインスタグラムの埋め込みコードを貼り付けると
[Report Only] Refused to display ” in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self'”.
↑のようなエラー表示がデベロッパー画面で多発してます。
個別には
Report Only] Refused to display ‘コンテンツURL’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self'”.
という感じで埋め込みコード3つで計9つ出てきます。
埋め込みコードを削除すると消えます。

プラグインの相性かと思い、１つずつ確認しましたが関係がないようです。

どうやらContent Security Policyに関することのようですが対処法がわかりません。
ページのURLは商業利用のため、申し訳ございませんがお伝えできません。

どうかご指南よろしくお願い致します。

回答：インスタグラムの方の仕様確認も行いましょう

WP初心者さま
ご相談ありがとうございます。

僕がインスタにそれほど詳しくなく、画像やサイトの方を拝見できないと何とも言えない部分もありますが、最初に思ったのは「インスタ側の問題かな？」というものです。

・アカウントの設定になにか問題がある
・アカウントが有効でない
・埋め込みを禁止している（そういう設定があればですが）とか、コードが古いとか
などです。

Security Policy といったメッセージからそういった内容を考えました。

WordPressでコードの貼り付け時に注意すること

エラーのメッセージから、こちらは該当しないかもしれませんが、一応ご確認下さい。

基本的にコードを張り付ける時は「テキスト」モードで行います。

「ビジュアル」モードと「テキスト」モードを切り替えると貼り付けた埋め込みコードが自動で変換・整形されることがあります。

HTMLの属性（コードの一部）そのものが消されたりすることが起こり得ます。

そして、普段ビジュアルエディタをお使いであれば、埋め込みがあるページの編集画面を開く際にこの整形が行われます。（最後に使用したエディタモードで編集画面が開かれる）

こういった場合は、別のページの編集画面を開いて、ビジュアルからテキストモードに切り替えて、当該の埋め込みコードがあるページの編集画面を開かなくてはいけません。

インスタグラムのプラグインを利用してみる

埋め込みコードを直接貼っているようですが、インスタグラムのプラグインなどもあるので、そちらを利用してみるという手もあります。
インスタグラムのfeedを埋め込むWordPress プラグイン Instagram Feed 使い方やカスタマイズ、数字ID（User ID）の調べ方など

他には、
別サイトがあれば別サイトにも貼り付けてみる（サイトの問題か否か）
別のアカウントの埋め込みコードを試してみる（埋め込みコードorアカウント の問題か否か）
といった形で、色々と組み合わせれば何が悪いのかを特定していけるはずです。

参考にして頂ければ幸いです。