Surmonter "Affichage interdit par X-Frame-Options"
J'écris une toute petite page Web dont le but est d'encadrer quelques autres pages, simplement pour les regrouper dans une seule fenêtre de navigateur afin de faciliter la visualisation. Quelques-unes des pages que j'essaie d'interdire interdisent d'être encadrées et jettent un message "Refuser d'afficher un document car cet affichage est interdit par X-Frame-Options". erreur dans Chrome. Je comprends qu’il s’agit d’une limitation de la sécurité (pour une bonne raison) et je n’ai pas le droit de la modifier.
Existe-t-il une méthode alternative de cadrage ou non de cadrage pour afficher des pages dans une seule fenêtre qui ne soit pas déclenchée par l'en-tête X-Frame-Options?
J'avais un problème similaire, j'essayais d'afficher le contenu de notre propre site dans une iframe (comme un dialogue de style lightbox avec Colorbox ), et nous avions un "X-Frame" valable pour tout le serveur. -Options SAMEORIGIN "sur le serveur source l'empêchant de se charger sur notre serveur de test.
Cela ne semble être documenté nulle part, mais si vous pouvez modifier les pages que vous essayez d'imiter (par exemple, ce sont vos propres pages), envoyez simplement un autre en-tête X-Frame-Options avec une chaîne quelconque désactivée. les commandes SAMEORIGIN ou DENY.
par exemple. pour PHP, mettre
<?php
header('X-Frame-Options: GOFORIT');
?>
en haut de votre page obligera les navigateurs à combiner 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 dans un cas page à 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 intégrée des options de partage. Cela ressemblera à http://www.youtube.com/embed/eCfDxZxTBW4
Vous pouvez également remplacer watch?v= par embed/ afin que http://www.youtube.com/watch?v=eCfDxZxTBW4 devienne http://www.youtube.com/embed/eCfDxZxTBW4.
Si vous obtenez cette erreur en essayant d'intégrer une carte Google Map dans un iframe, vous devez ajouter &output=embed au lien source.
UPDATE 2019: Vous pouvez contourner X-Frame-Options dans un <iframe> n'utilise que du JavaScript côté client et mon X-Frame-Bypass Composant Web. Voici une démo: Hacker News dans un X-Frame-Bypass . (Testé dans Chrome et Firefox.)
Ajout d'un
target='_top'
à mon lien dans l'onglet facebook résolu le problème pour moi ...
Il existe un plug-in pour Chrome qui supprime cette entrée d'en-tête (pour un usage personnel uniquement):
Si vous rencontrez cette erreur en essayant d’intégrer du contenu Vimeo, changez le src de l’iframe,
de: https://vimeo.com/63534746
à: http://player.vimeo.com/video/63534746
J'ai eu le même problème quand j'ai essayé d'incorporer moodle 2 dans iframe, la solution est Site administration ► Security ► HTTP security et vérifiez 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!
Solution permettant de charger un site Web externe dans un iFrame, même si l'option x-frame est configurée pour être refusée sur le site Web externe.
Si vous souhaitez charger un autre site Web dans une iFrame et que vous obtenez l'erreur Display forbidden by X-Frame-Options”, vous pouvez le résoudre en créant un script de proxy 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
Ensuite, 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 évite le blocage, car il s’agit simplement d’une requête GET qui aurait pu être une simple visite de la page d’un navigateur.
Soyez conscient: vous souhaiterez peut-être améliorer la sécurité dans ce script. Parce que les pirates pourraient commencer à charger dans les pages Web via votre script proxy.
J'ai essayé presque toutes les suggestions. Cependant, la seule chose qui résolut vraiment le problème était:
Créez un
.htaccessdans le même dossier que votre fichier PHP.Ajoutez cette ligne au htaccess:
Header always unset X-Frame-Options
L'incorporation de PHP par une iframe d'un autre domaine devrait fonctionner par la suite.
De plus, vous pouvez ajouter 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 X-Frame-Options Allow-From https: // ... est amorti et a été remplacé (et est ignoré) si vous utilisez Content-Security-Policy à la place.
Voici la référence complète: https://content-security-policy.com/
J'ai eu le même problème avec mediawiki, c'est parce que le serveur a refusé l'intégration de 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 mediawiki php.
J'espère que ça aide.
FWIW:
Nous nous sommes trouvés dans une situation où nous devions tuer notre iFrame lorsque ce code "disjoncteur" est apparu. J'ai donc utilisé PHP function get_headers($url); pour extraire l'URL distante avant de l'afficher dans un iFrame. Pour de meilleures performances, j'ai mis les résultats en 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 le X-Frame-Options et à le régler sur ALLOW, voici comment j'ai configuré pour autoriser l'intégration des iframes:
- Accédez au répertoire de configuration Tomcat, modifiez le fichier web.xml.
- Ajoutez le filtre ci-dessous:
<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 le service Tomcat
- Accédez aux ressources à l'aide d'un iFrame.
La seule question qui a un tas de réponses. BIENVENUE au guide, j'aurais bien aimé pouvoir le faire fonctionner à 10 h 30 le soir, le jour de l’échéance ... FB fait des choses bizarres avec des applications de dessin sur toile, et vous avez été prévenu. Si vous êtes toujours ici et que vous avez une application Rails qui apparaîtra derrière un canevas Facebook, vous aurez besoin des éléments suivants:
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 de toile de Facebook, j'ai utilisé /canvas/ et fait en sorte que la route utilise le nom SiteController de 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
- Je pense que la config est venue de l'exemple d'omniauth.
- Le fichier de gemmes (qui est la clé !!!) provient de: choses que j'ai partagées avec slideshare ...
- Cette question de pile avait l'angle Xframe complet. Vous aurez donc un espace vide si vous ne mettez pas cet en-tête dans le contrôleur de l'application.
- Et mon homme @rafmagana a écrit ceci guide herok , que vous pouvez maintenant adopter pour Rails avec cette réponse et les épaules de géants avec lesquelles vous marchez.
cible = '_ parent'
En utilisant l'idée de Kevin Vella, j'ai essayé d'ajouter cet attribut 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/onglet du navigateur.
Je ne sais pas si c'est pertinent, mais j'ai conçu une solution de rechange. 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 est, j'ai lié l'événement click du lien à cette fonction javascript. Cela consiste simplement à envoyer une requête à un fichier PHP qui vérifie les options X-FRAME dans les en-têtes d'URL avant de décider de charger l'URL dans la fenêtre modale ou de le 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+" <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 recherche:
<?php
$url = rawurldecode($_REQUEST['url']);
$header = get_headers($url, 1);
if(array_key_exists("X-Frame-Options", $header)){
echo "nein";
}
else{
echo "ya";
}
?>
J'espère que cela t'aides.
Je suis tombé sur ce problème 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, en dernière analyse, le problème était lié au fait que j'utilisais le transfert DNS avec masquage et que les liens vers des sites externes n'étaient pas correctement pris en compte. c'est-à-dire que mon site était hébergé chez http: //123.456.789/index.html mais était masqué pour s'exécuter sur http://somewebSite.com/index.html . Lorsque j’ai entré http: //123.456.789/index.html dans le navigateur, un clic sur ces mêmes liens n’a entraîné aucun problème d’origine X-frame-origins dans la console JS, mais une exécution http : //somewebSite.com/index.html l'a fait. Pour masquer correctement, vous devez ajouter les serveurs de noms DNS de votre hôte à votre service de domaine. Par exemple, godaddy.com doit avoir des serveurs de noms, par exemple, ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com, si vous étiez utiliser digitalocean.com en tant que service d'hébergement.
Modifiez .htaccess si vous souhaitez supprimer X-Frame-Options d’un répertoire entier.
Et ajoutez la ligne: En-tête toujours non défini Options X-Frame
[contenu de: Résolution "Affichage interdit par X-Frame-Options"
La seule vraie solution, si vous ne contrôlez pas les en-têtes de votre source que vous voulez dans votre iframe, est de les proxy. Demandez à un serveur d'agir en tant que client, recevez le code source, supprimez les en-têtes problématiques, ajoutez CORS si nécessaire, puis envoyez une requête ping à votre propre serveur.
Il existe une autre réponse expliquant comment écrire un tel proxy. Ce n'est pas difficile, mais j'étais sûr que quelqu'un devait l'avoir fait auparavant. C'était difficile à trouver, pour une raison quelconque.
J'ai finalement trouvé des sources:
https://github.com/Rob--W/cors-anywhere/#documentation
^ préféré. Si vous avez besoin d'un usage rare, je pense que vous pouvez simplement utiliser son application heroku. Sinon, c'est le code pour l'exécuter vous-même sur votre propre serveur. Notez bien quelles sont les limites.
quel que soit l'origine.org
deuxième choix, mais assez vieux. choix supposé plus récent en python: https://github.com/Eiledon/alloworigin
alors il y a le troisième choix:
Ce qui semble permettre un peu d'utilisation gratuite, mais vous mettra sur une liste publique de honte si vous ne payez pas et n'utilisez pas un montant non spécifié, dont vous ne pouvez être radié que si vous payez les frais ...
Il est étonnant que personne ici n'ait jamais mentionné les paramètres du serveur Apache (fichiers *.conf) ou .htaccess comme étant la cause de cette erreur. Effectuez une recherche dans vos fichiers de configuration .htaccess ou Apache, en vous assurant que les éléments suivants ne sont pas définis sur DENY:
Header always set X-Frame-Options DENY
En le changeant en SAMEORIGIN, tout se passe comme prévu:
Header always set X-Frame-Options SAMEORIGIN
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 indiquée ci-dessous au lieu de la fonction header().
echo "<script>window.top.location = 'https://apps.facebook.com/yourappnamespace/';</script>";
j'ai eu ce problème, et résolu le montage 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é le serveur
Essayez cette chose, je ne pense pas que quiconque ait 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,
AJOUTER ci-dessous à votre iframe
sandbox = "allow-same-Origin allow-scripts allow-popups allow-formes"