Политика безопасности контента: невозможно загрузить Mixpanel в расширении Chrome

Я боролся с этим в течение последнего дня, и в Интернете практически нет ресурсов для интеграции расширений 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.

Я прочитал документ о политике безопасности контента, написанный Google, но он мне не помог.

Любая идея, что я делаю неправильно здесь? Любая помощь будет очень признательна!


javascript google-chrome google-chrome-extension google-chrome-devtools mixpanel
person Zack Shapiro    schedule 05.04.2013    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Проблема здесь в том, что 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'

to:

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

Сейчас загружается версия http:, потому что window.location.protocol это chrome-extension:, а не https:. Это изменение просто вызывает загрузку версии https: всегда.

person apsillers    schedule 05.04.2013
comment
@Apsilers, большое спасибо. Я надеюсь, что это поможет другим, кто сталкивается с этим. Собираюсь также перенаправить на Mixpanel, чтобы он был в их базе знаний. - person Zack Shapiro; 05.04.2013
comment
@ZackShapiro Я думаю, что еще более общим решением было бы изменить троицу на ("https:"===e.location.protocol||"chrome-extension:"===e.location.protocol?"https:":"http:"), чтобы она автоматически использовала https: для расширений Chrome и страниц HTTPS, но использовала http: во всех остальных случаях. - person apsillers; 05.04.2013
comment
@ZackShapiro, я столкнулся с той же проблемой, что и вы - у вас есть полный образец вашего popup.js, content.js и манифеста (или ссылка на код?) Я пытаюсь выяснить, что я делаю неправильно - person Sherwin Yu; 29.07.2013

arrow_upward
5
arrow_downward

Вышеприведенный ответ неполный. Вы должны сделать еще одну вещь.

Шаг 1. Добавление HTTPS

Сделайте то, что вам сказал другой ответ, измените код микспанели, измените http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js на https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js

Шаг 2. Изменение безопасности контента в вашем manifest.json

Обновите свойство content_security_policy в вашем manifest.json: { ..., "content_security_policy": "script-src 'self' https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js; object-src 'self'", ... }

Это ослабляет политику безопасности содержимого по умолчанию.

Шаг 3 [необязательно]: добавление Google Analytics

Если вы также хотите использовать 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'", ... }

Я узнал, как это сделать, из руководства Google по как добавить Google Analytics.

person Jonathan Leung    schedule 27.12.2014

arrow_upward
0
arrow_downward

Вы можете использовать этот скрипт для загрузки mixpanel с пользовательского URL-адреса.

<script>
  window.MIXPANEL_CUSTOM_LIB_URL = 'lib/mixpanel/mixpanel.js';
</script>
person alexeybondarenko    schedule 04.07.2015
comment
как вы предоставляете свой токен? - person grant; 18.11.2015