前端 - Vite+Vue3，怎样实现标签的内容加密，不是代码混淆 ？

Question

用Vite+vue3写一个小项目，不想数据明文出现在编译后的js文件中。

比如使用组件:

<MyComponent>  
    <div>Hello</div>
    <div>World</div>
</MyComponent>

这个MyCouponent组件默认插槽会写正常的HTML标签内容。

想在Vite编译阶段加密，比如这个示例里的Hello与World这两个字符串，实现编译输出的js文件里是密文，在浏览器看的时候看明文（会要求登录后看到明文）。

尝试了一些代码混淆方案，都是只混淆代码，Hello与World还是明文。

现在需求是混淆或者加密数据，代码逻辑可以不混淆。

Answer 1

可以搜一下ROT47，编译时先混淆，再加密一下，在运行时包一个IIFE自动解密

Answer 2

在Vite+Vue3项目中实现内容加密（特别是针对模板中的静态文本），而不是仅仅代码混淆，确实需要一些不同的策略，因为Vue模板通常是直接转换为渲染函数或VDOM，并不会经过传统的“编译”过程来加密字符串。不过，你可以通过几种方法来实现你的需求：

1. 服务器端渲染和加密

一种常见的方法是使用服务器端渲染（SSR）并在服务器端对内容进行加密。当用户请求页面时，服务器解密内容并将其发送到客户端。Vue 3 支持服务器端渲染，但你需要使用Nuxt.js等框架来更容易地实现这一点。

2. 客户端解密

如果你仍然希望在客户端显示内容，但又不希望这些内容以明文形式出现在JS文件中，你可以考虑以下步骤：

a. 加密内容

在服务器端或构建时，将需要加密的文本（如"Hello"和"World"）进行加密，并将加密后的密文存储在环境中或构建产物中（如JSON文件）。

b. Vue组件中使用密文

在Vue组件中，你可以通过异步请求或直接从构建产物中读取加密的文本。然后，使用JavaScript中的加密库（如CryptoJS）来解密这些文本，并在Vue模板中渲染解密后的内容。

示例

假设你有一个服务或构建脚本来加密文本，并将加密后的结果存储在一个JSON文件中。

encrypted-texts.json

{
  "hello": "加密后的Hello",
  "world": "加密后的World"
}

Vue组件

<template>
  <div>
    <div>{{ decryptedHello }}</div>
    <div>{{ decryptedWorld }}</div>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';
import encryptedTexts from './encrypted-texts.json';

export default {
  data() {
    return {
      decryptedHello: '',
      decryptedWorld: ''
    };
  },
  created() {
    this.decryptText('hello');
    this.decryptText('world');
  },
  methods: {
    decryptText(key) {
      const cipherParams = CryptoJS.lib.CipherParams.create({
        ciphertext: CryptoJS.enc.Base64.parse(encryptedTexts[key])
      });
      const decrypted = CryptoJS.AES.decrypt(
        cipherParams,
        'your-secret-key-123' // 加密时使用的密钥
      );
      this[`decrypted${key.charAt(0).toUpperCase()}${key.slice(1)}`] = decrypted.toString(CryptoJS.enc.Utf8);
    }
  }
};
</script>

注意事项

• 安全性：确保你的加密密钥安全，并且不要将其硬编码在客户端代码中。
• 性能：解密操作可能对客户端性能有一定影响，尤其是在解密大量文本时。
• 同步与异步：如果解密操作较慢，考虑使用异步方法来避免阻塞UI渲染。

这种方法虽然可以实现你的需求，但需要注意管理好密钥和加密数据的安全性。同时，确保加密和解密操作不会成为性能瓶颈。