环境辅助工具

建造和维护 紧急情况,蜂巢区块链上的开源社交平台.

项目概况

@ecency/render-helper 是一个用于渲染和消毒减记+的 TypeScript 库 Ecency社交平台的HTML内容(建于蜂巢区块链上). 它提供以安全为重点的内容渲染,同时提供XSS保护,图像渲染,并进行嵌入式媒体过滤.

密钥命令

开发(从软件包目录)

• pnpm build - 用tsup来构建(创建浏览器ESM+节点CJS/ESM捆绑)
• pnpm test - 运行测试
• pnpm lint - 在TypeScript源文件上运行ESLint

从 Monorepo 根

• pnpm render-helper - 构建渲染帮助软件包
• pnpm build:packages - 构建所有软件包(sdk、钱包、渲染器、ui)
• pnpm publish:render-helper - 手工出版到npm

排雷中心/发改委

• 具有集中式GitHub Actions的视觉-网络单曲部分(.github/workflows/packages.yml(中文(简体) )
• 自动检测更改到 packages/render-helper/** 使用 git diff 键
• 继续前进 develop 分支、 构建和出版到 npm
• 使用 OIDC( OpenID Connect) 安全 npm 认证
• 版本必须在软件包中递增

建筑

核心单元

主要条目 (单位:千美元)src/index.ts:

• renderPostBody - 将标记降级+HTML转换为消毒的HTML
• catchPostImage - 从帖子内容或元数据中取出第一个图像
• postBodySummary - 从邮递机构生成文本摘要
• proxifyImageSrc - 通过Ecency的图像服务器将图像 URL 复制
• setProxyBase - 配置图像代理端点( 默认 ): https://i.ecency.com(中文(简体) )
• setCacheSize - 配置 LRU 缓存大小( 默认: 60个条目)

处理管道

1. markdown-2-html.ts (简体中文)主渲染管道

   • 转换条目对象( Hive post) 或原始字符串
   • 使用带有密钥的 LRU 缓存 author-permlink-last_update-updated
   • 电话 cleanReply() 来规范输入,然后 markdownToHTML() 将提交

2. 二. 方法: DOM 树行走器

   • 递归处理解析 HTML 节点
   • 应用专门处理器 <a>, (中文(简体) ), <iframe>, (中文(简体) ), <img>, (中文(简体) ), <p>,和文本节点
   • 通行证 forApp 区分应用和网络渲染的旗帜
   • 音轨 firstImageFound 图像处理状态

3. sanitize-html.method.ts (英语): XSS 保护

   • 用途 xss 带有严格白名单的库(ALLOWED ATTRIBUTES)
   • Blocks 事件处理器on* 属性)
   • 验证 URL( 必须是) https?://块 javascript:(中文(简体) )
   • 条纹 <style> 标签和CSS
   • 具体白名单 id 属性通过 ID_WHITELIST 正则

4. 节点专用处理器 (单位:千美元)src/methods/:

   • a.method.ts - 链接处理、白名单域的内部化
   • iframe.method.ts - 嵌入内容过滤(YouTube, 3 speak等)
   • img.method.ts - 图像扩散和懒惰装入
   • p.method.ts - 内含数据属性的段落处理
   • text.method.ts - 链接检测和链接

图像处理

(原始内容存档于2013-10-12). proxify-image-src.ts数字 :

• 使用多hash编码将外部图像 URL 转换为 Ecency 的 CDN
• 重用已有代理散列以避免重编码
• 支持格式转换(webp/png)和再大小(width/hight)
• 处理遗产域 (images.hive.blog, steemitimages.com)

捕获后图像.ts数字 :

• 提取显示的图像 json_metadata.image 字段
• 倒数倒数第一 <img> 在已渲染的 HTML 正文中
• 保存 GIF 格式( 不调整动画图像大小)

安全考虑

白名单管理 (单位:千美元)src/consts/white-list.const.ts:

• WHITE_LIST - 信任蜂巢前端域(ecnec.com,最高峰.com等)
• OLD_LIST - 陈旧时代域
• 白名单域的链接被转换为内部应用路径

SS 保护数字 :

• HTML 全部通过 sanitizeHtml() 带有严格属性白名单
• 不允许内行样式( CSS 已禁用)
• 事件处理员被剥去
• 验证的 URL 方案

缓存策略

• LRU 缓存 v11 (src/cache.ts) 存储使 HTML 和取出图像
• 缓存密钥包括内容散列( 最新更新) 到自动生效
• 区分不同图像大小和格式的缓存项
• 默认大小: 60个条目
• 现代用途 LRUCache 从 lru-cache v11 导入已命名

文件结构

src/
├── index.ts                 # Main exports
├── markdown-2-html.ts       # Primary rendering entry point
├── catch-post-image.ts      # Image extraction
├── post-body-summary.ts     # Summary generation
├── proxify-image-src.ts     # Image URL proxification
├── helper.ts                # Utilities (doc creation, cache keys, validators)
├── cache.ts                 # LRU cache wrapper
├── consts/                  # Configuration constants
│   ├── white-list.const.ts  # Trusted domains
│   ├── allowed-attributes.const.ts  # XSS whitelist
│   ├── section-list.const.ts  # App route sections
│   └── regexes.const.ts     # Pattern matching
├── methods/                 # DOM node processors
│   ├── traverse.method.ts   # Main tree walker
│   ├── sanitize-html.method.ts  # XSS protection
│   ├── markdown-to-html.method.ts  # Remarkable wrapper
│   ├── a.method.ts          # Link processing
│   ├── iframe.method.ts     # Embed handling
│   ├── img.method.ts        # Image processing
│   └── ...
└── types/                   # TypeScript interfaces
    └── entry.interface.ts   # Hive post structure

构建系统

• 用途 齐声 用于捆绑(与其他视觉网络包共用)
• 启用严格模式的脚本 5.6+类型
• 产出三包:
  • dist/browser/index.js - 带有类型脚本声明的浏览器无害环境管理
  • dist/node/index.mjs - 节点无害环境管理
  • dist/node/index.cjs - 节点通用JS
• 配置 : tsup.config.ts (双层浏览器/节点构建)
• 所有依赖关系都外部化(不是捆绑)

平台支持

原生反应(iOS/Android)

此软件包完全支持 React 本地应用程序 :

• 软件包分辨率编号: react-native 输入 package.json 导出可确保 React English 捆绑器( Metro) 自动解析到浏览器构建(dist/browser/index.js(中文(简体) )
• 加密支持: 当 platform !== 'web' (即反应原生环境),包使用 react-native-crypto-js 密码操作
• 使用量: 简单地导入通常在您的 React 原生项目中的软件包 - 不需要特殊配置

import { renderPostBody, postBodySummary } from '@ecency/render-helper'

// The platform parameter determines the build target
// 'web' = browser/web, any other value = React Native
const html = renderPostBody(entry, false, 'react-native')
const summary = postBodySummary(entry, 200, 'react-native')

平台参数数字 :

• 'web' - 使用浏览器 API 和标准加密
• 任何其他价值(例如, 'react-native', (中文(简体) ), 'mobile'(b) 使用与土著兼容的应用 react-native-crypto-js
• 要求平台参数为: renderPostBody() 财务报告和审定财务报表 postBodySummary() 函数

测试

• 单位测试测试(从杰斯特迁移)
• 测试文件 : *.spec.ts 相邻源
• 测试应核查 XSS 新特性的保护
• 不在嵌入式支持中加载外部联署材料/图书馆(安全要求)

重要说明

• 在为新平台添加嵌入支持时, 只执行服务器侧渲染
• 所有外部内容都必须经过消毒
• 通过 CI 自动打印所需的版本出错
• 愿景-网络单列波的一部分 -- -- 变化需要在整个依赖软件包中更新
• 这个 @ecency/renderer 软件包将此用作工作空间依赖
• 利用适当的无害环境管理结构,优化出口,以进行植树造林