首页 > 其他分享 >【前端开发】代码上传前怎么避免把 账号,密码,AppId, key 之类私密信息 提交上去

【前端开发】代码上传前怎么避免把 账号,密码,AppId, key 之类私密信息 提交上去

时间:2024-12-29 22:08:10浏览次数:5  
标签:文件 git const 提交 信息 敏感 key AppId 前端开发

平时我们写代码的时候难免会有一些私密信息不行提交到git仓库上去,比如 账号,密码,AppId, key 之类不希望公开的信息,但是提交代码难免会有疏漏的时候,对此我们可以写个 githook 来协助我们进行检查。

目的

在Git提交操作前,对即将提交的文件进行全面扫描,检查其中是否存在预设的敏感信息,防止敏感数据不慎进入版本控制系统,有效维护项目的安全性与保密性。

比如我们现在这么一段代码

const mysql = require("mysql");
const pool = mysql.createPool({
  host: "jyeontuHost",
  user: "jyeontuUser",
  password: "jyeontuPassword",
  database: "jyeontuDatabase",
  port: 3306,
  multipleStatements: true, // 多语句查询
});

假设其中的用户名(jyeontuUser) 和密码(jyeontuPassword) 是敏感信息,我们不想这两个信息直接提交到git仓库,所以希望在提交代码的时候可以检测一下是不是包含敏感信息,包含敏感信息的话就中断commit 通知我们进行整改,整改后再重新提交。

效果展示

commit的时候检测到提交的文件中包含有敏感信息时,会中断commit,并在控制台打印包含敏感信息的文件路径及行号,可以帮助我们快速定位到敏感信息的位置。

代码实现

1、指定脚本解释器

作为一名前端开发,我们可以使用node 来写一个githook

#!/usr/bin/env node

2、引入必要模块

const child_process = require("child_process");
const fs = require("fs");

这里引入了child_process模块,用于在Node.js环境中执行外部命令,如git status;fs模块则提供了一系列与文件系统交互的方法,包括读取文件内容、检查文件是否存在等操作,是后续处理文件的关键。

3、获取Git状态信息

const command = "git status";
const trimReg = /(\ +)|([ ])|([\r\n]|(["]))/g;
let commitFile = child_process.execSync(command).toString();
commitFile = commitFile.split("\n").filter((item) => item);

首先定义了要执行的git status命令字符串,然后通过execSync同步执行该命令,并将输出转换为字符串存储在commitFile中。接着,按换行符将其分割为数组并过滤掉空行,得到一个更清晰的文件状态信息数组,为后续解析做准备。

4、解析文件列表

const fileList = [];
let index = 0;
while (
  commitFile[index]!== "Changes to be committed:" &&
  index < commitFile.length
)
  index++;
for (let i = index; i < commitFile.length; i++) {
  const name = commitFile[i].trim().split(":")[1];
  if (!name) continue;
  if (name.includes("->")) {
    fileList.push(decodeURI(name.split("->")[1].replace(trimReg, "")));
    continue;
  }
  fileList.push(decodeURI(name.replace(trimReg, "")));
}

我们需要检查的是Changes not staged for commit状态的文件

从commitFile数组中提取出即将提交的文件列表。先通过while循环找到"Changes to be committed:"所在索引,确定要处理的文件信息起始位置。然后在for循环中,对每一行文件信息进行处理,提取文件名(处理了文件重命名情况),并使用decodeURI解码后添加到fileList数组,得到完整的待提交文件列表。

5、检查敏感信息

//敏感信息列表
const sensitiveInformationList = [
  "jyeontu的密码",
  "jyeontu的AppId",
  "jyeontu的账号",
];

const editFiles = [];
for (const file of fileList) {
  if (!fs.existsSync(file)) continue;
  const fileTxt = fs.readFileSync(file, "utf8").split("\n");
  for (let textLine = 0; textLine < fileTxt.length; textLine++) {
    const txt = fileTxt[textLine];
    for (const sensitiveInformation of sensitiveInformationList) {
      if (txt.includes(sensitiveInformation)) {
        editFiles.push(
          `\x1b[31m${file}:${textLine + 1}\x1b[0m -> ${sensitiveInformation}`
        );
      }
    }
  }
}

需要我们先定义好敏感信息列表,包含常见的敏感数据关键词。然后通过嵌套循环,遍历文件列表中的每个文件。对于存在的文件,读取其内容并逐行检查,若某行包含敏感信息列表中的任何一项,则将包含文件名、行号(红色字体显示以突出)和敏感信息的格式化字符串添加到editFiles数组,记录所有存在敏感信息的位置。

6、处理检查结果

if (editFiles.length > 0) {
  console.log("请删除敏感信息后再次提交:");
  console.log(editFiles.join("\n"));
  process.exit(1);
}
process.exit(0);

最后根据editFiles数组长度判断是否发现敏感信息。若有敏感信息(editFiles.length > 0),则输出提示信息及详细敏感信息位置,以非零状态码退出脚本,阻止Git提交;若未发现(editFiles.length === 0),则正常退出脚本,允许Git提交。

钩子使用

1、钩子目录

找到当前项目更目录下的.git 目录,里面有一个hooks 目录,这里便是我们存放钩子函数的目录。

2、拉取钩子代码

目前该钩子的模板我已经集成到了我自己的cli 工具中,大家可以通过cli 快速拉取

安装cli

npm i -g jyeontu

拉取钩子模版

jyeontu add

拉取后可以看到这么一个文件

3、修改敏感信息列表

拉取完钩子模板后,我们需要将敏感列表修改成我们自己需要检测的内容:

改完保存之后再重新提交代码就会触发内容检测了。

更优做法

其实正常情况下我们不应该将这些配置信息分散写在各个文件中,这样不好管理,修改起来也麻烦,通常我们都会将配置信息抽离成一个配置文件。
1、抽离配置文件

比如上面用到的mysql 相关配置

2、配置.gitignore

整个文件都不想提交的话我们配置好.gitignore就行

serve/dbConfig.js

3、移除文件跟踪

当然,有的时候我们还是要上传一份config 配置文件模板到仓库,便于用户修改自己的配置信息,这种时候我们就不可以直接在.gitignore 里面忽略文件了。

我们可以先写一份不包含敏感信息的配置文件模板上传到仓库中,然后再将其移除版本控制,这样后面即使文件的实际内容可能已经发生了变化,Git 也会将其视为未更改状态

git update-index --assume-unchanged <file>

4、恢复文件跟踪

git update - index -- no - assume - unchanged <file>

配置模板修改的话,我们需要上传新的模板,这时候我们可以先恢复文件跟踪,将最新模板上传到仓库后再移除文件跟踪。

配置文件抽离 ➕ gitHook检查,这应该可以很大程度 避免把 账号,密码,AppId, key 之类私密信息 提交上去 了。

源码

文中涉及到的git hooks 模板 和jyeontu cli 都已开源,有兴趣的同学可以看看:
1、git hooks 模板库

https://gitee.com/zheng_yongtao/jyeontu-templates

2、jyeontu cli

https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/jyeontu

原创 JYeontu 前端也能这么有趣

标签:文件,git,const,提交,信息,敏感,key,AppId,前端开发
From: https://www.cnblogs.com/o-O-oO/p/18639669

相关文章

  • [Wireshark] 使用Wireshark抓包https数据包并显示为明文、配置SSLKEYLOGFILE变量(附下
    wireshark下载链接:https://pan.quark.cn/s/eab7f1e963be提取码:rRAg链接失效(可能会被官方和谐)可评论或私信我重发chrome与firefox在访问https网站的时候会将密钥写入这个环境变量SSLKEYLOGFILE中,在wireshark中设置就可以解析https变量配置环境变量先创建文件ssl.log,点击......
  • MySQL的PRIMARY KEY的DEFAULT NULL问题
    问题展示 代码一:importpymysqlif__name__=='__main__':conn=pymysql.connect(host='localhost',port=3306,user='root',passwd='123123',charset='utf8mb4',......
  • AI 驱动的前端开发:从接入到应用的实战指南
    "能不能给我们的应用加上AI功能?"产品经理兴奋地问我。作为一个海外电商网站的前端负责人,我深知AI不是简单地调用几个API就完事了。特别是在前端应用中,如何优雅地集成AI能力,如何处理流式响应,如何优化用户体验,都是需要仔细考虑的问题。最近两个月,我们成功地在项目中......
  • Eclipse Jgit 不支持高版本 openssh 私钥的结局方法 (jsch 报错 invalid privatekey
    替换jsch依赖<dependency><groupId>org.eclipse.jgit</groupId><artifactId>org.eclipse.jgit.ssh.jsch</artifactId><version>7.1.0.202411261347-r</version><ex......
  • TMS WEB Core Crack,Key Features of TMS WEB Core
    TMSWEBCoreCrack,KeyFeaturesofTMSWEBCoreTMSWEBCoreisconsideredidealforproducingmodernwebsoftwareforusersanddevelopers.DiscoveringtheunlimitedpossibilitiesoftheapplicationsalongwithdevelopmentwiththeuseoftheTMS......
  • Flutter OHOS flutter_keychain(字符串安全存储)
    flutter_keychain一个支持通过Keychain和Keystore支持字符串安全存储的Flutter插件如果您有其他类型想要存储,则需要序列化为UTF-8字符串。使用import'package:flutter_keychain/flutter_keychain.dart';...//Getvaluevarvalue=awaitFlutterKeychain.get(ke......
  • 【异常】‘.\keytool.exe‘ 不是内部或外部命令,也不是可运行的程序
    一、报错内容二、报错说明遇到'.\keytool.exe'不是内部或外部命令,也不是可运行的程序这个错误,通常是因为系统找不到keytool.exe的位置。keytool.exe是JavaDevelopmentKit(JDK)中的一个工具,用于管理密钥库(keystore)和证书。三、问题解决要解决这个问题,你需要......
  • html5中的meta标签keywords有什么作用?
    在HTML5中,<meta>标签的keywords属性曾经被用来为网页提供关键词,以便搜索引擎能够更好地理解和索引网页内容。然而,这个属性的实际作用在近年来已经大大减弱。过去,搜索引擎会依赖keywords属性来了解网页的主题和内容。网站开发者会在keywords属性中填入一系列与网页内容相关的关键......
  • NSSCTF--Crypto--[CISCN 2023 初赛]badkey
    [CISCN2023初赛]badkeytask:fromCrypto.Util.numberimport*fromCrypto.PublicKeyimportRSAfromhashlibimportsha256importrandom,os,signal,stringdefproof_of_work():random.seed(os.urandom(8))proof=''.join([random.choice(st......
  • Vue - vue 前端开发技术指南
    以vite+vue3+ElementPlus+pinia开发技术栈所遇到的技术难题及解决方案汇总如何在vite+vue3项目中支持jsx技术安装插件pnpmadd-D@vitejs/plugin-vue-jsx配置vite.config.jsimportvueJsxfrom'@vitejs/plugin-vue-jsx';exportdefaultdefineConfig({......