分类 前端 下的文章


<template>
  <div >
    日期：
    <el-config-provider :locale="locale">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </el-config-provider>
  </div>
</template>
 
<script lang="ts" setup>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ref } from "vue";
const date = ref()
const locale = zhCn,
</script>

安装依赖

pnpm install --save-dev rollup-plugin-obfuscator javascript-obfuscator

配置

// ...
import obfuscatorBox from 'rollup-plugin-obfuscator';

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import {ArcoResolver} from 'unplugin-vue-components/resolvers';
import obfuscatorBox from 'rollup-plugin-obfuscator';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        //...
        obfuscatorBox({
            global: true,
            options: {
                compact: true,
                controlFlowFlattening: true,
                controlFlowFlatteningThreshold: 0.75,
                numbersToExpressions: true,
                simplify: true,
                stringArrayShuffle: true,
                splitStrings: true,
                splitStringsChunkLength: 10,
                rotateUnicodeArray: true,
                deadCodeInjection: true,
                deadCodeInjectionThreshold: 0.4,
                debugProtection: false,
                debugProtectionInterval: 2000,
                disableConsoleOutput: true,
                domainLock: [],
                identifierNamesGenerator: "hexadecimal",
                identifiersPrefix: "",
                inputFileName: "",
                log: true,
                renameGlobals: true,
                reservedNames: [],
                reservedStrings: [],
                seed: 0,
                selfDefending: true,
                sourceMap: false,
                sourceMapBaseUrl: "",
                sourceMapFileName: "",
                sourceMapMode: "separate",
                stringArray: true,
                stringArrayEncoding: ["base64"],
                stringArrayThreshold: 0.75,
                target: "browser",
                transformObjectKeys: true,
                unicodeEscapeSequence: true,


                domainLockRedirectUrl: "about:blank",
                forceTransformStrings: [],
                identifierNamesCache: null,
                identifiersDictionary: [],
                ignoreImports: true,
                optionsPreset: "default",
                renameProperties: false,
                renamePropertiesMode: "safe",
                sourceMapSourcesMode: "sources-content",

                stringArrayCallsTransform: true,
                stringArrayCallsTransformThreshold: 0.5,

                stringArrayIndexesType: ["hexadecimal-number"],
                stringArrayIndexShift: true,
                stringArrayRotate: true,
                stringArrayWrappersCount: 1,
                stringArrayWrappersChainedCalls: true,
                stringArrayWrappersParametersMaxCount: 2,
                stringArrayWrappersType: "variable",
            },
            apply: 'build' // 仅在生产环境下使用
        }),
    ],
//...
})

安装 crypto-js

pnpm install crypto-js

代码

import * as CryptoJS from 'crypto-js';


export async function decryptText(text: string): Promise<string> {
    // 16进制
    const keyHex = "cb69976b953380e5ff637b0bf9af35fdf1a56815c81296b3e5314e506d209a05";
    const ivHex = 'a312cc7df85e4d26dc65fb4f3fe82919'
    // console.log(`text: ${text}`)
    // Convert hex strings to Uint8Array
    const keyArray = new Uint8Array(
        keyHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16))
    );
    const ivArray = new Uint8Array(
        ivHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16))
    );

    const encryptedData = hexStringToByteArray(text)

    // AES decryption using crypto-js
    const decryptedData = CryptoJS.AES.decrypt(
        {
            ciphertext: CryptoJS.enc.Hex.parse(
                Array.from(encryptedData).map(byte => ('0' + (byte & 0xFF).toString(16)).slice(-2)).join('')
            )
        },
        CryptoJS.enc.Hex.parse(
            Array.from(keyArray).map(byte => ('0' + byte.toString(16)).slice(-2)).join('')
        ),
        {
            iv: CryptoJS.enc.Hex.parse(
                Array.from(ivArray).map(byte => ('0' + byte.toString(16)).slice(-2)).join('')
            ),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
        }
    );

    return decryptedData.toString(CryptoJS.enc.Utf8)
}

(function () {
  var originalSend = XMLHttpRequest.prototype.send;
  var originalOpen = XMLHttpRequest.prototype.open;

  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
    this._url = url; // 保存请求 URL，可能在后面用到
    return originalOpen.apply(this, arguments);
  };

  XMLHttpRequest.prototype.send = function (body) {
    this.addEventListener('load', function () {
      if (this.status == 200 && this._url.includes('.m3u8')) {
        // 在这里处理响应
        console.log('Response from:bb ', this._url, 'Status:', this.status);
      }
    });

    return originalSend.apply(this, arguments);
  };
})();

生成加密key

openssl rand  16 > enc.key

生成IV

openssl rand -hex 16

新建enc.keyinfo，内容如下

enc.key
enc.key
191029d9c2d4e9051a8a5deb2f7f5c04

以加密hls.mkv为例

ffmpeg -i hls.mkv \
-codec:v libx264 \
-codec:a mp3 \
-map 0 \
-s 640x360 \
-hls_time 10 \
-hls_list_size 0 \
-hls_allow_cache 1 \
-hls_base_url http://localhost/videos/ \
-hls_segment_filename out%03d.ts \
-hls_key_info_file enc.keyinfo \
playlist.m3u8

新建html测试效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Encrypted Video Playback Test</title>
  <!-- Include video.js CSS -->
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet">

  <!-- Include video.js library -->
  <script src="https://vjs.zencdn.net/7.17.0/video.js"></script>
</head>
<body>

<video id="encrypted-video" class="video-js vjs-default-skin" controls width="640" height="360">
  <!-- Include an HLS source (replace with your encrypted m3u8 URL) -->
  <source src="/playlist.m3u8" type="application/x-mpegURL">
</video>

<script>
  // Initialize video.js
  var player = videojs('encrypted-video');

  // Add any additional configurations or event listeners if needed
</script>

</body>
</html>

python -m http.server 1089
  1. 1
  2. 2
  3. 3