web-dev-qa-db-fra.com

comment bloquer le chargement du site Web dans iframe?

Récemment, j'ai essayé de charger le site Web YouTube dans un iframe, mais j'ai vérifié que cela ne fonctionnait pas. j'ai utilisé ce code simple.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe width="1000px" height="700px" src="http://www.youtube.com" ></iframe>
</body>
</html>

  1. je veux savoir pourquoi ma page Web ne peut pas charger le site Web YouTube dans iframe ..

  2. quel code j'utilise pour charger le site youtube dans ma page Web.

  3. comment j'utilise la même techniq dans mon site Web, donc personne ne peut ajouter mon site Web dans iframe.

javascriptjqueryhtmliframeyoutube
17
Rishi Kumar

Pour un navigateur moderne, vous devez activer X-Frame-Options dans l'en-tête, l'en-tête x-frame-options peut être implémenté via les paramètres de configuration du serveur Web.

Vous pouvez afficher les X-Frame-Options dans l'en-tête comme dans l'image ci-dessous, enter image description here

Référence: https://www.keycdn.com/blog/x-frame-options/

Si votre navigateur ne le prend pas en charge, vous n'aurez AUCUNE défense contre le détournement de clics en place et pourrez utiliser les options X-Frame du champ d'en-tête HTTP,

  <meta http-equiv="X-Frame-Options" content="deny">

Il existe trois valeurs possibles pour X-Frame-Options:

REFUSER - La page ne peut pas être affichée dans un cadre, quel que soit le site qui tente de le faire.

SAMEORIGIN - La page ne peut être affichée que dans un cadre sur la même origine que la page elle-même.

ALLOW-FROM uri - La page ne peut être affichée que dans un cadre sur l'origine spécifiée.

32
Krish R

Depuis avril 2016, la réponse acceptée par Krish R ne fonctionne plus. La plupart des navigateurs ignorent désormais la balise META comme recommandé par RFC 7034 .

La façon correcte d'implémenter cet en-tête est de l'envoyer avec le document par le serveur. Voir la documentation de mozilla sur X-Frame-Options pour plus de détails.

19
mwoodman