Social media links showing blank page

Question

I am trying to add some social media links to my web page inside CodePen but clicking the link gives a blank page.

For example:

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

This URL just leads to a blank white page. My website is accessible here. What am I doing wrong here?

Answer 1

CodePen displays your webpage in an iframe. iframes allow you to embed another web page inside another web page^[1]. When you click a link inside an iframe, the new web page will be displayed inside that iframe.

However, you can prevent a web page or web site to be displayed inside an iframe. You just need to set the X-Frame-Options to 'deny' and your page will no longer be displayed in an iframe, frame, or object. This is used as a security measure against clickjacking^[2].

Wikipedia defines clickjacking as^[3]

Clickjacking is a malicious technique of tricking a Web user into clicking on something different from what the user perceives they are clicking on, thus potentially revealing confidential information or taking control of their computer while clicking on seemingly innocuous web pages.

A clickjacked page tricks a user into performing undesired actions by clicking on a concealed link. On a clickjacked page, the attackers load another page over it in a transparent layer. The users think that they are clicking visible buttons, while they are actually performing actions on the invisible page. The hidden page may be an authentic page; therefore, the attackers can trick users into performing actions which the users never intended. There is no way of tracing such actions to the attackers later, as the users would have been genuinely authenticated on the hidden page.

Now, Twitter and Facebook has the X-Frame-Options set to `'deny'. The console output will prove it.

As we have learned from above, this will prevent CodePen from displaying your Twitter and Facebook pages. Thus, leading to a blank page.

References

• [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