web-dev-qa-db-fra.com

Tentative de rendu iframe: ancestor viole la directive de stratégie de sécurité du contenu suivante: "frame-ancestors 'none'"

Je voudrais rendre un iframe avec la source étant Github comme ceci:

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

Voici l'erreur que j'obtiens dans la console: 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'".

Je cherchais comment spécifier mon Content Security Policy dans mon Node serveur, pour spécifier qu'il doit accepter tous les iframes de github

J'ai donc installé csp-casque et ajouté ceci à mon code de serveur:

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
}))

Mais toujours la même erreur ..

J'ai essayé de regarder le documents officiels et le guide des roches HTML5

Je ne sais pas si je suis très proche ou si j'adopte une approche complètement fausse.

Mise à jour

J'ai également essayé de définir le CSP via la balise meta.

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

que j'ai reçu cette erreur:

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

Comme le souligne oreoshake, le problème ici n'est pas votre CSP, mais le CSP sur GitHub. C'est GitHub qui vous empêche de les encadrer, vous ne pouvez donc rien faire avec votre CSP pour résoudre ce problème.

9
Scott Helme

Le frame-ancestors value agit sur la source de l'iframe et non sur le document qui l'encadre. La définition de CSP sur votre page n'aura aucun effet sur le cadrage. Penser à frame-ancestors comme X-Frame-Options sur les stéroïdes: il restreint ce qui est autorisé à encadrer le contenu. Gist ne permet pas intentionnellement de cadrer directement les gist mais fournit plutôt un moyen d'incorporer un Gist.

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

enter image description here

6
oreoshake