I'm trying to use Content-Security-Policy (CSP) headers for a site that has social media buttons (youtube, twitter, facebook). However these widgets run scripts on a poorly specified list of 3rd party sites. The social media sites don't specify all the sites their scripts will access and so you need to run your page and one-by-one look and see the domains that were blocked, then add them to the CSP header.
This seems very fragile. If the social media sites change their scripts and add new domains, the page will break because the browser will block access to the new domain.
CSP is very effective in stopping XSS, but it seems social media sites do not provide buttons / widgets designed to work with it. At a minimum, they should require only ONE domain and should specific what that domain is.
I end up with a CSP header like:
Content-Security-Policy: default-src 'self' https://www.google.com http://csi.gstatic.com http://www.google-analytics.com https://apis.google.com https://accounts.google.com https://platform.twitter.com https://www.youtube. com http://platform.twitter.com; img-src 'self' data: https://www.google.com http://www.google-analytics.com http://ssl.gstatic.com https://ssl.gstatic.com data:; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com data:
Is there a better way to do this?
