Я пытаюсь загрузить плагин Facebook Messenger на одном из моих сайтов на Github-страницах. Он отлично загружается в Chrome, но не в Safari или на устройстве iOS. Консоль выдает следующую ошибку:
Refused to load [...] because it does not appear in the frame-ancestors directive of the Content Security Policy.
Код выглядит следующим образом (идентификатор страницы и идентификатор приложения анонимны):
<script>
var div = document.createElement('div');
div.className = 'fb-customerchat';
div.setAttribute('page_id', '[PAGEID]');
div.setAttribute('ref', 'b64:cGVyc193ZWJzaXRl');
div.setAttribute('theme_color', '#082954');
div.setAttribute('logged_in_greeting', 'Hey! Want to get involved in this research?');
div.setAttribute('logged_out_greeting', 'Hey! Want to get involved in this research? Log into Facebook to start chatting');
document.body.appendChild(div);
window.fbMessengerPlugins = window.fbMessengerPlugins || {
init: function () {
FB.init({
appId : '[APPID]',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.3'
});
}, callable: []
};
window.fbAsyncInit = window.fbAsyncInit || function () {
window.fbMessengerPlugins.callable.forEach(function (item) { item(); });
window.fbMessengerPlugins.init();
};
setTimeout(function () {
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, 0);
</script>
Вещи, которые я проверил:
Мой сайт занесен в белый список в настройках страниц Facebook. Он также включен в белый список в приложении chatbot (Chatfuel.com).
Я использовал мой идентификатор страницы, а не URL.
-
Из раздела по устранению неполадок разработчика Facebook:
«Если вы видите консольную ошибку типа« Отказано в отображении * во фрейме, потому что предок нарушает следующую директиву Content Security Policy: * », убедитесь, что домен страницы, над которым работает плагин отрисовка включена в белый список. Также убедитесь, что вы не установили заголовок Referrer-Policy на no-referrer. "
(https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/)
Я не уверен, где я мог найти свою политику для рефереров в моей теме Beautiful-Jekyll Github Pages (https://github.com/daattali/beautiful-jekyll)
Я бы хотел, чтобы плагин мог загружаться во всех браузерах и на устройствах iOS. Есть предложения?
Заранее спасибо