Tengo el siguiente código y trato de publicar un mensaje, pero obtengo un 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¿Qué está pasando?
¿Está desactualizado SecurityError: bloqueó un marco con origen para acceder a un marco de origen cruzado ?
Supuse que el error no tenía nada que ver con la publicación de un mensaje, mi error fue hacerlo en useEffect en lugar de 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> )