Vue.js в расширении Chrome

Привет! Я пытаюсь сделать расширение Chrome с помощью Vue.js, но когда я пишу

<input v-model="email" type="email" class="form-control" placeholder="Email">

Chrome удаляет часть кода v-модели и делает ее

<input type="email" class="form-control" placeholder="Email">

Есть ли способ предотвратить это?

Ответ 1

У вас есть версия csp (Vue.js v1)

CSP-совместимая сборка

Некоторые среды, такие как Google Chrome Apps, применяют политику безопасности контента (CSP) и не позволяют использовать новую функцию() для оценки выражений. В этих случаях вы можете использовать CSP-совместимую сборку.

(Vue.js v1) http://v1.vuejs.org/guide/installation.html#CSP-compliant-build

npm install [email protected] --save

"dependencies": {
  "vue": "1.0.26-csp"
}

Новая версия (Vue.js v2) https://vuejs.org/v2/guide/installation.html#CSP-environments

В некоторых средах, таких как Google Chrome Apps, применяется политика безопасности контента (CSP), которая запрещает использование новой функции() для оценки выражений. Отдельная сборка зависит от этой функции для компиляции шаблонов, поэтому она непригодна для использования в этих средах.

Однако есть решение. При использовании Vue в системе сборки с помощью Webpack + vue-loader или Browserify + vueify ваши шаблоны будут предварительно скомпилированы в функции рендеринга, которые отлично работают в средах CSP.

Ответ 2

Я предполагаю, что вы использовали код типа new Vue(...) в своей реализации, поскольку этот вопрос сказал.

Помните по умолчанию CSP в расширении chrome, eval и связанные с ним функции отключены.

Код, подобный приведенному ниже, не работает:

alert(eval("foo.bar.baz"));

window.setTimeout("alert('hi')", 10);

window.setInterval("alert('hi')", 10);

new Function("return foo.bar.baz");

Таким образом, решение будет

1. Ослабление политики по умолчанию.

В соответствии с описанием Оцененный JavaScript,

Политика против eval() и ее родственников, таких как setTimeout(String), setInterval(String) и new Function(String), может быть смягчена добавлением 'unsafe-eval' к вашей политике:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Однако в руководстве также упоминается, что

мы настоятельно рекомендуем не делать этого. Эти функции пресловутые векторы атаки XSS.

2. Использование CSP-совместимой сборки. (Рекомендуется)

Как показано на странице страницы Vue.js,

В некоторых средах, таких как Google Chrome Apps, применяется политика безопасности контента (CSP) и не допускается использование new Function() для оценки выражений. В этих случаях вы можете использовать