Vue.js 3 расширение перерывы при работе на "вью-интерфейс командной строки-Строй-Сервис" в связи с небезопасной-эвал


Vue.js 3 расширение перерывы при работе на "вью-интерфейс командной строки-Строй-Сервис" в связи с небезопасной-эвал

01.10.2020 07:52:32 Просмотров 11 Источник

Я разрабатываю расширение chrome с использованием vue 3, vue-router и vuex на основе проекта Kocal, который использует vue-cli под капотом. Я использовал, когда это было возможно, однофайловые компоненты с широким использованием Привязок vue. Все отлично работает в режиме разработки, но недавно я попытался создать приложение для производства и столкнулся с этой ошибкой при частичном рендеринге:

chunk-vendors.f6de00a6.js:11 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

После нескольких дней копания я понял, что либо webpack, либо Vue compiling system возятся с CSP, ссылаясь/вводя код через eval-скрипты. Поскольку я довольно новичок в этом деле, мне трудно читать, чтобы понять, что я могу сделать.

Я пробовал разные подходы:

  • определение псевдонима $vue для сборки во время выполнения только в vue.config.js (предположительно удаление небезопасного eval путем компиляции кода до выполнения, но заканчивающегося новой ошибкой: Uncaught TypeError: Object(...) is not a function для o=Object(n["withScopeId"])("data-v-21ae70c6");)
  • использование функции render() в корне
  • добавление "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", к manifest.json
  • переключаю компонент на render(), чтобы посмотреть, есть ли у меня больше шансов с частичным рендерингом, но в итоге ничего не отображается, хотя и есть консоль.журнал выполнения рендеринга.
  • Добавляя config, чтобы chainWebpack расщепление проявляется и встроенный манифест о Вью.конфиг

Что меня озадачивает, так это то, что я не могу избавиться от chunk-vendors.f6de00a6.js:11 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'". 0, в лучшем случае с частичным отображением, в худшем-с пустой страницей. Привязки, кажется, стряхиваются независимо, и использование маршрутизатора-ссылки для изменения страницы даст пустую страницу.

Edit: после копания в скомпилированном коде из webpack и установки minimize opt в false, похоже, ошибка исходит от поставщика: vue-i18n

У вопроса есть решение - Посмотреть?

Ответы - Vue.js 3 расширение перерывы при работе на "вью-интерфейс командной строки-Строй-Сервис" в связи с небезопасной-эвал / Vue.js 3 extension breaks while using "vue-cli-service build" due to unsafe-eval

Daniel

01.10.2020 08:53:00

eval, скорее всего, поступает из Webpack из-за проблемы с глобальным охватом.
см. ссылку для получения более подробной информации https://mathiasbynens.be/notes/globalthis

Не могли бы вы попробовать добавить эту конфигурацию в vue.config.js

module.exports = {
  configureWebpack: {
    node: {
      global: false
    },
    plugins: [
      new webpack.DefinePlugin({
        global: "window"
      })
    ]
  }
};
Является ответом!
ko0stik

24.11.2020 01:16:16

tl;dr: Проверьте свои зависимости/пакеты, включая те, которые, как вы думаете, они не используют unsafe-eval.

После того, как вы покопались во внутренних компонентах webpack и компонентах, построенных для vue3, вот выводы:

  • использование Однофайловых компонентов и конфигурации vue-cli по умолчанию-это нормально, так как ему действительно просто понадобится Vue runtime, так что никаких нежелательных unsafe-eval
  • webpack config как показано ниже работает:
  module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.DefinePlugin({
          global: "window" // Placeholder for global used in any node_modules
        })
      ]
    },
    ...
  };
// Note that this plugin definition would break if you are using "unit-mocha" module for vue-cli

В конце концов, проблема была в зависимости, которую я использовал для i18n vue-i18n@next, после удаления ее и переключения на способ i18n chrome она теперь работает.

Помочь в развитии проекта:
Закрыть X