如何允许内容安全策略从 google api 运行外部 javascript？

【问题标题】：How to allow content security policy to run external javascript from google api?如何允许内容安全策略从 google api 运行外部 javascript？
【发布时间】：2020-03-19 13:48:05
【问题描述】：

这是我当前应用的 script-src 内容安全策略：

script-src 'self' 'unsafe-inline' https://maps.googleapis.com https://maps.gstatic.com;

正在尝试加载以下外部 js 代码：

https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=places&language=he

使用 unsafe-inline 它可以工作，但可能不安全，所以我想在我的代码中删除它，但它不允许脚本运行。尝试向 script-src 添加一个值，例如https://maps.googleapis.com/*，但它仍然不起作用。如何允许来自特定域的脚本？

【问题讨论】：

标签： javascript html reactjs google-maps content-security-policy

【解决方案1】：

我遇到了同样的问题，但能够通过使用 hash 和 https://*.googleapis.com 列入白名单来解决它。

script-src 指令允许开发人员将特定的内联列入白名单通过将其哈希指定为允许的脚本来源来编写脚本。

使用很简单。服务器计算特定的哈希值脚本块的内容，并包括该脚本块的 base64 编码 Content-Security-Policy 标头中的值。

例如：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-...4aQo=' https://*.googleapis.com">

请注意，对于动态应用程序，最好使用nonce。

希望这会有所帮助！

【讨论】：