内容安全政策：无法在Chrome扩展程序中加载Mixpanel

本文介绍了内容安全政策：无法在Chrome扩展程序中加载Mixpanel的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

过去一天我一直在为此付出努力，并且在线上有很少的资源可用于集成Chrome扩展和Mixpanel。我希望这个帖子能够引用人们在将Mixpanel整合到Chrome扩展程序时提及的内容。

我的Mixpanel集成的目标是能够使用我的内容脚本 content.js 以及我的 popup.js 跟踪事件（所以基本上）我有一个popup.html文件，它调用< script src =mixpanel.js>> ;< / script> 紧接在< / head> 标记之前。

在我的 mixpanel.js 文件中：

（function（e ，b）{if（！b .__ SV）{var a，f，i，g; window.mixpanel = b; a = e.createElement（script）; a.type =text / javascript; a。 ！异步= 0; a.src =（ https： 开头=== e.location.protocol HTTPS：： HTTP：）+'// cdn.mxpnl/libs/mixpanel-2.2.min的.js'; F = e.getElementsByTagName（ 脚本）[0]; f.parentNode.insertBefore（A，F）; b._i = []; b.init =函数（A，E，d）{功能f（b，h）{var a = h.split（。）; 2 == a.length&&（b = b [a [0]]，h = a [ 1]）; b [h] = function（）{b.push（[h] .concat（Array.prototype.slice.call（arguments，0）））}} var c = b;undefined！== typeof d？c = b [d] = []：d =mixpanel; c.people = c.people || []; c.toString = function（b）{var a =mixpanel ;mixpanel！== d&&（a + =。+ d）; b ||（a + =（stub））; return a}; c.people.toString = function（）{return c .toString（1）+。people（stub）}; i =禁用track track_pageview track_links track_forms注册register_once别名取消注册标识name_tag set_config people.set people.increment people.append people.track_charge people.clear_charges people.delete_user。 split（）; for（g = 0; g 当我点击我的扩展按钮并检查它时，控制台输出以下错误：

拒绝加载脚本'cdn.mxpnl/libs/mixpanel-2.2.min.js'，因为它违反了以下内容安全策略指令：script-srcself'cdn.mxpnl。

这是我的 manifest.json file：

permissions：[twitter/]， content_security_policy：script-src'self'cdn.mxpnl; object-src'self'

扩展程序需要在Twitter上运行。

我已阅读 Google编写的内容安全策略文档没有帮助

任何想法在这里做错了吗？任何帮助将非常感激！

解决方案

这里的问题是，Chrome不允许加载通过普通HTTP远程资源;只允许使用HTTPS：

由于中间人攻击既平凡又不可检测，它们[即<$

你的> http：]来源不会被接受。 mixpanel.js 脚本尝试加载 cdn.mxpnl/libs/mixpanel-2.2.min.js 而不是相应的 https：链接。为了解决这个问题，只需更改下列行：

a.src =（https：=== e.location.protocol ？https：：http：）+'// cdn.mxpnl/libs/mixpanel-2.2.min.js'

到：

a.src ='https：//cdn.mxpnl /libs/mixpanel-2.2.min.js'

目前正在加载 http： version，因为 window.location.protocol 是 chrome-extension：，而不是 HTTPS：。此更改只会强制加载 https：版本。

I've been struggling with this for the past day and there are little-to-no resources available online for integrating Chrome Extensions and Mixpanel. I'd like for this thread to by the one that people refer to when dealing with integrating Mixpanel into a Chrome extension.

The goal of my Mixpanel integration is to be able to track events both with my content script content.js as well as my popup.js (so basically across my whole extension)

I have a popup.html file that calls <script src="mixpanel.js"></script> right before the </head> tag.

In my mixpanel.js file is:

(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!== typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a, e,d])};b.__SV=1.2}})(document,window.mixpanel||[]); mixpanel.init("MY_TOKEN");

When I click on my extension's button and inspect it, the console outputs the following error:

Refused to load the script 'cdn.mxpnl/libs/mixpanel-2.2.min.js' because it violates the following Content Security Policy directive: "script-src 'self' cdn.mxpnl".

Here is the permissions section of my manifest.json file:

"permissions": ["twitter/"], "content_security_policy": "script-src 'self' cdn.mxpnl; object-src 'self'"

The extension needs to work on Twitter.

I've read the Content Security Policy doc that Google wrote which has not been helpful

Any idea what I'm doing wrong here? Any help would be very appreciated!

解决方案

The problem here is that Chrome doesn't allow extensions to load remote resources over plain HTTP; only HTTPS is allowed:

As man-in-the-middle attacks are both trivial and undetectable over HTTP, those [i.e., http:] origins will not be accepted.

Your mixpanel.js script attempts to load cdn.mxpnl/libs/mixpanel-2.2.min.js instead of the corresponding https: link. To fix this, simply change the line:

a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl/libs/mixpanel-2.2.min.js'

to:

a.src='cdn.mxpnl/libs/mixpanel-2.2.min.js'

It's currently loading the http: version because window.location.protocol is chrome-extension:, rather than https:. This change simply forces loading of the https: version always.