How to change Content Security Policy directive to allow for addThis widget?

问题

I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:

  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" 
  src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra- 
  ###MY_NUMBERS###"></script>
</body>

this generates the following error in chrome-inspect console:

Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".

I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.

I tried add this to my manifest.json:

"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"

No success. Is there a way to override CSP settings to allow for addThis-widget?

回答1:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe- 
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self' 
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src 
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src 
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">

Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...

回答2:

I always set my CSP through the .htaccess if it's available.

Here are some good tips: https://content-security-policy.com/

You're basically there, but unsure how it works with manifest.json.

Try similar in .htaccess:

Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com

Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file

Also, using a CSP, you will need to specifiy all the external sources you use basically.

It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.

Any problems, let me know and I'll expanded further.

来源：https://stackoverflow.com/questions/51540029/how-to-change-content-security-policy-directive-to-allow-for-addthis-widget

标签

javascript

html

addthis