如何更改内容安全策略指令以允许 addThis 小部件？答案

【问题标题】：How to change Content Security Policy directive to allow for addThis widget?如何更改内容安全策略指令以允许 addThis 小部件？
【发布时间】：2019-01-03 12:29:16
【问题描述】：

我正在制作一个使用 webpack 的网站。
我即将推出它，我想穿上addThis 分享小部件。我按照addThis 的建议在关闭正文标记之前在index.html 中添加addThis 代码。像这样：

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

这会在 chrome-inspect 控制台中生成以下错误：

拒绝加载脚本
'http://s7.addthis.com/js/300/addthis_widget.js' 因为它违反了
以下内容安全策略指令：“script-src 'self'”。

我已经阅读了一些内容，但将 addThis 分离到另一个 js 文件并将其保存在本地以将其加载到 DOM 似乎不起作用。

我尝试将此添加到我的manifest.json：

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

没有成功。有没有办法覆盖 CSP 设置以允许 addThis-widget？

【问题讨论】：

标签： javascript html addthis

【解决方案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;">

将此添加到您的标题将允许加载 addthis 小部件。可能不安全，这将违背 Content-Security-Policies 的目的......

【讨论】：

【解决方案2】：

如果可用，我总是通过.htaccess 设置我的 CSP。

这里有一些很好的提示：https://content-security-policy.com/

您基本上就在那里，但不确定它如何与 manifest.json 一起使用。

在.htaccess中尝试类似的：

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

.htaccess 文件需要注意的一些事项：https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file

此外，使用 CSP，您将需要指定您基本上使用的所有外部资源。

值得更详细地研究 CSP，并了解您使用的所有各种图像、字体等来源。

有任何问题，请告诉我，我会进一步扩展。

【讨论】：