csst

by zswang

zswang / csst

CSS Text Transformation

203 Stars 26 Forks Last release: over 4 years ago (v0.1.1) 19 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

CSST (CSS Text Transformation)

NPM version Build Status Coverage Status

背景

什么是 CSST?

一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全,不需要执行跨站脚本。

原理

通过读取 CSS3 content 属性获取传送内容。

调用流程

image

技术手段

  • 怎么监听
     加载完毕?

收集线上的资料,发现常见的方案是计时器或者用 onpropertychange、DOMAttrModified。

考虑是 CSS3 场景,取巧用动画开始 (

animationstart
) 这个事件来捕获。
  • 怎么传送特殊字符("、'、\、\n、\r、\t)?

Chrome、Safari 对

content
样式属性字符解析并不一致

为避免未知解析规则影响,统一使用 base64 编码

服务器应答的内容

function csst(id, text) {
  return `
  @keyframes ${id} {
    from {
    }
    to {
      color: red;
    }
  }
  @-webkit-keyframes ${id} {
    from {}
    to {
      color: red;
    }
  }
  #${id} {
    content: ${new Buffer(text, 'utf-8').toString('base64')};
    animation: ${id} 2s;
    -webkit-animation: ${id} 2s;
  }`;
}

与 JSONP 安全性比较

image

开发

本机调试

$ npm run debug

构建

$ npm run dist

问题

  • 没有 JSONP 适配广,CSST 依赖支持 CSS3 的浏览器。

线上体验

http://jhtmls.com/idea/csst.html

参考资料

License

MIT © zswang

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.