I have the below code and trying to post a message but get a Blocked autofocusing on a <input> element in a cross-origin subframe. error.
import React from 'react'
const MyFiles = () => {
React.useEffect(() => {
let frame = document.getElementById('storage')
frame.contentWindow.postMessage({user: 'admin', password: 'blahblah'}, '*');
}, []);
return (
<React.Fragment>
<div className="pt-100 pb-70">
<div className="container">
<iframe id='storage' src='https://my.domain.com' style={{width: '100%', height: '100vh'}}/>
</div>
</div>
</React.Fragment>
)
}
export default MyFiles
What is going on?
Is this out of date SecurityError: Blocked a frame with origin from accessing a cross-origin frame?
Figured the error had nothing to with posting a message, my mistake was doing it on useEffect instead of an onload:
const post = () => {
try{
let frame = document.getElementById('storage')
frame.contentWindow.postMessage({user: 'name', password: 'pass'}, storageUrl);
console.log('posted')
} catch (e){
console.log(e)
}
}
return (
<div className="pt-100 pb-70">
<div className="container">
<iframe id='storage' src='https://my.domain.com' style={{width: '100%', height: '100vh'}} onLoad={post}/>
</div>
</div>
)