vishal pathode :
I'm trying to show google page on my popup, but it is giving me msg in iframe 'www.google.com refused to connect'
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;
My approach is not working. I can go with the other approach as well if that works. Thanks in advance.
Gaël S :
First of all, you needed to replace http by https for security purpose.
With that done, one will get
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
It states that Google prevents us to use https://www.google.com directly in an iframe.
However, thanks to that question, it is shown that you can bypass this limitation using an other url: https://www.google.com/webhp?igu=1&gws_rd=ssl (working example here)
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=391149&siteId=1