## 通过设置菜单实现logo配置 由于 [Xue](https://github.com/xzzai/halo-theme-xue.git) 主题作者将主题 logo 的配置项去掉，如果有设置博客logo 需求只能通过修改前端源码实现（[在 fork该主题 v1.1版本的时候就是这么做的](https://gitee.com/codeyee/halo-theme-xue-codeyee)）。 今天偶然发现，halo admin 的菜单名称设置没有对 html 标签进行过滤，灵光一现感觉可以通过将菜单名称定义为 html 标签，实现不修改 `Xue` 主题源码也能展示自己博客的logo。 ## 具体操作 将菜单名称设置为 html 标签，例如: ```html <img style="height:2em" src="http://nxw.so/5EYFr"> ``` 再通过`css`设置图片的高度（也可以修改图片再上传）但是要注意的是，菜单名字限制`50`个字符串，所以需要将`logo`的链接转为短链接。菜单配置如下  实现效果如下  短链生成（需要登陆） - [https://u.3w.cn/shorturl/createTinyUrl](https://u.3w.cn/shorturl/createTinyUrl) (有数据统计通过，但是非会员会有随机广告，导致图片无法显示) - suo.nz （暂时没出现有广告的情况，但跟3w.cn是同一家公司） ## 思考 ### 0x01：是否能够通过渲染 script 标签执行 js 实现 xss 攻击？ 尝试在菜单名字中插入一个 `<script>alert("11")</script>` ，由于这里渲染的是 header.ftl 的内容，所以在访问任意页面时都会呗触发 `alert` 操作，如下图  但要实现该操作需要先拥有 halo 后台管理权限，在用户（博客）前台触发指令执行。 翻了下博客前台的页面，只有留言板处可以写入信息，并且在前端是可以渲染 `html` 标签的，在后台会对用户提交的评论内容进行转义。  后台转义的效果  ## 总结 在处理用户输入的内容时，需要其内容进行转义，防止后台被 `xss` 攻击导致数据泄漏。 ## 后续 由于菜单名称的字符数量限制，所以图片链接只能转换为短链接后使用，但是第三方的短链接（免费）会有两个问题 - 不稳定，有一定的概率加载不出图片，体验较差（至少我是无法忍受的） - 可能会有广告，短链接的原理就是通过第三方服务的域名中转到你指定的链接上，所以中转的这个过程可能会先跳转到一个广告页面（3w.cn就会如此），也会导致图片不能够被第一时间加载。 所以如果主题默认不支持的 logo 配置的话，也不想把整个主题源码都拉到本地做修改，可以使用 `halo` 自带的 **源码编辑** 功能，直接在 `header.ftl` 上作出修改即可。 ### 0x01：找到 halo admin 的主题编辑功能，并找到 header.ftl 文件 鼠标移动到 “外观”  然后找到 `module > header.ftl` ，在 nav 标签下增加一行 `<a />` 标签。  代码如下 ```html <a href="/" id="headerLogo" class="logo-link" style="width: 11em; height:61px;" onfocus="this.blur();"><img src="${blog_logo!}"> <img/></a> ``` 然后自行调整样式即可 ### 0x02：设置 halo 系统变量 如上一个步骤中提到的，我们在 `img` 标签内引用了一个 `blog_log` 变量 ```html <img src="${blog_logo!}"><img/> ``` 我们需要到 halo后台添加一下这个变量，变量的值则为 logo 图片的url。 找到 `系统 > 小工具 > 开发者模式` > 连点 10 次左上角的 HaloDashboard 即可进入开发者模式  添加一个 `blog_log` 变量，填上你的 logo 图片链接  #### 0x03：效果 效果如下