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/dashboard to customize your tools -->
  <script type="text/javascript" 
  src="//s7.addthis/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
'.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' .js; object-src 'self'"

No success. Is there a way to override CSP settings 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./dashboard to customize your tools -->
  <script type="text/javascript" 
  src="//s7.addthis./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./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./js/300/addthis_widget.js; object-src 'self'"

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

• javascript
• html
• addthis

• Can you change your .htaccess? – Adam Commented Jul 26, 2018 at 13:28
• 1 "On the web, such a policy is defined via an HTTP header or meta element. Inside Chrome's extension system, neither is an appropriate mechanism. Instead, an extension's policy is defined via the extension's manifest.json" – str Commented Jul 26, 2018 at 13:30

2 Answers 2

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

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

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

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

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.

Some things to be aware of with .htaccess files: https://www.digitalocean./munity/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.