跳至主要內容

绿盟科技实现总结

yyshino大约 6 分钟面经面经

项目开发

参与 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改变时更新数据

    • 用户卡片组件

    • 还有就是一些通用的静态的组件进行封装，比如用户协议

  • 扩展 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 --chown=node:node ./.output  ./.output
COPY --chown=node:node 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

自定义文件上传、分包上传、断点续传、文件过滤，文件加载动画

Ts泛型规范请求和返回格式