devtools可以在生产环境下被打开

liyongbj commented 1 year ago

Vue devtools version

6.5.0

Link to minimal reproduction

https://github.com/hzmming/vue-force-dev/blob/master/detector.js

Steps to reproduce & screenshots

为chrome安装"Vue.js Devtools 6.5.0" 和 "Vue Force Dev 1.1.0"两个浏览器扩展。
在chrome中打开一个使用了vue开发的生产环境的地址，如：https://vuejs.org/ 或 https://www.bilibili.com/
按F12打开浏览器调试工具，可以看到devtools被打开，components、timeline、vuex一览无余。
关闭或卸载“Vue Force Dev”扩展程序，再打开上述生产环境地址，按F12打开浏览器调试工具，devtools不会被打开。

What is expected?

生产环境下，设置了Vue.config.devtools=false，无论如何devtools都不应该可以被打开。因为这势必导致可能存在的安全风险更容易被暴漏和前端页面逻辑被猜测甚至破解。

What is actually happening?

即便是设置了Vue.config.devtools=false，只要安装并开启了Vue Force Dev 1.1.0扩展程序，devtools都是可以被轻松打开的。

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 13.54 GB / 47.77 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1928.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: 2.7.14 => 2.7.14

Any additional comments?

根据打开的生产环境信息来看，vue2和vue3都存在上述问题，因为"Vue Force Dev 1.1.0"对vue2和vue3都做了crack。
虽然，在某些情况下，Vue Force Dev确实有助于排查与自己相关的线上问题，但是另外一方面也容易被无聊的人利用，导致vue程序更容易暴漏风险。
"Vue Force Dev"扩展的开源地址：https://github.com/hzmming/vue-force-dev/tree/master
我不是该开源插件的作者。

DuckBurnIncense commented 1 year ago

个人理解, 前端应该仅作为向用户展示信息和交互的工具, 不应该 (只) 在前端做关于安全方面的校验或在前端存储应该保密的 API Keys 等. 重要的逻辑和应该保密的信息等应该在后端处理. 再者, 即使将 Vue Force Dev 拓展使用的方法封禁, 前端 (打包后的) 源码依然可以被用户下载. 如果不怀好意的人想知道前端里的重要信息一样可以通过阅读源码来获得, 只是稍微麻烦一点而已. (我就这样对一些 Webview 套壳 Android apps 做过, 还抓包改了前端源代码获得了一些权限. 这些软件就是安全校验只在用户端进行的反面教材). 综上, 我认为封禁 Vue Force Dev 拓展使用的方法没有太大的意义.

liyongbj commented 1 year ago

@DuckBurnIncense 感谢。我明白你的意思，对于存心想破解的人来说确实意义不大，就像代码混淆对于想深入代码逻辑的人一样没有作用。但是对于常规场景终归还是有一定作用。我太熟悉react，但是我发现react即便是在开发者工具下也只能看到各种缩写简写，对于理解还是需要一些难度的，目的是对大多数(而不是全部的)不怀好意的人有阻止作用就够了。还是希望vue或者vue-tools能给一些缓解方案。

diudiudiuu commented 1 year ago

我这边的项目一直都是生产环境的 devtools工具都可以打开用的vite

我这边尝试解决了一下,有两个方案

方案一

我的打包命令
"build:prod": "vite build --mode prod",

更换为下面这个就好了
"build:prod": "vite build --mode production",

这个方案奇怪就在与我的打包mode配置文件名字还影响环境变量?? 是个很奇怪的问题

方案二

env.prod 文件中指定,然后打包就不会有该问题
NODE_ENV=production

解决就是把 NODE_ENV 变为 production 就好了不过要注意 import.meta.env.VITE_USER_NODE_ENV, 项目中是否有使用这俩是同一个值,可以去看vite文档

Snipaste_2023-08-26_22-16-52

重点

devtools 单独可以解决 Vue Force Dev 两个同时用,无法解决

huhuime commented 1 year ago

vue2基本没戏，主动暴露了各个对象的vue内容，升vue3吧，把唯一的__vue_app__藏闭包里呗

vuejs / devtools-v6