みなさん、Reactで作ったWebアプリから、React Routerを使ってVueで作ったWebアプリに飛びたいな〜と思ったことないでしょうか！まさに、今回わたくしこのような状況になり、何も考えずにいろんな言語に手を出すんじゃなかったなと少し後悔したのですが、どうしてもReactで実装し直すのが嫌だったので、考えました。
Reactで作ったWebアプリケーションに、Vueで作ったWebアプリケーションを合体する方法の備忘録です。
やりたいこと
Reactで実装した左側のアプリとVueで実装した右側のアプリを
合体させたい！
方法検討
調べてみると、iframeを使えば、Webページに他のWebページを埋め込めることがわかりました。
また、ReactにはReact Iframeというのがあったので、これを使ってみました！
やってみる
埋め込み作業としては、Reactでの設定だけでできます。Reactのプロジェクトを開いて、React Iframeのインストールから行います。
React Iframeのインストール
$ yarn add react-iframe
実装
import React from 'react';
import Iframe from 'react-iframe'
export default function Page1(){
return (
<div>
<Iframe id = "page1"
url = "＜埋め込みたいサイトURL＞"
position="absolute"
width="80%"
height="90%"/>
</div>
);
}
必須属性としては、urlのみです。ここに埋め込みたいページのURLを指定します。
そして、このままだと埋め込んだVueのアプリに枠線ができるので、CSSで消しました。
Iframe {
border:none;
}
完成画面
完成です！簡単に埋め込むことができました！
あとはS3にアップロードして、公開することができました。
これで、左側のメニューからこのVueページに飛ぶと、まさかVueで実装しているとは気づかないくらいナチュラルにVueのページを開くことができました！
セキュリティについて
最後に、今回iframeについて調べていく中で、セキュリティ面でリスクもあることがわかりましたので、リスクと解決方法についてもまとめておきます。
外部のサイトを埋め込む場合
埋め込んだ外部のサイトに、悪意のある処理が含まれていた場合、システムやユーザーに危害が加わる可能性があります。
それを回避するために、iframeにはsandbox属性という属性が用意されており、外部のサイトが実行することに対して制限をかけることができます。つまり、sandbox属性を使うことで、システムが不正に操作されるのを防ぐことができます。
もちろんReact iframeにもsandbox属性はあります。
自分のサイトが悪用されないように
少し今回の趣旨とは異なりますが、自作のWebサイトがiframeを使って悪意のあるサイトに埋め込まれないようにする方法です。
クリックジャッキングについて調べるとその仕組みについてはたくさん出てきますが、簡単に説明すると、悪意のあるサイト①にサイト②を透過させることで、ユーザーはサイト②を操作していると思っていたら、実は、悪意のあるサイト①を操作していたというような攻撃手法です。
Webサイトの開発側はユーザーがこのような被害に合わないようにするために、対策を行う必要があります。
その対策の一つとして、X-Frame-Optionsをレスポンスヘッダーにつける方法があります。このヘッダーをつけることによって、他ドメインからiframeで埋め込まれないようにすることができます。
今回はS3を静的Webサイトホスティングとして使いましたが、S3のみではこのヘッダーをつけることができません。なので、S3 + CloudFront + Lambda@Edgeを使って構築する必要があります。
おわりに
今回はどうしてもReactのプロジェクトとVueのプロジェクトを合体させたく、React Iframeというのを使ってみました！こんなにも簡単に埋め込むことができました！Vueで作っているものを、Reactで作り直すという話がでていたのですが、回避できてひとまずよかったです。
ReactからVueに値を渡すのに少し苦労したので、次回はそれについてまとめようかなと思っています。