I'm loading an angular app uploaded on firebase in facebook webview. Getting refused to frame error for both API and view. I have put meta tags in index.html too.
ERROR:
HTML Rendor Error
[Report Only] Refused to frame 'https://yyyyyyy/' because it violates the following Content Security Policy directive: "frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com".
VM346 referer_frame.php:1 [Report Only] Refused to frame 'https://yyyyyyyy/' because it violates the following Content Security Policy directive: "frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com".
API calling blocked error
zone-evergreen.js:2845 Refused to connect to 'https://xxxxxxxx' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
I have added following meta tags to index.html
META TAGS: API URL: https://xxxxxx/ Firebase URL: https://yyyyyy/
<meta http-equiv="Content-Security-Policy" content="frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com https://yyyyyy/ frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' https://xxxxxx/">
Thanks for the help :)
Facebook has a CSP which prohibits insert iframes into his pages. The error:
belongs this facebook's CSP, this has already been figured out here.
Please note that this CSP violation presented even before you added the meta tag.
Anyway there is no way to mitigate third-party CSP by adding your own. Your CSP acts inside your iframe, but the main page (*.facebook.com) will follow facebook's CSP.