Ссылки на социальные сети с пустой страницей

Question

Я пытаюсь добавить ссылки на социальные сети на свою веб-страницу в CodePen, но при нажатии на ссылку появляется пустая страница.

Например:

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

Этот URL-адрес только приводит кпустая белая страница.Мой сайт доступен здесь .Что я тут не так делаю?

Answer 1

CodePen отображает вашу веб-страницу в iframe.iframe s позволяет встроить другую веб-страницу в другую веб-страницу ^[1] .Когда вы щелкаете ссылку внутри iframe, новая веб-страница будет отображаться внутри этой iframe.

Однако вы можете запретить отображение веб-страницы или веб-сайта внутри iframe.Вам просто нужно установить X-Frame-Options на 'deny', и ваша страница больше не будет отображаться в iframe, frame или object.Это используется как мера безопасности против кликджекинга ^[2] .

Википедия определяет кликджек как ^[3]

Clickjacking - это злонамеренная техника, заставляющая веб-пользователя нажимать на что-то, отличное от того, что пользователь воспринимает, нажимая на него, таким образом потенциально раскрывая конфиденциальную информацию или захватывая контроль над своим компьютером, нажимая на, казалось бы, безобидныйвеб-страницы.

Страничка с кликом обманом заставляет пользователя выполнять нежелательные действия, щелкая скрытую ссылку.На странице с щелчком мыши злоумышленники загружают поверх нее еще одну страницу в прозрачном слое.Пользователи думают, что они нажимают на видимые кнопки, в то время как они фактически выполняют действия на невидимой странице.Скрытая страница может быть подлинной страницей;следовательно, злоумышленники могут обманом заставить пользователей выполнять действия, которые пользователи никогда не планировали.Позже злоумышленники не смогут отследить такие действия, так как пользователи были бы подлинно аутентифицированы на скрытой странице.

Теперь в Твиттере и 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