内容安全策略:无法在Chrome扩展中加载Mixpanel
Content Security Policy: cannot load Mixpanel in Chrome extension
我在过去的一天里一直在努力解决这个问题,网上几乎没有可以集成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<i.length;g++)f(c,i[g]);b._i.push([a,
e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
mixpanel.init("MY_TOKEN");
当我点击扩展的按钮并检查它时,控制台输出以下错误:
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上工作。
我已经读了谷歌写的内容安全政策文档,但没有什么帮助
你知道我哪里做错了吗?任何帮助将非常感激!
这里的问题是Chrome不允许扩展通过普通HTTP加载远程资源;只允许HTTPS:
由于中间人攻击在HTTP上既微不足道又无法检测,因此那些[即
http:
]来源将不被接受。
您的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:
版本,因为window.location.protocol
是chrome-extension:
,而不是https:
。这个变化只是强制加载https:
版本。
以上答案不完整。你还得再做一件事。
步骤1:添加HTTPS
按照另一个答案告诉你的去做,改变mixpanel代码,改变
http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js
来
https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js
步骤2:修改manifest.json
中的内容安全性更新manifest.json
中的content_security_policy
属性:
{
...,
"content_security_policy": "script-src 'self' https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js; object-src 'self'",
...
}
放宽默认内容安全策略。
步骤3[可选]:添加Google Analytics
如果你也想要谷歌分析,你可以这样添加它:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js; object-src 'self'",
...
}
我学会了如何做到这一点,从谷歌自己的教程如何添加谷歌分析。
你可以使用这个脚本从自定义url加载mixpanel。
<script>
window.MIXPANEL_CUSTOM_LIB_URL = 'lib/mixpanel/mixpanel.js';
</script>
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- chrome扩展更改主机/域警告
- 如何在chrome扩展中重定向到html页面
- Chrome扩展没有't在重新加载之前考虑期权价值
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- 试图阻止Chrome通过扩展关闭
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 从选项页面更新chrome扩展清单权限
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- Chrome扩展:遍历不同的页面并收集数据
- Chrome扩展 chrome.storage 如何同时进行大量获取和设置并避免竞争条件
- Chrome扩展:Chrome.tabs.executeScript不工作
- 中的访问扩展chrome://extensions页
- 如何在扩展Chrome DevTool时检索请求的启动器
- Chrome扩展-Chrome报警API为创建的每个新报警重新安排所有报警
- 是否有任何方法来扩展chrome's __commandLineAPI
- 谷歌Chrome扩展Chrome .tab . onupdate . addlistener
- 创建在页面上注入脚本的扩展chrome内容
- Chrome扩展:Chrome扩展中未定义的变量,即使它存在于控制台中