Question

我在使用Facebook Chat插件时遇到问题，该插件在Safari，Firefox和Edge中无法显示。我收到以下错误：

拒绝加载https://www.facebook.com/v5.0/plugins/custo ..........，因为它没有出现在内容安全策略的frame-ancestors指令中。

我已经在.htaccess文件中为我的网站创建了内容安全策略，但是仍然无法正常工作。在Safari，Edge或Firefox中使用，但在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

该政策有效。如果我仅将default-src设置为“ self”，则会停止加载很多内容。

这些是我的响应标题。...

 `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`

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

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

如果有帮助，该网站为here。

任何帮助都将不胜感激！

Answer 1

frame-ancestors指令是关于允许谁对某个页面进行构架的，在这种情况下，聊天机器人的CSP禁止您对页面进行构架。在页面上应用CSP不会改变这一点。

根据此页面https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/底部的故障排除提示，您必须：

检查在其上呈现插件的页面的域是否已列入白名单。
确保您没有将Referrer-Policy标头设置为no-referrer。

Answer 2

很抱歉将其发布为答案。我没有足够的声誉来发表评论。

我在Chrome中打开了该网站，但在这里也无法正常工作。

确保提供的页面ID正确。

This线程也可能有用。

内容安全策略.htaccess框架祖先

2 个答案: