0

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?

user1693063
  • 71
  • 7
  • 1
    The error message you quote has absolutely nothing to do with you attempt to post a message to the document in the frame. – Quentin May 30 '22 at 21:40
  • Thanks, moved my postMessage to an onLoad={post} on the iframe and the message got posted even though the error still there. – user1693063 May 30 '22 at 22:01

1 Answers1

0

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>
)
user1693063
  • 71
  • 7