dependency track是OWASP组织个一个开源项目，它可以实时分析依赖组件并识别漏洞，降低团队软件组件供应链的使用风险。《使用开源dependency track建立开源组件分析管理平台》一文详细介绍了工具的使用方法，本文介绍如何将前端页面进行汉化并重新构建镜像运行。
拉取代码
首先从github拉取前端代码，如果拉取速度太慢的话，可以先从gitee导入github项目，再进行克隆，实测可以提速不少。
git clone https://github.com/DependencyTrack/frontend.git
生成cn.json
依据src/i18n/locales/en.json，编写python脚本调用百度翻译提供的api将其中的value值翻译成中文，自动生成cn.json保存到src/i18n/locales目录下，部分机器翻译不合理的手工进行调整。
python脚本参考：
# -*- coding: utf-8 -*-
# This code shows an example of text translation from English to Simplified-Chinese.
# This code runs on Python 2.7.x and Python 3.x.
# You may install `requests` to run this code: pip install requests
# Please refer to `https://api.fanyi.baidu.com/doc/21` for complete api document
import requests
import random
import json
from hashlib import md5
import time
# Set your own appid/appkey.
appid = '这里填写自己的百度翻译的appid'
appkey = '这些填写自己的百度翻译的appkey'
# For list of language codes, please refer to `https://api.fanyi.baidu.com/doc/21`
from_lang = 'en'
to_lang = 'zh'
endpoint = 'http://api.fanyi.baidu.com'
path = '/api/trans/vip/translate'
url = endpoint + path
# Generate salt and sign
def make_md5(s, encoding='utf-8'):
return md5(s.encode(encoding)).hexdigest()
salt = random.randint(32768, 65536)
# 读取en.json，en.json和脚本放在同一目录
with open('en.json', encoding='utf-8') as f:
en_json = f.read()
en_object = json.loads(en_json)
for k,v in en_object.items():
for k1, v1 in v.items():
query = v1
sign = make_md5(appid + query + str(salt) + appkey)
# Build request
headers = {'Content-Type': 'application/x-www-form-urlencoded'}
payload = {'appid': appid, 'q': query, 'from': from_lang, 'to': to_lang, 'salt': salt, 'sign': sign}
# Send request
r = requests.post(url, params=payload, headers=headers)
result = r.json()
en_object[k][k1] = result["trans_result"][0]['dst']
print(k, k1, result["trans_result"][0]['dst'])
time.sleep(1)
# 生成cn.json
with open('cn.json', encoding='utf-8', mode='w') as f:
f.write(json.dumps(en_object, indent=4, ensure_ascii=False))
修改配置
修改.env.development将其中的en修改为cn，如果正式环境也需要汉化还需要修改.env文件配置。
VUE_APP_I18N_LOCALE=cn
VUE_APP_I18N_FALLBACK_LOCALE=cn
如果需要连接后端服务进行调测，可能还需要修改vue.config.js中的devServer的配置，用于连接dependency track的后端服务，正式发布前需要恢复原有配置。
devServer: {
proxy: { "/api": { target: "http://192.168.30.81:8081" } }
},
安装依赖
npm install命令安装依赖，注意安装过程可能会报错，比如安装过程中我遇到vue-easy-pie-chart组件安装报错的问题，猜测一般都是网络原因导致的，我也没有太好的办法，多重试一次，也可以尝试直接通过npm官网查找该组件的安装方法，单独安装报错的组件（npm i vue-easy-pie-chart）。
# Install dependencies
npm install
开发环境调测
由于仅增加了汉化功能，调测主要是检查页面是否正常显示中文，以及针对中文翻译不合理的地方进行修正。
# Serve with hot reload at localhost:8080
npm run serve
打包
执行npm run build命令进行打包，成功后会生成dist目录，即为打包好的前端代码，这时只要在dist目录开启web服务就可以访问前端页面了。
# Build for production with minification
npm run build
提示：执行可能会遇到下面的错误，网上搜索说是由于版本原因导致的，powershell下执行命令$env:NODE_OPTIONS="--openssl-legacy-provider"后再次执行npm run build可以成功打包
生成docker镜像并发布
代码中的release.sh脚本用来打包、构建镜像、发布代码和镜像到github、docker hub，我只打算本地使用，因此直接使用docker build命令进行构建镜像，完整命令如下：
docker build --no-cache --pull -f docker/Dockerfile.alpine -t pepperpapa/dependencytrack/frontend:latest .
提示：这里需要说明的是，构建docker镜像时fetch
http://dl-cdn.alpinelinux.org/alpine/v3.7/main/x86_64/APKINDEX.tar.gz 步骤因为服务器在国外的缘故可能会超时， 解决办法是修改docker/Dockerfile.alpine文件，在USER root指令之后添加下面的指令，修改为国内镜像源
USER root
# 添加国内镜像源
RUN echo -e http://mirrors.ustc.edu.cn/alpine/v3.7/main/ > etc/apk/repositories
镜像构建成功过程日志
[admin@localhost frontend]$ docker build --no-cache --pull -f docker/Dockerfile.alpine -t pepperpapa/dependencytrack/frontend:latest .
Sending build context to Docker daemon 6.969MB
Step 1/14 : FROM nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
docker.io/nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad: Pulling from nginxinc/nginx-unprivileged
Digest: sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
Status: Image is up to date for nginxinc/nginx-unprivileged:1.23.3-alpine@sha256:6d84873c6bf89742fffc4c5a5f308579876be771ede4fd3e6e2e4b47a2d1d8ad
---> 67cc64b7f910
Step 2/14 : ARG COMMIT_SHA=unknown
---> Running in 60e83a3c4e6c
Removing intermediate container 60e83a3c4e6c
---> 9b417d82f526
Step 3/14 : ARG APP_VERSION=0.0.0
---> Running in bb2d24739062
Removing intermediate container bb2d24739062
---> d8987bd5eddf
Step 4/14 : ARG APP_DIR=/opt/owasp/dependency-track-frontend/
---> Running in 72e2d1f42712
Removing intermediate container 72e2d1f42712
---> 814ae29804e7
Step 5/14 : ENV TZ=Etc/UTC LANG=C.UTF-8 OIDC_SCOPE="openid profile email"
---> Running in f30c75a9382a
Removing intermediate container f30c75a9382a
---> 95d70f5327b9
Step 6/14 : USER root
---> Running in ba00e68839df
Removing intermediate container ba00e68839df
---> eefe8e8ad98f
Step 7/14 : RUN echo -e http://mirrors.ustc.edu.cn/alpine/v3.7/main/ > etc/apk/repositories
---> Running in f111c6e14491
Removing intermediate container f111c6e14491
---> 61760e91b5e4
Step 8/14 : COPY ./dist ${APP_DIR}
---> 7f9785bf31a1
Step 9/14 : RUN chown -R 101:0 ${APP_DIR} && chmod -R g=u ${APP_DIR} && apk --no-cache add jq
---> Running in 4db0bb3b7a80
fetch http://mirrors.ustc.edu.cn/alpine/v3.7/main/x86_64/APKINDEX.tar.gz
(1/2) Installing oniguruma (6.6.1-r0)
(2/2) Installing jq (1.5-r5)
Executing busybox-1.35.0-r29.trigger
OK: 44 MiB in 64 packages
Removing intermediate container 4db0bb3b7a80
---> 96e5c884dd27
Step 10/14 : USER 101
---> Running in a0de7cc21f12
Removing intermediate container a0de7cc21f12
---> be7cb97eaac3
Step 11/14 : COPY ./docker/etc/nginx/conf.d/default.conf etc/nginx/conf.d/default.conf
---> b5eb0650e379
Step 12/14 : COPY ./docker/docker-entrypoint.sh docker-entrypoint.d/30-oidc-configuration.sh
---> 20a2a8e59f68
Step 13/14 : WORKDIR ${APP_DIR}
---> Running in ea8beea76740
Removing intermediate container ea8beea76740
---> 96512ed5cacf
Step 14/14 : LABEL org.opencontainers.image.vendor="OWASP" org.opencontainers.image.title="Official Dependency-Track Frontend Container image" org.opencontainers.image.description="Dependency-Track is an intelligent Component Analysis platform" org.opencontainers.image.version="${APP_VERSION}" org.opencontainers.image.url="https://dependencytrack.org/" org.opencontainers.image.source="https://github.com/DependencyTrack/frontend" org.opencontainers.image.revision="${COMMIT_SHA}" org.opencontainers.image.licenses="Apache-2.0" maintainer="steve.springett@owasp.org"
---> Running in 26f960ded808
Removing intermediate container 26f960ded808
---> 5df92a503a1a
Successfully built 5df92a503a1a
Successfully tagged pepperpapa/dependencytrack/frontend:latest
[admin@localhost ~]$ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
pepperpapa/dependencytrack/frontend latest 5df92a503a1a 14 minutes ago 55.8MB
启用汉化后的前端服务
参考使用开源dependency track建立开源组件分析管理平台的步骤，修改docker-compose.yml中的前端镜像名称，执行docker-compose up -d命令即可启用汉化后的前端服务了。
dtrack-frontend:
image: pepperpapa/dependencytrack/frontend
提示：测试发现在docker-compose.yml中配置的API_BASE_URL参数似乎并不生效，暂时没有发现问题的原因，目前的解决办法是npm打包后直接配置dist/static/config.json中的API_BASE_URL为后端服务地址，重新生成镜像运行。
"API_BASE_URL": "http://192.168.30.81:8081"
参考文献
https://github.com/DependencyTrack/frontend.git
百度翻译开放平台 (baidu.com)
使用开源dependency track建立开源组件分析管理平台
