Need help with csst?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

zswang
203 Stars 26 Forks 19 Commits 0 Opened issues

Description

CSS Text Transformation

Services available

!
?

Need anything else?

Contributors list

# 33,423
ant-des...
React
Gulp
TypeScr...
18 commits

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.