{"id":13756697,"url":"https://github.com/zswang/csst","last_synced_at":"2025-10-07T07:41:20.947Z","repository":{"id":145188882,"uuid":"58190971","full_name":"zswang/csst","owner":"zswang","description":"CSS Text Transformation","archived":false,"fork":false,"pushed_at":"2016-11-05T11:42:45.000Z","size":24,"stargazers_count":199,"open_issues_count":0,"forks_count":25,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-09-18T14:14:41.301Z","etag":null,"topics":["css"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zswang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-06T07:58:29.000Z","updated_at":"2023-11-03T17:12:21.000Z","dependencies_parsed_at":"2024-01-17T15:04:52.945Z","dependency_job_id":"8c3baa58-19ff-47ff-98cf-3df1b8e8fc8a","html_url":"https://github.com/zswang/csst","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/zswang/csst","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fcsst","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fcsst/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fcsst/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fcsst/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zswang","download_url":"https://codeload.github.com/zswang/csst/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fcsst/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278740831,"owners_count":26037480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css"],"created_at":"2024-08-03T11:00:51.627Z","updated_at":"2025-10-07T07:41:20.920Z","avatar_url":"https://github.com/zswang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"CSST (CSS Text Transformation)\n----------\n\n# [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coverage-image]][coverage-url]\n\n## 背景\n\n### 什么是 CSST？\n\n一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全，不需要执行跨站脚本。\n\n## 原理\n\n通过读取 CSS3 content 属性获取传送内容。\n\n### 调用流程\n\n![image](https://cloud.githubusercontent.com/assets/536587/15070367/63126c30-13b6-11e6-93aa-75bf5995c019.png)\n\n### 技术手段\n\n* 怎么监听 `\u003clink\u003e` 加载完毕?\n\n\u003e 收集线上的资料，发现常见的方案是计时器或者用 onpropertychange、DOMAttrModified。\n\n\u003e 考虑是 CSS3 场景，取巧用动画开始 (`animationstart`) 这个事件来捕获。\n\n* 怎么传送特殊字符（\"、'、\\、\\n、\\r、\\t）？\n\n\u003e Chrome、Safari 对 `content` 样式属性字符解析并不一致\n\n\u003e 为避免未知解析规则影响，统一使用 base64 编码\n\n### 服务器应答的内容\n\n```js\nfunction csst(id, text) {\n  return `\n  @keyframes ${id} {\n    from {\n    }\n    to {\n      color: red;\n    }\n  }\n  @-webkit-keyframes ${id} {\n    from {}\n    to {\n      color: red;\n    }\n  }\n  #${id} {\n    content: ${new Buffer(text, 'utf-8').toString('base64')};\n    animation: ${id} 2s;\n    -webkit-animation: ${id} 2s;\n  }`;\n}\n```\n\n## 与 JSONP 安全性比较\n\n![image](https://cloud.githubusercontent.com/assets/536587/15090764/fcfee300-1465-11e6-9209-20d5ddd9b332.png)\n\n## 开发\n\n### 本机调试\n\n```bash\n$ npm run debug\n```\n\n### 构建\n\n```bash\n$ npm run dist\n```\n\n## 问题\n\n* 没有 JSONP 适配广，CSST 依赖支持 CSS3 的浏览器。\n\n## 线上体验\n\n\u003chttp://jhtmls.com/idea/csst.html\u003e\n\n## 参考资料\n\n* [link element onload](http://stackoverflow.com/questions/2635814/javascript-capturing-load-event-on-link)\n* [javascript: capturing load event on LINK](http://stackoverflow.com/questions/2635814/javascript-capturing-load-event-on-link)\n\n## License\n\nMIT © [zswang](http://weibo.com/zswang)\n\n[npm-url]: https://npmjs.org/package/csst\n[npm-image]: https://badge.fury.io/js/csst.svg\n[travis-url]: https://travis-ci.org/zswang/csst\n[travis-image]: https://travis-ci.org/zswang/csst.svg?branch=master\n[coverage-url]: https://coveralls.io/github/zswang/csst?branch=master\n[coverage-image]: https://coveralls.io/repos/zswang/csst/badge.svg?branch=master\u0026service=github\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzswang%2Fcsst","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzswang%2Fcsst","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzswang%2Fcsst/lists"}