Surmonter " L'affichage interdit par X-Frame-Options"

j'écris une petite page Web dont le but est de cadrer quelques autres pages, simplement pour les consolider dans une fenêtre de navigateur unique pour la facilité de la visualisation. Quelques-unes des pages que j'essaie d'encadrer interdisent d'être encadré et jeter un "refusé d'afficher document parce que l'affichage interdit par X-Frame-Options."erreur dans le navigateur Chrome. Je comprends qu'il s'agit d'une limitation de sécurité (pour de bonnes raisons), et je n'ai pas accès à la modifier.

Est-il une alternative le framing ou l' méthode de non-cadrage pour afficher des pages à l'intérieur d'une fenêtre unique qui ne seront pas trébuchées par L'en-tête X-Frame-Options?

394
demandé sur abraham 2011-07-12 19:06:19

25 réponses

j'ai eu un problème similaire, où j'ai essayé d'afficher le contenu de notre propre site dans une iframe (comme une boîte de dialogue de type lightbox avec Colorbox ), et où nous avons eu un serveur à l'échelle" X-Frame-Options SAMEORIGIN " en-tête sur le serveur source l'empêchant de charger sur notre serveur de test.

cela ne semble pas être documenté n'importe où, mais si vous pouvez éditer les pages que vous essayez d'iframe (par exemple., ils sont vos propres pages), il suffit d'envoyer un autre L'en-tête X-Frame-Options avec n'importe quelle chaîne de caractères désactive les commandes SAMEORIGIN ou DENY.

par exemple. pour PHP, mettre 

<?php
    header('X-Frame-Options: GOFORIT'); 
?>

en haut de votre page permettra aux navigateurs de combiner les deux, ce qui donne un en-tête de 

X-Frame-Options SAMEORIGIN, GOFORIT

...et permet de charger la page dans un iframe. Cela semble fonctionner lorsque la commande initiale SAMEORIGIN a été définie au niveau du serveur, et que vous souhaitez la modifier page par page.

Tout le meilleur!

197
répondu Sean 2013-11-25 07:16:34

si vous obtenez cette erreur pour une vidéo YouTube, plutôt que d'utiliser l'url complète, utilisez l'url intégrée à partir des options de partage. Il ressemblera à http://www.youtube.com/embed/eCfDxZxTBW4

vous pouvez aussi remplacer watch?v= par embed/ ainsi http://www.youtube.com/watch?v=eCfDxZxTBW4 devient http://www.youtube.com/embed/eCfDxZxTBW4

157
répondu Wil 2016-06-29 12:46:53

si vous obtenez cette erreur en essayant d'intégrer une carte Google dans un iframe , vous devez ajouter &output=embed au lien source.

122
répondu Q Studio 2014-11-12 10:29:03

Vous peut bypass X-Frame-Options dans un <iframe> juste à l'aide de JavaScript côté client et YQL . Voici une preuve de concept: Hacker Nouvelles dans un <iframe> . (Testé dans Chrome & Firefox; si cela ne fonctionne pas, essayez de rafraîchir la page.)

le procédé est le suivant:

  1. Demande un iframe URL de YQL (fonction loadURL ),
  2. Obtenir un HTML des données à partir de YQL (fonction getData ),
  3. Ajouter un <base link> et un <script> liens de chargement dans une iframe en utilisant YQL ainsi,
  4. injecte ce HTML dans un vide <iframe> (fonction loadHTML ).

L'exemple de code JS: 

var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
    url = src;
    var script = document.createElement('script');
    script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
};
var loadHTML = function (html) {
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
    iframe.contentWindow.document.close();
} 
loadURL(iframe.src);
42
répondu niutech 2018-03-26 15:18:35

Ajouter un 

  target='_top'

à mon lien dans l'onglet facebook a corrigé le problème pour moi...

22
répondu Kevin Vella 2012-08-24 11:40:41

si vous obtenez cette erreur en essayant d'intégrer le contenu Vimeo, changez le src de l'iframe,



de: https://vimeo.com/63534746

à: http://player.vimeo.com/video/63534746

20
répondu Eric Corriel 2013-05-31 16:26:34

il y a un plugin pour Chrome, qui supprime cette entrée d'en-tête (pour usage personnel seulement):

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe/reviews

18
répondu 2014-08-07 12:22:36

j'ai eu le même problème quand j'ai essayé embed moodle 2 dans iframe, la solution est Site administration ► Security ► HTTP security et cochez Allow frame embedding

12
répondu Mohammad Ali Akbari 2012-04-16 12:28:53

C'est la solution les gars!! 

FB.Event.subscribe('edge.create', function(response) {
    window.top.location.href = 'url';
});

la seule chose qui a fonctionné pour les applications facebook!

7
répondu Konst 2013-01-21 14:16:36

j'ai essayé presque toutes les suggestions. Cependant, la seule chose qui a vraiment résolu le problème était:

  1. créez un .htaccess dans le même dossier où se trouve votre fichier PHP.

  2. ajouter cette ligne au htaccess:

    Header always unset X-Frame-Options

L'intégration du PHP par une iframe d'un autre domaine devrait fonctionner par la suite.

en plus vous pouvez ajouter au début de votre fichier PHP: 

header('X-Frame-Options: ALLOW');

, ce qui n'était pas nécessaire dans mon cas.

5
répondu Kai Noack 2016-09-02 18:48:57

Il semble que X-Frame-Options Permettent-https://... est déprécié et a été remplacé (et est ignoré) si vous utilisez Content-Security-Policy en-tête à la place.

Voici la référence complète: https://content-security-policy.com /

5
répondu Dr. Aaron Dishno 2017-06-14 12:25:21

j'ai eu le même problème avec mediawiki, c'était parce que le serveur a nié avoir intégré la page dans une iframe pour des raisons de sécurité.

j'ai résolu l'écriture 

$wgEditPageFrameOptions = "SAMEORIGIN";

dans le fichier de configuration php de mediawiki.

J'espère que ça aidera.

4
répondu John White 2013-03-09 23:01:18

Solution pour charger un site Web externe dans une iFrame même difficile l'option x-frame est définie pour nier sur le site Web externe.

si vous voulez charger un autre site web dans une iFrame et que vous obtenez l'erreur Display forbidden by X-Frame-Options” , alors vous pouvez réellement surmonter cela en créant un script mandataire côté serveur.

l'attribut src de l'iFrame pourrait avoir une url ressemblant à ceci: /proxy.php?url=https://www.example.com/page&key=somekey

puis proxy.php ressemblerait à quelque chose comme: 

if (isValidRequest()) {
   echo file_get_contents($_GET['url']);
}

function isValidRequest() {
    return $_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['key']) && 
    $_GET['key'] === 'somekey';
}

cela passe par le bloc, parce que c'est juste une demande GET qui pourrait aussi bien avoir été une visite de page de navigateur ordinaire.

soyez conscient: vous pourriez vouloir améliorer la sécurité dans ce script. Parce que les hackers pourraient commencer à charger dans les pages web via votre script proxy.

4
répondu Floris 2018-03-08 15:47:38

J'utilisais Tomcat 8.0.30, aucune des suggestions n'a fonctionné pour moi. Comme nous cherchons à mettre à jour le X-Frame-Options et à le définir à ALLOW , voici comment j'ai configuré pour autoriser l'intégration si:

  • naviguez vers le répertoire Tomcat conf, éditez le web.fichier xml
  • ajouter le filtre suivant: 
<filter>
            <filter-name>httpHeaderSecurity</filter-name>
            <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
                   <init-param>
                           <param-name>hstsEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingOption</param-name>
                           <param-value>ALLOW-FROM</param-value>
                   </init-param>
            <async-supported>true</async-supported>
       </filter>

       <filter-mapping>
                   <filter-name>httpHeaderSecurity</filter-name>
                   <url-pattern>/*</url-pattern>
                   <dispatcher>REQUEST</dispatcher>
       </filter-mapping>
  • redémarrer Tomcat service
  • accéder aux ressources en utilisant un iFrame.
3
répondu Giri 2016-12-08 16:34:59

La seule question qui a un tas de réponses. Bienvenue au guide que j'aurais aimé avoir quand je m'efforçais de le faire fonctionner à 22 h 30 le jour de la date limite... FB fait des choses bizarres avec canvas apps, et bien, tu as été prévenu. Si vous êtes toujours ici et que vous avez une application Rails qui apparaîtra derrière une toile Facebook, alors vous aurez besoin de:

Gemfile: 

gem "rack-facebook-signed-request", :git => 'git://github.com/cmer/rack-facebook-signed-request.git'

config / facebook.yml 

facebook:
  key: "123123123123"
  secret: "123123123123123123secret12312"

config/application.rb 

config.middleware.use Rack::Facebook::SignedRequest, app_id: "123123123123", secret: "123123123123123123secret12312", inject_facebook: false

config/initializers/omniauth.rb 

OmniAuth.config.logger = Rails.logger
SERVICES = YAML.load(File.open("#{::Rails.root}/config/oauth.yml").read)
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, SERVICES['facebook']['key'], SERVICES['facebook']['secret'], iframe:   true
end

application_controller.rb 

before_filter :add_xframe
def add_xframe
  headers['X-Frame-Options'] = 'GOFORIT'
end

vous avez besoin d'un contrôleur pour appeler à partir des paramètres canvas de Facebook, j'ai utilisé /canvas/ et fait le trajet aller le principal SiteController pour cette application: 


class SiteController < ApplicationController
  def index
    @user = User.new
  end
  def canvas
    redirect_to '/auth/failure' if request.params['error'] == 'access_denied'
    url = params['code'] ? "/auth/facebook?signed_request=#{params['signed_request']}&state=canvas" : "/login"
    redirect_to url
  end
  def login
  end
end

login.HTML.erb 


&lt% content_for :javascript do %>
  var oauth_url = 'https://www.facebook.com/dialog/oauth/';
  oauth_url += '?client_id=471466299609256';
  oauth_url += '&redirect_uri=' + encodeURIComponent('https://apps.facebook.com/wellbeingtracker/');
  oauth_url += '&scope=email,status_update,publish_stream';
console.log(oauth_url);
  top.location.href = oauth_url;
&lt% end %>

Sources

  • je pense que la config provient de l'exemple d'omniauth.
  • le fichier gem (qui est la clé!!!) vient: slideshare choses que j'ai apprises...
  • cette question de pile avait tout l'angle Xframe, donc vous obtiendrez un espace vide, si vous ne mettez pas cet en-tête dans l'application du contrôleur.
  • et mon homme @rafmagana a écrit ce guide heroku , que maintenant vous pouvez adopter pour les rails avec cette réponse et les épaules de géants dans lesquels vous marchez avec.
2
répondu pjammer 2013-08-03 02:12:04

target= '_parent'

en utilisant L'idée de Kevin Vella, j'ai essayé d'ajouter cet attribut pour former des éléments faits par le générateur de bouton de PayPal. Travaillé pour moi afin que Paypal ne s'ouvre pas dans une nouvelle fenêtre de navigateur/onglet.

2
répondu jiminikiz 2014-02-21 18:22:29

FWIW:

nous avions une situation où nous devions tuer notre iFrame quand ce Code" breaker " est apparu. Donc, j'ai utilisé le PHP function get_headers($url); pour vérifier l'URL distante avant de l'afficher dans un iFrame . Pour une meilleure performance, j'ai mis les résultats en cache dans un fichier, donc je n'ai pas fait de connexion HTTP à chaque fois.

2
répondu Zane Claes 2015-04-21 10:35:04

Je ne sais pas si c'est pertinent, mais j'ai construit une solution pour ça. Sur mon site, je voulais afficher un lien dans une fenêtre modale qui contenait une iframe qui charge l'URL.

ce que j'ai fait est, j'ai lié l'événement de clic du lien à cette fonction javascript. Tout ce que cela fait est de faire une demande à un fichier PHP qui vérifie les en-têtes D'URL pour X-FRAME-Options avant de décider de charger L'URL dans la fenêtre modale ou de rediriger.

Voici la fonction: 

  function opentheater(link, title){
        $.get( "url_origin_helper.php?url="+encodeURIComponent(link), function( data ) {
  if(data == "ya"){
      $(".modal-title").html("<h3 style='color:480060;'>"+title+"&nbsp;&nbsp;&nbsp;<small>"+link+"</small></h3>");
        $("#linkcontent").attr("src", link);
        $("#myModal").modal("show");
  }
  else{
      window.location.href = link;
      //alert(data);
  }
});


        }

voici le code de fichier PHP qui le vérifie: 

<?php
$url = rawurldecode($_REQUEST['url']);
$header = get_headers($url, 1);
if(array_key_exists("X-Frame-Options", $header)){
    echo "nein";
}
else{
    echo "ya";
}


?>

Espérons que cette aide.

1
répondu swatkat7 2013-12-19 11:01:23

j'ai rencontré ce problème lors de l'exécution d'un site web wordpress. J'ai essayé toutes sortes de choses pour le corriger et n'étais pas sûr comment, finalement le problème était parce que j'utilisais DNS forwarding avec masking, et les liens vers des sites externes n'étaient pas abordés correctement. i.e. mon site a été hébergé à http://123.456.789/index.html mais a été masqué pour fonctionner à http://somewebSite.com/index.html . Quand j'ai entré http://123.456.789/index.html dans le navigateur en cliquant sur ces mêmes liens, il n'y a pas de problème X-frame-origins dans la console JS, mais en lançant http://somewebSite.com/index.html did. Afin de masquer correctement, vous devez ajouter les serveurs de noms DNS de votre hôte à votre service de domaine, i.e. godaddy.com devrait avoir des serveurs de noms d'exemple, ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com, si vous utilisiez digitalocean.com comme votre service d'hébergement.

1
répondu kinghenry14 2014-06-03 00:17:17

il est surprenant que personne ici n'ait jamais mentionné Apache paramètres du serveur ( *.conf fichiers) ou .htaccess fichier lui-même comme étant une cause de cette erreur. Cherchez dans vos fichiers de configuration .htaccess ou Apache , en vous assurant que vous n'avez pas la valeur suivante: DENY :

Header always set X-Frame-Options DENY

Changer SAMEORIGIN , rend les choses fonctionnent comme prévu:

Header always set X-Frame-Options SAMEORIGIN

1
répondu Ilia Rostovtsev 2015-08-05 11:14:53

la seule vraie réponse, si vous ne contrôlez pas les en-têtes sur votre source que vous voulez dans votre iframe, est de le proxy. Demandez à un serveur d'agir en tant que client, de recevoir la source, de supprimer les en-têtes problématiques, d'ajouter des CORS si nécessaire, puis de lancer un ping sur votre propre serveur.

il y a une autre réponse expliquant comment écrire un tel proxy. Ce n'est pas difficile, mais j'étais sûr que quelqu'un avait déjà fait ça avant. Il est juste difficile de trouver, pour une raison quelconque.

j'ai finalement trouvé quelques sources:

https://github.com/Rob--W/cors-anywhere/#documentation

^ privilégiées. Si vous avez besoin d'usage rare, je pense que vous pouvez juste utiliser son application heroku. Sinon, c'est du code pour l'exécuter vous-même sur votre propre serveur. Remarque assurez-vous que les limites sont.

whateverorigin.org

^ deuxième choix, mais assez vieux. soi-disant nouveau choix en python: https://github.com/Eiledon/alloworigin

puis il y a le troisième choix:

http://anyorigin.com /

qui semble permettre un peu d'usage gratuit, mais qui vous mettra sur une liste de honte publique si vous ne payez pas et utilisez un montant non spécifié, dont vous ne pouvez être retiré que si vous payez les frais...

1
répondu Kyle Baker 2018-06-26 03:24:39

non mentionné, mais peut aider dans certains cas: 

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
        var doc = iframe.contentWindow.document;
        doc.open();
        doc.write(xhr.responseText);
        doc.close();
    }
}
xhr.open('GET', url, true);
xhr.send(null);
0
répondu mattdlockyer 2014-03-19 06:22:18

utilisez cette ligne au lieu de header() . 

echo "<script>window.top.location = 'https://apps.facebook.com/yourappnamespace/';</script>";
0
répondu Hemanta Nandi 2015-04-21 10:36:41

j'ai eu ce problème, et je l'ai résolu en éditant httd.conf 

<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        Header always setifempty X-Frame-Options GOFORIT
    </IfVersion>
    <IfVersion < 2.4.7 >
        Header always merge X-Frame-Options GOFORIT
    </IfVersion>
</IfModule>

j'ai changé SAMEORIGIN en GOFORIT et redémarré serveur

0
répondu Arthur 2015-08-13 09:31:17

essayez cette chose, Je ne pense pas que quelqu'un a suggéré cela dans le sujet, cela résoudra comme 70% de votre problème, pour quelques autres pages, vous avez à la ferraille, j'ai la solution complète, mais pas pour le public,

Ajouter ci-dessous à votre iframe

bac à sable="laisser-même d'origine autoriser les scripts autoriser les popups de permettre à des" formes

0
répondu Zulqurnain abbas 2017-10-02 07:59:41