web-dev-qa-db-ja.com

iframeをレンダリングしようとする：先祖が次のコンテンツセキュリティポリシーディレクティブに違反しています： "frame-ancestors 'none'"

ソースをGithubにしたiframeを次のようにレンダリングしたいと思います。

<iframe src="https://Gist.github.com/user45445/9bf8d568e3350146ba302d7d67ad576f"> </iframe>

これは、コンソールに表示されるエラーです：Refused to display 'https://Gist.github.com/fresh5447/9bf8d568e3350146ba302d7d67ad576f' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

NodeサーバーでContent Security Policyを指定し、githubからのiframeを受け入れるように指定する方法を調査していました

そこで、 csp-helmet をインストールし、これをサーバーコードに追加しました。

var csp = require('helmet-csp')

app.use(csp({
  // Specify directives as normal.
  directives: {
    frameAncestors: ['*.github.com'],  //I thought these two did the same, so I tried them both.
    childSrc: ['*.github.com']
  },

  // Set to true if you only want browsers to report errors, not block them.
  // You may also set this to a function(req, res) in order to decide dynamically
  // whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
  reportOnly: false,

  // Set to true if you want to blindly set all headers: Content-Security-Policy,
  // X-WebKit-CSP, and X-Content-Security-Policy.
  setAllHeaders: false,

  // Set to true if you want to disable CSP on Android where it can be buggy.
  disableAndroid: false,

  // Set to false if you want to completely disable any user-agent sniffing.
  // This may make the headers less compatible but it will be much faster.
  // This defaults to `true`.
  browserSniff: true
}))

しかし、まだ同じエラー..

公式ドキュメント と HTML5 rocksガイド を見てみました

私が非常に近いのか、まったく間違ったアプローチを取っているのかはわかりません。

更新

また、metaタグを介してCSPを設定しようとしました。

  <meta http-equiv="Content-Security-Policy" content="child-src https://Gist.github.com; frame-ancestors https://Gist.github.com;">

このエラーを受け取ったより：

Content Security Policies delivered via a <meta> element may not contain the frame-ancestors directive.
node.jsiframeherokucontent-security-policy
11
fresh5447

Oreoshakeが指摘しているように、ここでの問題はあなたのCSPではなく、GitHub上のCSPです。 GitHubがフレームの作成を妨げているため、CSPでこれを解決することはできません。

9
Scott Helme

frame-ancestors値は、iframeのsourceに作用します。ページにCSPを設定しても、フレーミングには影響しません。のことを考える frame-ancestors お気に入り X-Frame-Optionsステロイド：コンテンツのフレーム化を許可するものを制限します。 Gistは意図的にGistを直接フレーミングすることを許可しませんが、Gistを埋め込む方法を提供します。

frame-ancestors 'none' == X-Frame-Options: DENY

enter image description here

6
oreoshake