J’écris une page Web minuscule dont le but est d’encadrer quelques autres pages, simplement pour les regrouper dans une seule fenêtre de navigateur afin d’en faciliter la visualisation. Quelques-unes des pages que j’essaie de cadrer interdisent d’être encadrées et de lancer un “Refusé pour afficher le document car l’affichage est interdit par X-Frame-Options”. erreur dans Chrome. Je comprends que c’est une limitation de sécurité (pour une bonne raison), et que vous n’avez pas access à la modifier.
Existe-t-il une autre méthode de cadrage ou de non-cadrage pour afficher les pages d’une même fenêtre qui ne seront pas déclenchées par l’en-tête X-Frame-Options?
J’ai eu un problème similaire, où j’essayais d’afficher le contenu de notre propre site dans un iframe (comme un dialog de style lightbox avec Colorbox ), et où nous avions un en-tête “X-Frame-Options SAMEORIGIN” le serveur source l’empêche de se charger sur notre serveur de test.
Cela ne semble pas être documenté quelque part, mais si vous pouvez éditer les pages que vous essayez d’iframe (par exemple, ce sont vos propres pages), il suffit d’envoyer un autre en-tête X-Frame-Options avec n’importe quelle chaîne à tout moment. les commandes SAMEORIGIN ou DENY.
par exemple. pour PHP, mettre
en haut de votre page fera que les navigateurs combinent les deux, ce qui donne un en-tête de
X-Frame-Options SAMEORIGIN, GOFORIT
… et vous permet de charger la page dans un iframe. Cela semble fonctionner lorsque la commande SAMEORIGIN initiale a été définie au niveau du serveur et que vous souhaitez la remplacer sur une requête page par page.
Bonne chance!
Si vous obtenez cette erreur pour une vidéo YouTube, plutôt que d’utiliser l’URL complète, utilisez l’URL d’intégration des options de partage. Cela ressemblera à http://www.youtube.com/embed/eCfDxZxTBW4
Vous pouvez également remplacer watch?v=
par embed/
si http://www.youtube.com/watch?v=eCfDxZxTBW4
devient http://www.youtube.com/embed/eCfDxZxTBW4
Si vous rencontrez cette erreur en essayant d’intégrer une carte Google Map dans un iframe
, vous devez append &output=embed
au lien source.
Vous pouvez contourner X-Frame-Options
dans un utilisant uniquement le JavaScript côté client et YQL . Voici une preuve de concept: Hacker News dans un
. (Testé dans Chrome et Firefox; si cela ne fonctionne pas, essayez de rafraîchir la page.)
Le processus est le suivant:
loadURL
), getData
),
et un
chargement dans un iframe utilisant YQL,
vide (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(//i, 'document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } }); ')); iframe.contentWindow.document.close(); } loadURL(iframe.src);
Ajouter un
target='_top'
sur mon lien dans l’onglet facebook corrigé le problème pour moi …
Si vous obtenez cette erreur en essayant d’intégrer du contenu Vimeo, modifiez le src de l’iframe,
de: https://vimeo.com/63534746
à: http://player.vimeo.com/video/63534746
Il existe un plugin pour Chrome, qui supprime cette entrée d’en-tête (pour un usage personnel uniquement):
J’avais le même problème lorsque j’ai essayé d’incorporer moodle 2 dans iframe, la solution est Site administration ► Security ► HTTP security
et cocher Allow frame embedding
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!
J’ai essayé presque toutes les suggestions. Cependant, la seule chose qui a vraiment résolu le problème était:
Créez un fichier .htaccess
dans le même dossier que votre fichier PHP.
Ajoutez cette ligne au htaccess:
Header always unset X-Frame-Options
L’incorporation de PHP par un iframe d’un autre domaine devrait fonctionner par la suite.
De plus, vous pouvez append au début de votre fichier PHP:
header('X-Frame-Options: ALLOW');
Ce qui n’était cependant pas nécessaire dans mon cas.
Il semble que l’ option Autoriser-à-venir https: // … de X-Frame-Options a été dépréciée et a été remplacée (et est ignorée) si vous utilisez plutôt l’en – tête Content-Security-Policy .
Voici la référence complète: https://content-security-policy.com/
J’ai eu le même problème avec mediawiki, car le serveur a refusé d’intégrer la page dans un iframe pour des raisons de sécurité.
Je l’ai résolu en écrivant
$wgEditPageFrameOptions = "SAMEORIGIN";
dans le fichier de configuration php mediawiki.
J’espère que cela aide.
Solution pour charger un site Web externe dans un iFrame, même si l’option x-frame est définie pour être refusée sur le site Web externe.
Si vous souhaitez charger un autre site Web dans un iFrame et que vous obtenez l’erreur Display forbidden by X-Frame-Options”
vous pouvez réellement y remédier en créant un script proxy côté serveur.
L’atsortingbut src
de l’iFrame pourrait avoir une URL ressemblant à ceci: /proxy.php?url=https://www.example.com/page&key=somekey
Alors 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 le bloc, car il ne s’agit que d’une requête GET qui aurait pu être une visite de page de navigateur ordinaire.
Soyez conscient: Vous pourriez vouloir améliorer la sécurité dans ce script. Parce que les pirates peuvent commencer à charger dans les pages Web via votre script proxy.
La seule question qui a un tas de réponses. Bienvenue dans le guide Je souhaiterais avoir quand je me bousculais pour que cela fonctionne à 10h30 le jour de la date limite … FB fait des choses étranges avec les applications de la canvas, et bien, vous avez été prévenu. Si vous êtes toujours là et que vous avez une application Rails qui apparaîtra derrière un canevas Facebook, 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 parameters de canvas de Facebook, j’ai utilisé /canvas/
et fait le parcours aller sur 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
<% 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; <% end %>
Sources
target = ‘_ parent’
En utilisant l’idée de Kevin Vella, j’ai essayé d’append cet atsortingbut pour former des éléments créés par le générateur de boutons de PayPal. Travaillé pour moi afin que Paypal ne s’ouvre pas dans une nouvelle fenêtre / un nouvel onglet de navigateur.
FWIW:
Nous avions une situation où nous devions tuer notre iFrame
lorsque ce code “disjoncteur” est apparu. J’ai donc utilisé la function get_headers($url);
PHP function get_headers($url);
pour extraire l’URL distante avant de l’afficher dans un iFrame
. Pour améliorer les performances, j’ai mis les résultats en mémoire cache dans un fichier afin de ne pas établir de connexion HTTP à chaque fois.
J’utilisais Tomcat 8.0.30, aucune des suggestions ne fonctionnait pour moi. Comme nous cherchons à mettre à jour les X-Frame-Options
et à le paramétrer sur ALLOW
, voici comment j’ai configuré pour autoriser l’intégration des iframes:
httpHeaderSecurity org.apache.catalina.filters.HttpHeaderSecurityFilter hstsEnabled true antiClickJackingEnabled true antiClickJackingOption ALLOW-FROM true httpHeaderSecurity /* REQUEST
Je ne suis pas sûr de sa pertinence, mais j’ai trouvé un moyen de contourner ce problème. Sur mon site, je voulais afficher le lien dans une fenêtre modale contenant un iframe qui charge l’URL.
Ce que j’ai fait, j’ai lié l’événement click du lien à cette fonction javascript. Tout 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 redirect.
Voici la fonction:
function opentheater(link, title){ $.get( "url_origin_helper.php?url="+encodeURIComponent(link), function( data ) { if(data == "ya"){ $(".modal-title").html(""+title+" "+link+"
"); $("#linkcontent").attr("src", link); $("#myModal").modal("show"); } else{ window.location.href = link; //alert(data); } }); }
Voici le code PHP qui le vérifie:
J’espère que cela t’aides.
Je suis tombé sur cette question lors de l’exécution d’un site Web wordpress. J’ai essayé toutes sortes de choses pour résoudre ce problème et je ne savais pas comment, au final, le problème était dû au transfert DNS avec masquage, et les liens vers des sites externes n’étaient pas correctement traités. c’est-à-dire que mon site était hébergé sur http: //123.456.789/index.html, mais que son exécution était masquée sur http://somewebSite.com/index.html . Lorsque je suis entré dans http: //123.456.789/index.html dans le navigateur, en cliquant sur ces mêmes liens, aucun problème lié à X-frame-origins ne s’est produit dans la console JS, mais l’exécution de http://somewebSite.com/index.html a entraîné . Afin de masquer correctement, vous devez append les serveurs de noms DNS de votre hôte à votre service de domaine. en utilisant digitalocean.com comme service d’hébergement.
Il est surprenant que personne ici n’ait jamais mentionné les parameters du serveur Apache
(fichiers *.conf
) ou le fichier .htaccess
lui-même comme étant à l’origine de cette erreur. Recherchez dans vos fichiers de configuration .htaccess
ou Apache
, en vous assurant que vous n’avez pas le jeu suivant sur DENY
:
Header always set X-Frame-Options DENY
Changer pour SAMEORIGIN
, ça marche comme prévu:
Header always set X-Frame-Options SAMEORIGIN
La seule vraie réponse, si vous ne contrôlez pas les en-têtes de votre source que vous voulez dans votre iframe, est de la proxy. Demandez à un serveur d’agir en tant que client, recevez la source, supprimez les en-têtes problématiques, ajoutez CORS si nécessaire, puis exécutez une commande ping sur votre propre serveur.
Il existe une autre réponse expliquant comment écrire un tel proxy. Ce n’est pas difficile, mais j’étais certain que quelqu’un devait le faire avant. C’était difficile à trouver, pour une raison quelconque.
J’ai finalement trouvé quelques sources:
https://github.com/Rob–W/cors-anywhere/#documentation
^ préféré. Si vous avez besoin d’une utilisation rare, je pense que vous pouvez simplement utiliser son application Heroku. Sinon, c’est du code pour l’exécuter vous-même sur votre propre serveur. Notez bien quelles sont les limites.
Quelle que soit l’origine
^ second choix, mais assez vieux. choix soi-disant plus récent en python: https://github.com/Eiledon/alloworigin
alors il y a le troisième choix:
Ce qui semble permettre un peu de libre utilisation, mais vous mettra sur une liste publique de honte si vous ne payez pas et utilisez un montant non spécifié, dont vous ne pouvez être retiré que si vous payez les frais …
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);
Utilisez cette ligne ci-dessous à la place de la fonction header()
.
echo "";
J’ai eu ce problème et l’ ai résolu en modifiant httd.conf
= 2.4.7 > Header always setifempty X-Frame-Options GOFORIT Header always merge X-Frame-Options GOFORIT
J’ai changé SAMEORIGIN en GOFORIT et redémarré le serveur
Essayez cette chose, je ne pense pas que quiconque a suggéré cela dans le sujet, cela résoudra comme 70% de votre problème, pour certaines autres pages, vous devez supprimer, j’ai la solution complète, mais pas pour le public,
AJOUTEZ ci-dessous à votre iframe
sandbox = “permettre-même-origine allow-scripts allow-popups allow-forms”