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

【问题标题】：Social media links showing blank page显示空白页面的社交媒体链接
【发布时间】：2018-10-30 03:38:18
【问题描述】：

我正在尝试在 CodePen 中将一些社交媒体链接添加到我的网页，但单击该链接会出现一个空白页面。

例如：

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

这个 URL 只是指向一个空白页面。我的网站可以访问here。我在这里做错了什么？

【问题讨论】：

请发布更多您的 HTML 代码。
添加<head>的代码也很好。你在用什么 JS 代码吗？
实际上，我正在将其作为练习 codepen 项目 - 只是 freecodecamp 课程的一部分。这是 codepen 链接：codepen.io/dave-bage/full/WJazNm

标签： html twitter anchor social-media

【解决方案1】：

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

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

维基百科将点击劫持定义为^[3]

点击劫持是一种欺骗网络用户的恶意技术点击与用户感知不同的东西点击，从而可能泄露机密信息或控制他们的计算机，同时点击看似无害的网页。

点击劫持的页面通过以下方式诱使用户执行不希望的操作点击隐藏的链接。在点击劫持的页面上，攻击者在透明层中加载另一个页面。用户认为他们正在点击可见按钮，而他们实际上正在执行隐形页面上的操作。隐藏页面可能是真实的页;因此，攻击者可以诱骗用户执行操作这是用户从未想过的。没有办法追踪这样的稍后对攻击者采取行动，因为用户本来是真正的在隐藏页面上进行身份验证。

现在，Twitter 和 Facebook 将 X-Frame-Options 设置为“拒绝”。控制台输出将证明这一点。

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

参考文献

【讨论】：

啊哈！有趣的。我从来不知道这件事。谢谢！那么您如何实际将 X-Frame-Options 更改为拒绝？
您可以在后端设置它，方法是在您的 HTTP 服务器（例如 Apache）中设置 HTTP 标头，或者在您的代码中的某个位置（例如在视图中设置它）。 This answer 可以帮忙。