リアクトにポップアップで外部リンクのページを表示したいです

ヴィシャルpathode：

私は私のポップアップにGoogleのページを表示しようとしているが、それは接続を拒否したwww.google.com」を私MSGでのiframe与えています

App.js

import React from 'react';
import Popup from './components/Popup';

class App extends ReactComponent{

    constructor(props){
        super(props);
        this.state = { showPopup:false};
    }

    togglePopup(){
        this.setState({
            showPopup:!this.state.showPopup
            });
    }

    render(){
        return(
            <div>
            <h1> Simple Popup Example InReact Applicaion </h1>
            <button onClick={this.togglePopup.bind(this)}> Click To Launch Popup </button>

            {this.state.showPopup?
                <Popup
                    text='Click "Close Button" to hide popup'
                    closePopup={this.togglePopup.bind(this)}
                />
            : null
            }
            </div>
        };
    }
}

export default App;

Popup.js

import React from 'react';
import  './style.css';

class Popup extends React.Component{

    render(){
        const google = "<iframe width='100%' height='100%' scrolling='no' src='http://www.google.com' sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'></iframe>";

        return(
            <div className='popup'>
                <div className='popup_inner'>
                    <h1> {this.props.text} </h1>
                    <div dangerouslySetInnerHTML={{ __html: google ? google :""}}/>
                    <button onClick={this.props.closePopup}> close me </button>
                </div>
            </div>
        );
    }
}

export default Popup;

私のアプローチは機能していません。その作品の場合、私は他の方法で行くことができます。前もって感謝します。

ガエル・S：

まず第一に、あなたは交換するために必要なhttpことでhttpsセキュリティ上の目的のために。

それが完了すると、1が得られます

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

これは、Googleが使用するために私たちを防ぐことを述べhttps://www.google.comiframe内に直接。

しかし、そのおかげ質問は：あなたが他のURLを使用してこの制限を回避することができることを示しているhttps://www.google.com/webhp?igu=1&gws_rd=ssl（ここで働い例）