Chrome extension 中的 csp(content security policy) 开发小记

在进行Chrome拓展程序开发的时候,我们经常会遇到需要加载第三方库的情况,常见的如Jquery/Bootstrap库等,然而Chrome Extension的开发与一般网页不同,当我们在页面中加入如下代码时

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

我们希望看到的是拓展程序能够顺利加载jquery-2.2.2.min.js这个库文件,但是,当我们打开该拓展程序的chrome console控制台,发现出现了以下的错误:

Refused to load the script 
‘https://code.jquery.com/jquery-2.2.2.min.js’ because it violates the 
following Content Security Policy directive: “script-src ‘self’ blob: 
filesystem: chrome-extension-resource:”.

我们看到浏览器拒绝加载这个执行语句,因为它违反了Content Security Policy(简称CSP)机制,那什么是CSP机制呢?这里是Google官方给出的解释文档Content Security Policy (CSP)(自备梯子),想要了解更多可以参考另外几篇关于CSP的详细介绍:

An Introduction to Content Security Policy Content Security Policy Reference Content Security Policy Level 3

通过阅读上述文档,我们了解到,为了一些安全方面的原因,比如大规模的跨站点脚本攻击等问题,Chrome扩展系统已遵循 Content Security Policy (CSP)的理念,引入了严格的策略使扩展更安全,同时提供创建和实施策略规则的能力,这些规则被用来控制扩展(或应用)能够加载的资源和执行的脚本。

通常情况下,CSP通过黑白名单的机制控制资源加载(或执行脚本)。为您的扩展制定一个合理的策略以使您认真地考虑哪些资源是扩展需要的,并让浏览器确保仅仅这些资源是您的扩展需要访问的。 这些策略为您的扩展提供host permissions之外的额外安全保障;这是一个额外的一层保护,而不是一种取代。

在Web上,此策略是通过HTTP头或meta元素定义的。在Chrome扩展系统中,不存在这两种方式。扩展是通过manifest.json文件定义的:

{
        ...,
        "content_security_policy": "[POLICY STRING GOES HERE]"
        ...
}

同时需要注意的是:没有定义 manifest_version 的扩展安装包默认是没有内容安全策略的。只有manifest_version为2的扩展才会默认开启内容安全策略

由于CSP策略的影响,以下功能将被限制:

不执行Inline JavaScript Inline JavaScript和eval一样危险,将不会被执行,CSP规则将同时禁止内嵌

只加载本地脚本和资源 只有扩展包内的脚本和资源才会被加载!通过Web即时下载的将不会被加载! 这确保您的扩展只执行已经打包在扩展之中的可信代码,从而避免了线上的网络攻击者通过恶意重定向您所请求的Web资源所带来的安全隐患。

找到了原因,现在就可以对代码进行一些修改了,我们将jquery-2.2.2.min.js的源代码下载下来,保存到本地,然后把popup.html中的修改为

<script src="scripts/jquery-2.2.2.min.js"></script>

再打开chrome console看一下,发现错误信息已经没有了,再检查下Sources信息,发现jquery-2.2.2.min.js已成功被加载,看来成功了。

而在另外一种情况下ajax调用接口出现问题,我们需要在manifest_version添加白名单。

"content_security_policy": "script-src 'self' 'unsafe-eval' http://172.16.236.161:8099/queryByRequestid; object-src 'self'",
坚持原创技术分享,您的支持将鼓励我继续创作!