3

I'm having trouble with the Facebook Chat plugin, it doesn't display in Safari, Firefox and Edge. I get the following error:

Refused to load https://www.facebook.com/v5.0/plugins/custo.......... because it does not appear in the frame-ancestors directive of the Content Security Policy.

I have created a content-security-policy for my site in the .htaccess file, but it still doesn't work. In safari, Edge or firefox, but works in Chrome:

# always follow the symlinks
Options +SymLinksIfOwnerMatch -MultiViews -Indexes 

# X-Frame-Options to prevent clickjacking
Header always append X-Frame-Options SAMEORIGIN

# if you want to use mod_rewrite, set this 'On'
RewriteEngine On

<IfModule mod_fcgid.c>
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

# Added by me
# Apply a CSP to all HTML and PHP files
<FilesMatch "\.(html|php)$">
    Header set Content-Security-Policy "
        default-src 'self' *.googleapis.com *.facebook.com *.marchex.io;
        script-src 'self' *.cloudflare.com *.facebook.com *.marchex.io;
        font-src 'self' *.googleapis.com *.gstatic.com;
        img-src 'self' *.marchex.io ;
    object-src 'none';
    frame-ancestors 'self' *.facebook.com;
        child-src 'self' *.facebook.com;
</FilesMatch>

# Block pages from loading when they detect reflected XSS attacks
Header always append X-XSS-Protection: 1; mode=block

# Prevent browsers from incorrectly detecting non-scripts as scripts
Header always append X-Content-Type-Options: nosniff

# Only connect to this site via HTTPS for the two years (recommended)
Header always append Strict-Transport-Security: max-age=63072000

#End of added by me

The Policy does work. If I just set default-src 'self' it stops a lot of content loading.

These are my response headers....

 `Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-Q039=":443"; ma=2592000, h3-Q043=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-23=":443"; ma=2592000, h3-24=":443"; ma=2592000
Connection: Keep-Alive
Content-Encoding: br
Content-Length: 11870
Content-Security-Policy: 
Content-Type: text/html; charset=UTF-8
Date: Mon, 16 Dec 2019 20:04:04 GMT
Referrer-Policy: origin
Server: LiteSpeed
Strict-Transport-Security: max-age=63072000
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Powered-By: PHP/7.2.23
X-XSS-Protection: 1; mode=block`

Response Header from xfbml.customerchat.js

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-FB-Content-MD5
Alt-Svc: h3-24=":443"; ma=3600
Cache-Control: public,max-age=1200,stale-while-revalidate=3600
Content-Encoding: gzip
Content-Length: 73449
Content-MD5: 8glO44XsX1jOvEMLr37fng==
Content-Type: application/x-javascript; charset=utf-8
Date: Tue, 17 Dec 2019 16:51:17 GMT
ETag: "b96fb1ac645c4245492e2e35d1627232"
Expires: Tue, 17 Dec 2019 16:56:31 GMT
timing-allow-origin: *
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
x-fb-content-md5: e5d959939884b2030aba9a10101ef030
X-FB-Debug: X9f8fXUbI3MWGY8fKbKU98NkUhySqg+nshcn558TJFwxM2bgY4LaM8EjYRDH6Xh8IAqLfy9ogGBJxapQigrJMw==
X-Frame-Options: DENY

Response headers from customoerchat.php....

Alt-Svc: h3-24=":443"; ma=3600
Cache-Control: private, no-cache, no-store, must-revalidate
Connection: keep-alive
Content-Encoding: br
content-security-policy: default-src * data: blob: 'self';script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.facebook.com facebook.com *.fbcdn.net *.facebook.net *.spotilocal.com:* wss://*.facebook.com:* https://fb.scanandcleanlocal.com:* attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;
content-security-policy: frame-ancestors https://mobilityservicesdirect.co.uk;
Content-Type: text/html; charset="utf-8"
Date: Tue, 17 Dec 2019 16:51:32 GMT
Expires: Sat, 01 Jan 2000 00:00:00 GMT
facebook-api-version: v5.0
Pragma: no-cache
Strict-Transport-Security: max-age=15552000; preload
timing-allow-origin: *
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-FB-Debug: P15E80pV8ZDmxEWhS4vE6VS4t9QYOE6dWQE9fZmdN24rvueuAYl4SvNeTO5+6iSJpLNoBOHPO/mZWV4riQuKoQ==
X-XSS-Protection: 0

The website is here if it helps.

Any help greatly appreciated!

Neil White
  • 111
  • 4
  • 18
  • Try to set the "Referrer-Policy: origin" to the response headers. https://stackoverflow.com/questions/50064433/content-security-policy-error-coming-up-when-facebook-chat-into-website – Jannes Botis Dec 15 '19 at 21:31
  • Thanks, but I have tried this, was one of the posts I came across before I posted this. It didn't solve my problem. I set the header using PHP, like in the post. I'll try again. Or is there other ways of setting, like in my .htaccess file? – Neil White Dec 16 '19 at 14:45
  • Tried this. No success. – Neil White Dec 16 '19 at 20:07
  • I've created a dummy facebook page and set up messaging. Add this to my site and it works fine in Chrome and Safari. So this is pointing to the facebook page related to the business!?!?! – Neil White Dec 21 '19 at 14:49

1 Answers1

3

The frame-ancestors directive is about who is allowed to frame a certain page, in this case it is the CSP of the chat bot that prohibits your page to frame it. Applying a CSP on your page doesn't change that.

According to the Troubleshooting Tips on the bottom of this page https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/ you must:

  1. Check that the domain of the page the plugin is being rendered on has been whitelisted.
  2. Make sure you didn't set the Referrer-Policy header to no-referrer.
Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9
  • Thanks. The domain is definitely whitelisted as it works in Chrome. I haven't purposely set a Referrer Policy Header. How can I check this? – Neil White Dec 16 '19 at 14:43
  • Check the response headers on your page using developer tools (F12), network tab. It should be there among CSP, X-XSS-Protection, X-Content-Type-Options and the other headers you have defined. – Halvor Sakshaug Dec 16 '19 at 14:54
  • What are the headers sent in the Facebook chat plugin response, the CSP in that response could be revealing. – Halvor Sakshaug Dec 17 '19 at 08:09
  • I've added the headers. Had to get them from Chrome, as safari doesn't show anything. Also added the website. I appreciate your help. – Neil White Dec 17 '19 at 17:01