javascript – 内容安全政策:无法在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.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/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

当我单击我的扩展按钮并检查它时,控制台输出以下错误

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

这是我的manifest.json文件的权限部分:

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

扩展需要在Twitter上运行.

我已经阅读了谷歌写的那篇没有帮助的Content Security Policy doc

知道我在这里做错了吗?任何帮助将非常感谢!

最佳答案
这里的问题是Chrome不允许扩展程序加载remote resources over plain HTTP;仅允许HTTPS:

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

您的mixpanel.js脚本尝试加载http://cdn.mxpnl.com/libs/mixpanel-2.2.min.js而不是相应的https:链接.要解决此问题,只需更改行:

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

至:

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

它目前正在加载http:version,因为window.location.protocol是chrome-extension:而不是https:.此更改只是强制加载https:版本.

相关文章

什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据...
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:...
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面