社交媒体链接显示空白页面

Question

我正在尝试在CodePen中添加一些社交媒体链接到我的网页，但点击该链接会显示一个空白页。

例如：

<div class="col-md-2"><a href="https://twitter.com/Mr_Cool_Web"><i class="fab fa-twitter-square"></i></a></div>

此网址只会显示空白页面。我的网站可以访问here。我在这里做错了什么？

Answer 1

CodePen会在iframe中显示您的网页。 iframe允许您在另一个网页 ^[1] 中嵌入另一个网页。当您点击iframe中的链接时，新网页将显示在iframe内。

但是，您可以阻止在iframe内显示网页或网站。您只需将X-Frame-Options设置为'deny'，您的页面就不会再显示在iframe，frame或object中。这用作针对clickjacking ^[2] 的安全措施。

维基百科将 clickjacking 定义为 ^[3]

  

Clickjacking是一种欺骗Web用户的恶意技术   点击与用户认为不同的东西   点击，从而可能泄露机密信息或   在点击看似无害的时候控制他们的电脑   网页。

     

点击劫持页面会诱使用户执行不需要的操作   点击隐藏链接。在点击劫持的页面上，攻击者   在透明层中加载另一页。用户认为   他们点击可见按钮，而他们实际上正在执行   隐藏页面上的操作。隐藏页面可能是真实的   页;因此，攻击者可以欺骗用户执行操作   用户从未打算过。没有办法追踪这样的   以后对攻击者的行动，因为用户本来就是真的   在隐藏页面上进行身份验证。

现在，Twitter和Facebook将X-Frame-Options设置为''拒绝'。控制台输出将证明它。

正如我们从上面了解到的，这将阻止CodePen显示您的Twitter和Facebook页面。因此，导致空白页面。

参考

• [1] - https://techterms.com/definition/iframe
• [2] - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
• [3] - https://en.wikipedia.org/wiki/Clickjacking