Ошибка CSP при использовании плагина Facebook Checkbox в качестве виджета iframe - PullRequest
0 голосов
/ 23 января 2020

Я пытаюсь создать виджет, который другие сайты могут включать через iframe . Плагин содержит Плагин Facebook Checkbox .

Рассмотрим следующий код для iframe:

<!DOCTYPE html>
<html>

<head>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '3297885870227646',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0'
    });
  };

</script>
<script async crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>


<body>
    <div class="fb-messenger-checkbox"
      origin="https://fb-marketing-widget.herokuapp.com/widget-iframe"
      page_id="110054573751247"
      messenger_app_id="3297885870227646"
      user_ref="<%= userRef %>"
      allow_login="true"
      size="standard"
      skin="light"
      center_align="true">
    </div>
</body>
</html>

Приведенный выше код работает при открытии URL-адреса iframe непосредственно в браузере . Однако, , когда я включаю тот же iframe в другой веб-сайт с другим доменом , я получаю отказ в отображении 'https://www.facebook.com/v4.0/plugins/messenger_checkbox.php? ... в кадре, потому что предок нарушает следующая директива Content Security Policy: «frame-ancestors https://my-iframe-domain.com».

Обратите внимание, что iframe работает при непосредственном открытии, так что это явно не проблема с занесение в белый список домена с неправильным идентификатором приложения et c.

Буду признателен за любую информацию о том, как я могу использовать приведенный выше код в качестве фрейма для включения в другие сайты!

1 Ответ

0 голосов
/ 27 января 2020

Facebook ограничивает, какие сайты могут создавать фреймы для своего контента, вы видите ошибку, связанную с тем, что вашему сайту не разрешено фреймировать контент из Facebook. Шаг реализации 1 (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin/) для подключаемого модуля Facebook Checkbox состоит в том, чтобы внести в белый список ваши домены: https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting. Это не то, что вы можете изменить на своей странице.

...