Appearance
FOFA 实习项目
项目描述
该项目主要用于管理 FOFA 网络空间测绘平台的各项功能，包含了内容过滤、IP 管理、会员管理、标签管理等功能 模块。在该项目中我主要负责公告通知和帮助中心模块的前后台开发。
技术栈
vue2、vuex、vue-router、vue-antd、quill、mavon-editor
项目亮难点
- 对公告内容使用的富文本编辑器进行二次封装，实现图片上传并在保存内容时携带图片尺寸样式的功能。
- 对后台保存的 Markdown 格式的帮助中心内容进行前台页面的解析和渲染。
- 封装编辑器组件以防止 XSS 攻击。
Q1: 亮难点一
背景：在后台的富文本编辑器中编辑公告的内容，前台进行展示，并且要求公告内容中可以穿插图片
一个基本的思路，就是触发图片上传后，将返回的 url 地址通过 img 标签渲染到编辑器里面，保存的时候，将内容的富文本标签传回后端，前台就通过拿后端的富文本标签进行渲染（使用v-html指令）。当时存在一个问题，就是上传图片的尺寸不一致，后台虽然可以通过样式进行显示调整，但是前台的图片渲染的尺寸仍旧有大小有小。想到的办法就是在图片的富文本标签中添加上内联样式后传递给服务器，从而控制前台渲染时候的图片尺寸。这里就有两种方式，第一种就是拿到插入后的 img 标签然后给它添加尺寸的样式，第二种就是在渲染成 img 标签之前，设置它的样式属性，然后在渲染，事实证明第一种方式是不可行的。
但是后来我发现，前台可以直接给v-html渲染后的 img 标签添加对应的样式，从而控制图片的显示。
Q2: 亮难点二
背景：之前首页的帮助中心页面是通过导入 github 上的一个文档仓库中的 md 内容来进行渲染的，因此每次需要改动的时候，都需要访问那个 github 仓库进行变更。因此产品说希望吧帮助中心的内容转移到后台。
利用 markdown-it 第三方库解析目录和内容、要考虑内容的过滤（XSS 攻击、关键词标题的隐藏）、图片的懒加载（h5 的 loading 属性）、代码高亮（插件）等
项目通过
markdown-it将 Markdown 文本解析为语法 token，然后遍历其中的标题开标签（ heading_open ）并读取紧随其后的内联文本作为标题内容，从而抽取出 H1 作为一级导航、H2 作为二级导航并以层级结构存入数组。标题的唯一标识采用“标题原文即 id”的策略（通过一个简单的 slugify ，直接返回原文），因此可自然支持中文直链；在渲染层，导航项使用<router-link>指向名为 doc 的路由，并将标题文本经encodeURI作为路由参数传递，实现点击导航跳转到对应文档位置。文档页同样以
markdown-it解析 Markdown 为 token，并在渲染阶段重写标题的 heading_open 规则，为每个标题注入 id 属性，取值为标题原文（与导航页一致的 slugify 逻辑）。随后对 token 列表进行标准 HTML 渲染，产出的字符串通过 v-html 挂载到页面，从而得到完整的 HTML 文档展示。为安全与排版性，渲染器关闭原生 HTML（ html: false ）并启用排版优化，同时通过 Vite 的 ?raw 方式导入 Markdown 源文本以在前端完成全部处理。导航与内容的绑定依赖于双方一致的标题 id 生成策略：导航点击时将标题原文（经 encodeURI ）作为路由参数传给文档页；文档页在挂载与路由变更时取出 id （经 decodeURI ），定位到同名的标题元素（ document.getElementById ）并执行平滑滚动。为优化滚动体验，文档样式为标题设置了合适的 scroll-margin-top ，并在滚动时加入顶部偏移，使页面在存在固定头部或上方留白时也能准确对齐到目标段落。这样，用户点击导航即可精确跳转至对应的文档位置。
Q3: 亮难点三
前端获取后端返回的公告内容之后，通过v-html进行渲染，但是存在 XSS 攻击的风险。因此需要对公告内容进行过滤，主要是利用 DomPurify 第三方库在后台对发送给服务器的富文本内容以及对前台获取到服务器返回的公告内容进行过滤，主要是过滤一些常见的 XSS 攻击方式（href、src 属性，script 标签）