如何安全地交付弹幕 CSS 稿件
2023/02/14 字数统计： 1.8k 阅读时间： 3 mins 访问次数： ... 评论统计： ... 因为尚且不能公开的一些原因决定从 3 月开始暂停直播活动，当然可以保证不是坏消息！是终于有时间金钱和决心去做一件很久之前就想做的事，等正式停播的时候大概就可以公开了。
那么在停播时期也要靠一些劳动来继续获得活动经费，想来想去还是做弹幕设计比较扬长避短。以下是一些开发者向的笔记。
一些痛点
很久之前与真白讨论过合作出品弹幕样式的问题，当时就疑问过如何保证 CSS 稿件的安全性。我提出用 base64 直接将图片素材直接嵌入代码，真白反对说很多人用的是直播姬，自定义 CSS 上限 1000 字。
虽然时间有些久远不记得是不是真的 1000 上限了总之我直呼啥 B 软件。后来发现了用 import 格式可以调用外部文件绕过 1000 字上限，但又出现了一个更加严重的问题：约稿文件上传到网络后，如何在维持稳定引用的同时保证隐私性？
需要稳定引用就必须上传到公共服务器，github 的链接状况可能都不达标，隐私性更是无从谈起。曾经考虑过 gitlab，但转念一想再怎么公私库分离最后还不是只有公共库里的东西才能被外链引用，最后堂堂作罢了。
解决方法
之后想到的第一个方案就是 引用本地文件路径，但是在我坚持不懈地用三国语言前前后后搜索了长达三个月之后我终于认清了一个现实，那就是曾经 CSS 确实可以直接引用本地文件，但这个功能出于安全考虑已经被 ban 了。可恶亏我还想尝试通过引用本机桌面图片作为网页背景做一个伪半透明浏览器脚本……
总之最后想到的解决方案是直接利用 blivechat 的本地服务器为 CSS 和图片资源创建路径，具体操作方式如下：
- 在
~\blivechat\frontend\dist目录下新建文件夹
以文件夹名为AAA为例 - 将所需的 CSS 文件与图片复制到
AAA文件夹内
以 CSS 文件名为bbb.css为例 - 在 OBS 浏览器中输入
@import url("http://localhost:12450/AAA/bbb.css");
即可成功引用 CSS 文件
原理是本地版 blivechat 在启动时会自动在 12450 端口创建本地服务器，同时为资源文件夹下的所有文件都创建链接，只要把需要的文件都放进去就可以保证「只要 blivechat 开启，CSS 和其它美工素材就可以访问」了。使用自带的本地服务器不涉及互联网上传，可以同时保证访问的稳定和安全性，此外直接扔进 blivechat 的安装文件夹也并不需要多少计算机知识，对用户来说应该算是个完美的解决方案了。
图片的处理
当然对开发者来说这个解决方案还是不完美的，主要体现在 blivechat 的弹幕显示窗口并不是直接从本地服务器创建的，这就导致了 CSS 文件中如果直接用相对路径引用图片并不能显示的问题。
那么比较优雅的解决方案就是用 var() 记录每个图片素材的链接，当然如果想进一步保证安全性和易用性，直接 var 一串 base64 代码也是可以的。倒不如说后者应该更稳定一些，如果更改了 bivechat 的本地端口只要变更 obs 窗口中 CSS 文件的引用路径即可，不需要再逐个修改图片链接了。
其它局限性
最后这个操作方式还是存在一个显而易见的缺陷，那就是无法适配其它无后端的弹幕显示插件……这个确实是解决不了了，不过大多数肯约稿弹幕样式的主播应该都用的是 blivechat，如果真的遇到特殊情况的话大概只能退而求其次用以下方式解决：
- 换 OBS，直接复制所有文本到浏览器样式框里
丑，而且用户维护难度巨大 - 直接上传，在图片素材中添加水印和 logo 保证署名
老板你能打开 github 吗
啊等我的代码水平上来了一定要自己写一套本地运行的弹幕姬，这样就不会有这么多乱七八糟的问题了……
一些吐槽
曾经我觉得 CSS 很简单，因为「像我这样的人都能很快学会啊！不就是复制粘贴的事情吗」。
直到我遇到了每一行都后缀 !important 的 blivechat 的 CSS 样式生成器。
本来有一瞬间动摇地想「把简单的代码复杂化是不是也算一种保证自己饭碗的生财之道」，在右键审查发现第 N 个长得像 yt-live-chat-author-chip.yt-live-chat-text-message-renderer 一样的选择器之后这份动摇终于原地转化为了我的母语是无语，不是，再怎么提升阅读门槛也至少得写点可以维护的东西吧？你们的 CSS 真的是一次性的吗？（注：这个选择器是真实存在的）