質問: ### 前提・実現したいこと ワードプレスで新サイトを作っているのですがInstagramのembed埋め込みコード(第三者の投稿)をテキストモードで貼り付けると個別ページの表示は問題ないのにデベロッパー画面で下記のセキュリティエラーが1つだけ出ています。 Twitterのリンク貼り付けでも同じエラーが出ます。 不思議なことに各サムネイル(Instagram、Twitter)の上にマウスが来ると同じエラー表示が1つ増え、上下にスクロールさせると何故か6個に増えます。 その後、サムネイルの上でリロードするとエラー表示は6個のままです。 しかしサムネイル(Instagram、Twitter)を通過してリロードするとエラー表示が全部消えます。 しかしそのままスクロールボタンを押し、トップへ戻るとエラー表示が6個に増え、リロードすると1個に減ります。 サムネイルのないページではエラー表示はありません。 埋め込みコードを削除するとエラーも消えます。 Instagramのリンクをビジュアルモードで貼り付けても同じです。 リンクを削除するとエラーも消えます。 ちなみにWPの管理画面では枠のみの表示でInstagramの画像は非表示になります。 Instagram APIには未登録です。 embedの表示やサイト全体の表示、アイキャッチなどに問題はないのですが、エラー表示を消す方法が検索しても見つかりません。対処法を教えて下さい。 よろしくお願いします。 ### 発生している問題・エラーメッセージ ``` [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'". ``` ↑これが場所により増えたり減ったりします。 ### 該当のソースコード ``` ソースコード ``` 申し訳ありませんが商業利用の新サイトなので公開できません。 ### 試したこと プラグインの問題かと思い、1つずつ外したり付けたりして確認しましたが治りません。 ### 補足情報(FW/ツールのバージョンなど) WordPressバージョン 4.9.8 jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1 使っているテーマ Cocoon最新版 導入済みのプラグイン Akismet Anti-Spam (アンチスパム) Broken Link Checker Category Order and Taxonomy Terms Order Celtispack Contact Form 7 Remove Category URL Search & Filter Shortcodes Ultimate Simple Tags SiteGuard WP Plugin TinyMCE Advanced Widget Options
回答: エラーメッセージの通り、iframe 内のサイトが、コンテンツセキュリティポリシーで、`self` を設定しているためです。 コンテンツセキュリティポリシー (CSP) 参照。 エラーを解決する(エラーメッセージを消す)方法は...ありません。 (正確には、コンテンツ提供者( 今回は、Instagram や Twitter )が、コンテンツセキュリティポリシーを変更しない限り、ユーザー側でできることはありません。) ちなみに WordPress 等は一切関係なくて、 ``` ``` だけでも同じエラーは発生します。