хочу показать страницу внешней ссылки в всплывающем окне в React

Question

Я пытаюсь показать страницу Google в моем всплывающем окне, но оно дает мне сообщение в iframe 'www.google.com отказался подключиться'

Приложение. 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;

Всплывающее окно. 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;

Мой подход не работает. Я могу go и с другим подходом, если это сработает. Заранее спасибо.

Answer 1

Прежде всего, вам необходимо заменить http на https в целях безопасности.

После этого вы получите

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

В нем говорится, что Google мешает нам использовать https://www.google.com непосредственно в iframe.

Однако благодаря этому вопросу показано, что вы можете обойти это ограничение, используя другой URL: https://www.google.com/webhp?igu=1&gws_rd=ssl ( рабочий пример здесь)