CSST (CSS Text Transformation)
背景
什么是 CSST?
一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全,不需要执行跨站脚本。
原理
通过读取 CSS3 content 属性获取传送内容。
调用流程
技术手段
- 怎么监听
<link>
加载完毕?
收集线上的资料,发现常见的方案是计时器或者用 onpropertychange、DOMAttrModified。
考虑是 CSS3 场景,取巧用动画开始 (
animationstart
) 这个事件来捕获。
- 怎么传送特殊字符("、'、\、\n、\r、\t)?
Chrome、Safari 对
content
样式属性字符解析并不一致
为避免未知解析规则影响,统一使用 base64 编码
服务器应答的内容
{ return ` @keyframes { from { } to { color: red; } } @-webkit-keyframes { from {} to { color: red; } } # { content: ; animation: 2s; -webkit-animation: 2s; }`;}
与 JSONP 安全性比较
开发
本机调试
$ npm run debug
构建
$ npm run dist
问题
- 没有 JSONP 适配广,CSST 依赖支持 CSS3 的浏览器。
线上体验
http://jhtmls.com/idea/csst.html