Search code examples
content-security-policyfacebook-chat

Facebook Chat Plugin issues with CSP frame-src directive

We have a Facebook Chat Plugin on one of our websites. We have a CSP set up where any third party providers are whitelisted by us.

The problem is, when viewing a website in mobile which has a Facebook Chat Plugin, when clicking the "Chat in Messenger Button" it throws:

Refused to frame '' because it violates the following Content Security Policy directive: "frame-src ... ".

enter image description here

But it strictly said '' to which we are unable to whitelist in our CSP headers.

When we tried to disable the CSP headers, upon clicking the "Chat in Messenger" button, it tries to open the Messenger app instead.

Any ideas on working around this?

Solution

  • But it strictly said '' to which we are unable to whitelist in our CSP headers.

    On some platforms Chrome does not show blocked-uri in the console, I do not know why. Try Safari if you have one (I think Firefox does block nothing in you case).

    Script of FB Chat plugin uses intent:// and fb-messenger:// vendor schemes to open app:

    __d("sdk.openMessenger", ["sdk.UA"], (function(a, b, c, d, e, f) {
  "use strict";
  e.exports = a;
  var g = "https://itunes.apple.com/us/app/messenger/id454638411",
    h = "https://play.google.com/store/apps/details?id=com.facebook.orca",
    i = 3e3;

  function a(a) {
    var c, d, e = a.link;
    a = a.app_id;
    b("sdk.UA").android() ? (c = "intent://share/#Intent;package=com.facebook.orca;scheme=fb-messenger;S.android.intent.extra.TEXT=" + encodeURIComponent(e) + ";S.trigger=send_plugin;", a && (c += "S.platform_app_id=" + encodeURIComponent(a) + ";"), c += "end", d = h) : (c = "fb-messenger://share?link=" + encodeURIComponent(e), a && (c += "&app_id=" + encodeURIComponent(a)), d = g);
    setTimeout(function() {
      window.location.href = d
    }, i);
    window.location.href = c
  }
}), null);

    Although vendor schemas should not be blocked by the page CSP, some browsers may need to specify intent: and fb-messenger: scheme-sources in the frame-src directive.

    When we tried to disable the CSP headers, upon clicking the "Chat in Messenger" button, it tries to open the Messenger app instead.

    Yes, Adnroid tries to open Messenger app if installed. It this question: Facebook chat button of my website in android webview is not opening the messenger app there is a link to the solution - substitute "intent:" scheme to the "https://". May be it helps you.
    In case of prevent open Messenger app may be you will not have to use intent: and fb-messenger: scheme-sources in the CSP.