'ReactJS - Customer messenger CHAT violates the following Content Security Policy directive: "frame-ancestors

I test on my local environment the plugins react-messenger-customer-chat. I just installed the plugin and insert this folowing code in my render view

    render() {
        const { src, title, tracks, scrollTop } = this.state;
        return (
            <div id="lz-app">
                <Header scrollTop={scrollTop}/>
                <main className="main">
                    <MessengerCustomerChat
                            pageId="xxxxxx"
                            appId="xxxxxx"
                     />
                </main>
                <Footer/>
          
                   
                </div>
            </div>
        );
    }

When run my react app , i have the error :

Refused to frame 'https://web.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://web.facebook.com".

How I resolve this issue please? Thanks

Solution 1:^[1]

I found the solution here Solution here https://www.youtube.com/watch?v=8e_4KIj4jBs

Solution 2:^[2]

You need to whitelist your domain in the Facebook page settings. To do this, navigate to: Your FB Page > Settings > Advanced Messaging > White-listed domains and enter your domain here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ALFA
Solution 2	Juraj Bublinec

'ReactJS - Customer messenger CHAT violates the following Content Security Policy directive: "frame-ancestors

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]