chrome 浏览器 扩展应用开发的 CSP 问题解决

🌙
手机阅读
本文目录结构

chrome 扩展应用开发的时候;项目中为了维护方便,使用了阿里的 iconfont;的彩色图标;

如:

<script src="https://at.alicdn.com/t/font_k0d09a10gi3blnmi.js"></script>

加载外部的资源,chrome 会默认拒绝所加载的脚本;原因是,它违反了

“script-src ‘self’ blob: filesystem: chrome-extension-resource:”.

的内容安全策略;简称 CSP(chrome 解释:https://developer.chrome.com/extensions/contentSecurityPolicy)

原因分析:

chrome 扩展使用了下面这种扩展;

"manifest_version":2,

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

解决思路:

CSP 通过黑白名单的机制控制资源加载(或执行脚本)

在 Web 上,此策略是通过HTTP头或meta元素定义的。

在 Chrome 扩展系统中,不存在这两种方式。扩展是通过manifest.json文件定义的;

影响范围:

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

不执行Inline JavaScript

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

做开发的时候,有用过”juicer”这个 jquery 插件,用 each 循环的时候,也报标题的错误,改成字符串拼接,问题可以解决;

加载本地脚本和资源

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

但是通过manifest配置,好像也绕不过去;

一怒之下,直接改为相对路径的引用了;完美解决,这也许是google的规定把,为了避免风险,全部用包内的文件;

如果有解决的朋友,希望帮忙告知一下;谢谢;

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang