Question

我正在制作一个使用webpack的网站。
我即将启动它，我想戴上addThis共享小部件。我正在按照addThis的建议在关闭body标签之前，在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？

Answer 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小部件。可能不安全，这将破坏内容安全策略的目的...

Answer 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，并了解您使用的所有图像，字体等各种来源。

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

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

2 个答案: