ReactJS - 客户信使 CHAT 违反了以下内容安全策略指令：“frame-ancestors答案

【问题标题】：ReactJS - Customer messenger CHAT violates the following Content Security Policy directive: "frame-ancestorsReactJS - 客户信使 CHAT 违反了以下内容安全策略指令：“frame-ancestors
【发布时间】：2021-08-22 18:19:54
【问题描述】：

我在本地环境中测试插件 react-messenger-customer-chat。我刚刚安装了插件并将以下代码插入到我的渲染视图中

    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>
        );
    }

运行我的 react 应用时，出现错误：

拒绝框架“https://web.facebook.com/”，因为祖先违反了以下内容安全策略指令：“frame-ancestors https://web.facebook.com”。

请问我该如何解决这个问题？谢谢

【问题讨论】：

这能回答你的问题吗？ Content Security Policy directive: "frame-ancestors 'self'
@Emile ，也许，但我不明白，什么是更好的解决方案
可能没有，因为 Facebook 限制了哪些域可以将其信使应用程序嵌入 iframe。
whitelisted domains 可以在客户的 facebook 开发者帐户中进行管理，虽然我个人并不熟悉。
好的。感谢您的回复

标签： reactjs facebook frame content-security-policy messenger

【解决方案1】：

我在这里找到了解决方案解决方案在这里 https://www.youtube.com/watch?v=8e_4KIj4jBs

【讨论】：

【解决方案2】：

您需要在 Facebook 页面设置中将您的域列入白名单。为此，请导航至：Your FB Page > Settings > Advanced Messaging > White-listed domains 并在此处输入您的域。

【讨论】：