今天在群里看到一个有意思的攻击案例：在百度搜索 “css 判断firefox“，会导致页面样式错乱，具体如下图（2021.11.09 中午十二点仍生效）：
作为一名前端，第一反应就是样式被注入了，忍不住内心的好奇，决定来一探究竟是怎么做到的。
想直接看结论的小伙伴可以跳到文章末尾的“总结”部分。
发现被旋转
既然是样式错乱，那么首先按 F12 打开开发者工具看看元素的 CSS 发生了什么。
在外层的几个节点元素点击几次，发现许多 div 被设置了一个有意思的属性 transform: rotate(180 deg);：
尝试取消掉几个元素的这个规则，发现页面看起来正常了一点（真的就只是正常了一点点 ...）：
到这里就可以确认是 transform: rotate(180 deg); 相关的代码在搞鬼了。
旋转从何而来
在页面右键点击“显示网页源代码”，全局搜索 transform: rotate(180 deg);，发现了一段有意思的代码：
就是这段代码导致了给所有的 div 设置了 transform: rotate(180 deg); 的旋转样式。
看一下上下文，发现了一个搜索结果的百度知道跳转链接：
打开百度知道的链接 zhidao.baidu.com/question/55… ，发现果然是相关的 CSS：
总结
到这里，整个“攻击” 的链路就很清晰了：
- 百度搜索 “css 判断firefox“
- 搜索结果页展示了百度知道答案的部分内容
- 搜索结果未对
<style>特殊标签进行正确转义，导致浏览器将答案解析为页面样式 - 特殊的旋转样式导致页面错乱
总结成一句话：“百度知道”攻击了“百度搜索”😂
更新
在 2021.11.08 下午三点发现问题已经修复，不过解决的方式比较暴力，直接过滤掉了 <style> 标签。比较合理的方式应该是把 < 转义成 <，把 > 转义成 >。
