绿盟科技实现总结
项目开发
参与 SSO 单点登录模块开发 | 独立负责 M-SEC 社区前后台前端开发 | 前端开发(Nuxt3、Vue3、Vite、TypeScript)
实习介绍:
参与 M-SEC 社区建设规划,基于漏洞情报、资产管理以及众测活动开展为核心的技术社区,抓住白帽子猎奇、积极展示自我获得认可的心理,提升社区活力,形成贡献社区<——>社区馈赠的生态。基于社区运营的目标,与项目成员一
同商讨 M-SEC 社区技术架构、参与 SSO 单点登录模块开发。
线上地址:https://msec.nsfocus.com/
我的职责:
独立负责前端前后台的整体开发,使用 Pixso 参与原型设计,进行前端页面开发以及部署;
配置 Eslint、Prettier、Husky、commitlint、lint-staged 等项目规范工具,规范代码风格以及 Git 提交风格;
封装评论组件、帖子组件,利于实现二级评论、滚动加载等功能;封装导航侧边栏,用户卡片等组件方便复用;
帖子页面管理所有数据
- 整体流程-页面获取帖子数据->传递给帖子卡片组件列表数据、点赞收藏举报删除等方法(接收一个post对象参数,进行相关的接口调用工作)-> prop接收页面传递过来的数据进行初始化,当点击评论图标,改变评论的状态,显示发布评论组件,调用接口获取当前帖子的评论,将数据传递给一级评论组件,一级评论组件负责管理二级评论的数据(我这里是通过一级评论列表,Promise.all + map +调用接口得到二级评论列表数据通过props传递给二级评论组件)
帖子卡片组件
评论组件
发布评论组件(comment-children)
- 被调用,默认隐藏-通过字段控制
一级评论组件(comment-forum)
- 基础操作(置顶)
二级评论组件(comment-comment)
分页组件封装
- 主要是把数据源统一在url的query参数上,通过监听
router.currentRoute.value.path
来同步数据到当前组件;还有就是props接收一个change函数,page,pageSize改变时更新数据
- 主要是把数据源统一在url的query参数上,通过监听
用户卡片组件
还有就是一些通用的静态的组件进行封装,比如用户协议
扩展 Quill 富文本,添加目录功能、XSS 拦截、Markdown 支持等功能;
富文本目录实现
- querySelectorAll 提取所有的h标签,得到dom数组,
- 遍历,为dom添加id属性(方便后续锚点跳转),并通过数组存储,id、h标签等级()、标题内容
- 过滤标签(统一封装方法接收一个html字符串,slice截取前200个字符,DOMPurify.sanitize一级处理过滤标签属性,再通过创建标签将内容复制给innerHTML,再提取innerText得到最后的过滤内容,返回过滤的内容)
- 过滤XSS(我这里是直接通过在获取接口内容的使用,做一个DOMPurify.sanitize过滤标签属性这么一个处理)
Markdown 支持
- quill-markdown-shortcuts
抽离自定义 Hook,提升开发效率,降低维护成本;创建路由中间件进行 Auth 鉴权;实现夜间模式以及主题切换功能;
自定义hooks
- useDateDifferenceHooks 用于格式化时间,以及计算实现1分钟前
- useLocalforageHooks
- useScrollTop 返回顶部(el.scrollTo({ top: 0, behavior: "smooth" })😉
middleware
- Auth
- 外链跳转
- 路由重定向
- 设置meta标签
封装常用工具库、常用常量库,二次封装 Axios/useFetch、Ts 规范请求和返回格式,便于后期维护;
- 封装常用的工具库
下划线转驼峰(识别_字母 replace替换为对应的大写字母)
isExternal (识别外链 正则https或mailto或tel开头)
px2rem 内联样式适配postcss-pxtorem
锚点跳转
- 接收一个id属性,首先判断document以及window对象是否存在,获取对应id dom对象,
- 获取导航栏的高度(因为导航栏是fixed布局,需要减去他的高度)(这部分我是存储为css变量的直接通过getComputedStyle(document.documentElement). getPropertyValue)获取)
- 通过while 循环 offsetParent获取父元素, 对offsetTop进行累加,得到当前dom对象与body的距离
- 在nextTick中调用 document.documentElement.scrollTo({})
hexToBytes
- 封装常用的工具库
学习 Nuxt3 以及服务端渲染相关技术,并使用 Nuxt3 对本项目进行重构;
- 客户端、服务端环境区分
- 标签变动(router-link=》NuxtLink、)
- SEO优化(Nuxt3重构提供服务端渲染以及预渲染、Meta标签、sitemap动态生成)
学习 Golang 后端相关技术,并实现了一些小工具如 github webhook 告警工具。了解后端技术架构 Gitea+DroneCI+Consul+Kubernetes+Harbor;
学习常见 Web 应用程序漏洞相关知识,了解 BurpSuite、Wireshark 等安全渗透测试等工具;
完成项目主要功能开发及提测,通过 YouTrack 敏捷面板记录并修复项目缺陷,保障系统按期交付。
部署相关
Vue3部分
Dockerfile
FROM nginx
RUN mkdir -p /usr/share/nginx/front/dist
RUN rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./dist /usr/share/nginx/front/dist
EXPOSE 80
.drone.yml
kind: pipeline
type: kubernetes
name: msec-frontend
trigger:
ref:
- refs/tags/v*
volumes:
- name: drone-js-dep-cache
claim:
name: drone-js-dep-cache
read_only: false
steps:
- name: Build
image: node:lts-slim
pull: if-not-exists
environment:
volumes:
- name: drone-js-dep-cache
path: /drone/src/node_modules
commands:
- npm config set registry http://mirrors.cloud.tencent.com/npm/ # 切换腾讯镜像源
- npm install -g pnpm
- pnpm config set registry http://mirrors.cloud.tencent.com/npm/ # 切换腾讯镜像源
- pnpm -v && node -v # 查看版本信息
- pnpm i
- pnpm run build
- name: push_image_to_harbor
image: harbor.syndra.space/mirror/plugins/docker
privileged: true
settings:
repo: harbor.syndra.space/syndra/msec-frontend
registry: harbor.syndra.space
cache_from:
- harbor.syndra.space/syndra/msec-frontend
username:
from_secret: harbor_username
password:
from_secret: harbor_password
tags:
- ${DRONE_TAG}
- latest
depends_on:
- Build
when:
status:
- success
- name: push_image_to_aliyun
image: harbor.syndra.space/mirror/plugins/docker
privileged: true
settings:
repo: registry.cn-chengdu.aliyuncs.com/syndra/msec-frontend
registry: registry.cn-chengdu.aliyuncs.com
cache_from:
- harbor.syndra.space/syndra/msec-frontend
username:
from_secret: aliyun_username
password:
from_secret: aliyun_password
tags:
- ${DRONE_TAG}
- latest
depends_on:
- Build
when:
status:
- success
- name: notify
image: fifsky/drone-wechat-work
pull: if-not-exists
settings:
url:
from_secret: prod_notify_bot
msgtype: markdown
content: |
{{if eq .Status "success" }}🟢构建成功 {{else}}🔴构建失败 {{end}}[#${DRONE_BUILD_NUMBER}](${DRONE_BUILD_LINK})
项目: [${DRONE_REPO}](${DRONE_REPO_LINK})
提交人: ${DRONE_COMMIT_AUTHOR_NAME}
CommitID: [${DRONE_COMMIT_SHA:0:8}](${DRONE_COMMIT_LINK})
>${DRONE_COMMIT_MESSAGE/\\n/}
depends_on:
- push_image_to_aliyun
- push_image_to_harbor
when:
status:
- failure
- success
Nuxt3部分
Dockerfile
FROM harbor.syndra.space/mirror/node:lts-slim
RUN mkdir -p /home/node/.pm2/logs && \
mkdir -p /home/node/.pm2/pids && \
touch /home/node/.pm2/module_conf.json && \
chown -R node:node /home/node/.pm2
WORKDIR /app
RUN npm install -g pm2 --registry=https://mirrors.cloud.tencent.com/npm/ && npm cache clean --force
USER node
COPY ./.output ./.output
COPY ecosystem.config.js ./
EXPOSE 3336
# 使用 pm2 运行时启动应用
CMD ["pm2", "restart", "ecosystem.config.js", "--no-daemon"]
.drone.yml
kind: pipeline
type: kubernetes
name: msec-frontend
trigger:
ref:
- refs/tags/v*
volumes:
- name: drone-js-dep-cache
claim:
name: drone-js-dep-cache
read_only: false
steps:
- name: Build
image: harbor.syndra.space/mirror/node:lts-slim
pull: if-not-exists
environment:
volumes:
- name: drone-js-dep-cache
path: /drone/src/node_modules
commands:
- npm install -g pnpm pm2 --registry https://mirrors.cloud.tencent.com/npm/ # 安装pnpm 以及 pm2
- pnpm config set registry https://mirrors.cloud.tencent.com/npm/
- pnpm -v && node -v # 查看版本信息
- pnpm i
- pnpm run build # 打包
- pnpm run pm2 # 运行/重启 详细配置请查看 ecosystem.config.js
- name: push_image_to_harbor
image: harbor.syndra.space/mirror/plugins/docker
privileged: true
settings:
repo: harbor.syndra.space/syndra/msec-frontend
registry: harbor.syndra.space
cache_from:
- harbor.syndra.space/syndra/msec-frontend
username:
from_secret: harbor_username
password:
from_secret: harbor_password
tags:
- ${DRONE_TAG}
- latest
when:
status:
- success
- name: push_image_to_aliyun
image: harbor.syndra.space/mirror/plugins/docker
privileged: true
settings:
repo: registry.cn-chengdu.aliyuncs.com/syndra/msec-frontend
registry: registry.cn-chengdu.aliyuncs.com
cache_from:
- registry.cn-chengdu.aliyuncs.com/syndra/msec-frontend
username:
from_secret: aliyun_username
password:
from_secret: aliyun_password
tags:
- ${DRONE_TAG}
- latest
when:
status:
- success
- name: notify
image: harbor.syndra.space/mirror/fifsky/drone-wechat-work
pull: if-not-exists
settings:
url:
from_secret: prod_notify_bot
msgtype: markdown
content: |
{{if eq .Status "success" }}🟢构建成功 {{else}}🔴构建失败 {{end}}[#${DRONE_BUILD_NUMBER}](${DRONE_BUILD_LINK})
项目: [${DRONE_REPO}](${DRONE_REPO_LINK})
提交人: ${DRONE_COMMIT_AUTHOR_NAME}
CommitID: [${DRONE_COMMIT_SHA:0:8}](${DRONE_COMMIT_LINK})
>${DRONE_COMMIT_MESSAGE/\\n/}
when:
status:
- success