Content Security Policy: Chrome扩展中无法加载Google API

简介

Content Security Policy (CSP)，即内容安全策略，是一种Web安全策略，用于防止跨站脚本攻击（XSS）和数据注入攻击等安全漏洞。在Chrome扩展程序中，CSP也起到了类似的作用，它限制了扩展程序可以从哪些地址加载资源。

然而，在使用Google API时，我们可能会遇到一个问题：Chrome扩展程序无法加载Google API，因为Google API的网址不在默认的CSP白名单之内。本文将详细介绍这个问题，并提供解决方案。

问题描述

当我们在扩展程序中使用Google API时，例如在popup.html中引入以下代码：

<script src="https://apis.google.com/js/platform.js"></script>

然后我们在浏览器中打开扩展程序，点击扩展程序图标，发现控制台报错：

Refused to load the script 'https://apis.google.com/js/platform.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

这是因为Chrome扩展程序默认只允许从扩展程序自身和一些特定地址加载资源，如上述错误信息所示，它只允许从'self'加载脚本，而不允许从'https://apis.google.com'加载。

解决方案

1. 添加Google API的源到CSP白名单

我们可以通过在manifest.json文件中添加content_security_policy选项来修改CSP策略。在这里，我们需要将Google API的网址添加到script-src指令中。

{
    "name": "my extension",
    "version": "1.0",
    ...
    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"
}

这样就允许扩展程序从'https://apis.google.com'加载脚本了。

2. 使用本地存储的API文件

我们还可以将Google API下载到本地，然后从本地文件夹加载它，以避免直接从网络上加载。这种方法的好处是不需要改变CSP策略，因此更加安全。

首先，我们需要下载Google API文件：

$ wget https://apis.google.com/js/platform.js

然后，在popup.html文件中引入该文件：

<script src="platform.js"></script>

这样就可以从本地文件夹加载Google API了。

结论

在Chrome扩展程序中使用Google API时，由于默认的CSP策略限制，我们可能会遇到无法加载Google API的问题。为了解决这个问题，我们可以通过修改CSP策略或者使用本地存储的API文件来达到目的。无论哪种解决方案，都需要考虑到安全性和实际需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30058