他サイト 外部サイトを画面遷移せずに開く 同じサイトで表示する方法
HTMLタグのiframeを利用した埋め込みを使用します。
以下コードです。
<iframe
src={url}{/*参照するURL(外部でも内部でも)*/}
title={title} {/*別に特段必要な部分ではないですが、iframeタグで表示した内容のラベル*/}
sandbox="allow-scripts allow-same-origin"{/*参照先のURLでの操作等細かい設定*/}
/>
※ iframeタグ自体の設定できる値詳細につきましては別途検索ください。
参照できるURLと参照できないURLがある
実際にURLの値を設定して参照できるかどうか確認もできますが、以下サイトで確認することで簡単に確認できます。(参照できないURLを設定した場合、iframeタグで外部サイトが表示されるはずの領域に、「example.comからアクセスを拒否されました」※example.comは入力したurl、と表示されます。)
URL確認サイト(ヘッダー等を調べる)→https://securityheaders.com/
このサイトで x-frame-options というヘッダーが設定されているもしくは値がある場合、基本的にアクセスできません。
例えば、
-
食べログ、Qiita
→https://tabelog.com/
x-frame-optionsがSAMEORIGINに設定されているため、アクセスできません。 -
ホットペッパー
→https://www.hotpepper.jp/
x-frame-options自体設定されていないので、iframeタグで参照できます。 -
facebook
→https://www.facebook.com/
x-frame-optionsがDENYに設定されているため、アクセスできません。
※正確には、SAMEORIGINが設定されている場合、アクセスできる可能性は存在します。
基本可能ではないので、詳細は省きますが、
SAMEORIGINとなるエンドポイントにアクセスすることができればiframeでの参照ができます。
ただSAMEORIGINであれば、許可するというのはiframeのみではなく多くの場所で使用されているため、そのSAMEORIGINにアクセスできるのはセキュリティ的に問題があるため、基本的にはアクセスできません。
参照するサイトの開発に携わるものだけが、可能と考えてもらっても大丈夫だと思います。facebookのサイトならfacebookのサイト開発に携わっているもの
もしくは特定のurlのみ参照可能とするALLOW-FROM uri (Deprecated)にて自分のサイトが許可されていれば、参照可能かもしれません。deprecatedのなので、ちゃんとサポートしていない可能性はありますが。
そもそもなぜx-frame-optionsが設定されているのか
クリックジャッキング を防ぐためです。詳細な記事を後日記載するので、詳細が気になる方はクリックジャッキングで検索ください
どんなサイトが設定されていないか
特に、Wordpressであるとか関わらず、開発時デフォルトで設定が入っているものではないので、設定を入れない限りはそもそも設定すらされていません。
googleやfacebookのサイトには設定がされていることから、セキュリティの意識が高い企業もしくは、有識者を雇っている会社は設定をされているのだと思います。
※ ちなみにQiitaはこの設定がされているため、セキュリティの対策をしっかりされていることがわかります。
セキュリティと利便性は表裏一体
外部サイトにアクセスさせたいが、戻るボタンでしか、基本的に元のページに戻れないため、画面遷移させたくない、ためiframeを使用しているが、この技術は、クリックジャッキングのように悪用もできるため、対策は必要と思いつつも、画面遷移せずに外部サイトを参照させるようなサイトを作成できるので、対策されると少し困るなという思いがあります。代替の解決策等ございましたら、コメントいただけますと幸いです。
ちなみに、工数削減と、APIで取得できる項目が限られている、もしくは足りないため、iframe使用に至ったため、APIを使用してデータ取得や、登録処理を行うというのは、選択肢に入っていません。