React教程系列之In-browser JSX Transform

JSXTransform在浏览器环境的应用
本文介绍如何在浏览器环境中使用JSXTransform处理JSX代码。通过设置script标签的type属性为text/jsx,并添加必要的注释声明,可以实现React组件的渲染。此外,还介绍了如何通过npm安装react-tools并配置监视任务来实现离线转换。

 

    在浏览器环境下,我们如何使用JSX Transform

 

<script type="text/jsx">
        /** @jsx React.DOM */
        React.renderComponent(<h1>测试</h1>,document.getElementById('test'));
</script>

<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>

 

 

   需要注意几点:

 

  • script的type为text/jsx
  • 注释 /** @jsx React.DOM */  是必须的

    renderCOmponent方法:

 

  • 第一个参数:类似模板
  • 第二个参数:dom

 

   单独拿出:

 

  • 新建一个文件test.js,type="text/jsx"

 

   

   离线转化:

 

  • npm install -g react-tools
  • jsx --watch **/**/

 

 

   本文部分内容:

 

   http://facebook.github.io/react/docs/tooling-integration.html#productionizing-precompiled-jsx

 

   http://facebook.github.io/react/docs/getting-started.html

 

 

(venv) gapinyc@DESKTOP-9QS7RL5:~/superset/superset-frontend$ npm audit # npm audit report bootstrap 3.1.1 - 3.4.1 Severity: moderate Bootstrap Vulnerable to Cross-Site Scripting in its Popover and Tooltip Components - https://github.com/advisories/GHSA-q58r-hwc8-rm9j Bootstrap Cross-Site Scripting (XSS) vulnerability for data-* attributes - https://github.com/advisories/GHSA-vxmc-5x29-h64v fix available via `npm audit fix --force` Will install bootstrap@5.3.8, which is a breaking change node_modules/bootstrap brace-expansion 1.0.0 - 1.1.11 brace-expansion Regular Expression Denial of Service vulnerability - https://github.com/advisories/GHSA-v6h2-p8h4-qcjw fix available via `npm audit fix` node_modules/brace-expansion braces <3.0.3 Severity: high Uncontrolled resource consumption in braces - https://github.com/advisories/GHSA-grv7-fg5c-xmjg fix available via `npm audit fix --force` Will install jest-enzyme@4.2.0, which is a breaking change node_modules/jest-environment-enzyme/node_modules/braces node_modules/sane/node_modules/braces micromatch <=4.0.7 Depends on vulnerable versions of braces node_modules/jest-environment-enzyme/node_modules/micromatch node_modules/sane/node_modules/micromatch @jest/transform <=24.9.0 || 30.0.0-alpha.1 - 30.0.0-beta.2 Depends on vulnerable versions of jest-haste-map Depends on vulnerable versions of jest-util Depends on vulnerable versions of micromatch node_modules/jest-environment-enzyme/node_modules/@jest/transform @jest/environment <=24.9.0 || 30.0.0-alpha.1 - 30.0.0-beta.2 Depends on vulnerable versions of @jest/fake-timers Depends on vulnerable versions of @jest/transform node_modules/jest-environment-enzyme/node_modules/@jest/environment anymatch 1.2.0 - 2.0.0 Depends on vulnerable versions of micromatch node_modules/jest-environment-enzyme/node_modules/anymatch node_modules/sane/node_modules/anymatch jest-haste-map 18.1.0 - 26.6.2 || 30.0.0-alpha.1 - 30.0.0-beta.2 Depends on vulnerable versions of anymatch Depends on vulnerable versions of jest-util Depends on vulnerable versions of micromatch Depends on vulnerable versions of sane node_modules/jest-environment-enzyme/node_modules/jest-haste-map sane 1.5.0 - 4.1.0 Depends on vulnerable versions of anymatch Depends on vulnerable versions of micromatch node_modules/sane jest-message-util 18.5.0-alpha.7da3df39 - 24.9.0 Depends on vulnerable versions of micromatch node_modules/jest-environment-enzyme/node_modules/jest-message-util @jest/fake-timers <=24.9.0 || 30.0.0-alpha.1 - 30.0.0-beta.2 Depends on vulnerable versions of jest-message-util node_modules/jest-environment-enzyme/node_modules/@jest/fake-timers jest-environment-jsdom 10.0.2 - 25.5.0 Depends on vulnerable versions of @jest/environment Depends on vulnerable versions of @jest/fake-timers Depends on vulnerable versions of jest-util Depends on vulnerable versions of jsdom node_modules/jest-environment-enzyme/node_modules/jest-environment-jsdom jest-environment-enzyme * Depends on vulnerable versions of jest-environment-jsdom node_modules/jest-environment-enzyme jest-enzyme >=5.0.0 Depends on vulnerable versions of jest-environment-enzyme node_modules/jest-enzyme jest-util 24.2.0-alpha.0 - 24.9.0 Depends on vulnerable versions of @jest/fake-timers node_modules/jest-environment-enzyme/node_modules/jest-util d3-color <3.1.0 Severity: high d3-color vulnerable to ReDoS - https://github.com/advisories/GHSA-36jr-mh4h-2g58 No fix available packages/superset-ui-core/node_modules/d3-color plugins/legacy-plugin-chart-horizon/node_modules/d3-color plugins/legacy-preset-chart-deckgl/node_modules/d3-color plugins/plugin-chart-word-cloud/node_modules/d3-color d3-interpolate 0.1.3 - 2.0.1 Depends on vulnerable versions of d3-color node_modules/@encodable/color/node_modules/d3-interpolate node_modules/d3-scale-chromatic/node_modules/d3-interpolate node_modules/d3-scale/node_modules/d3-interpolate node_modules/encodable/node_modules/d3-interpolate packages/superset-ui-core/node_modules/d3-scale/node_modules/d3-interpolate plugins/legacy-plugin-chart-horizon/node_modules/d3-interpolate plugins/legacy-preset-chart-deckgl/node_modules/d3-interpolate plugins/plugin-chart-word-cloud/node_modules/d3-interpolate @encodable/color * Depends on vulnerable versions of d3-interpolate Depends on vulnerable versions of d3-scale Depends on vulnerable versions of d3-scale-chromatic node_modules/@encodable/color encodable * Depends on vulnerable versions of @encodable/color Depends on vulnerable versions of d3-interpolate Depends on vulnerable versions of d3-scale node_modules/encodable d3-scale 0.1.5 - 3.3.0 Depends on vulnerable versions of d3-interpolate node_modules/@encodable/color/node_modules/d3-scale node_modules/d3-scale node_modules/encodable/node_modules/d3-scale packages/superset-ui-core/node_modules/d3-scale plugins/legacy-plugin-chart-horizon/node_modules/d3-scale plugins/legacy-preset-chart-deckgl/node_modules/d3-scale plugins/plugin-chart-word-cloud/node_modules/d3-scale d3-scale-chromatic 0.1.0 - 2.0.0 Depends on vulnerable versions of d3-interpolate node_modules/d3-scale-chromatic dompurify <3.2.4 Severity: moderate DOMPurify allows Cross-site Scripting (XSS) - https://github.com/advisories/GHSA-vhxf-7vqr-mrjg fix available via `npm audit fix` plugins/legacy-preset-chart-nvd3/node_modules/dompurify esbuild <=0.24.2 Severity: moderate esbuild enables any website to send any requests to the development server and read the response - https://github.com/advisories/GHSA-67mh-4wv8-2f99 fix available via `npm audit fix --force` Will install esbuild@0.25.11, which is a breaking change node_modules/esbuild @storybook/builder-manager <=8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common Depends on vulnerable versions of esbuild node_modules/@storybook/builder-manager @storybook/core-server <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/builder-manager Depends on vulnerable versions of @storybook/core-common Depends on vulnerable versions of @storybook/telemetry node_modules/@storybook/core-server @storybook/core-common <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of esbuild node_modules/@storybook/core-common @storybook/addon-essentials <=0.0.0-pr-30567-sha-cd9d89ab || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/addon-controls Depends on vulnerable versions of @storybook/addon-docs Depends on vulnerable versions of @storybook/core-common node_modules/@storybook/addon-essentials @storybook/builder-webpack5 <=0.0.0-pr-30567-sha-cd9d89ab || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common Depends on vulnerable versions of @storybook/core-webpack node_modules/@storybook/builder-webpack5 @storybook/react-webpack5 <=8.2.0-beta.3 Depends on vulnerable versions of @storybook/builder-webpack5 Depends on vulnerable versions of @storybook/preset-react-webpack Depends on vulnerable versions of @storybook/react node_modules/@storybook/react-webpack5 @storybook/cli <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common Depends on vulnerable versions of @storybook/core-server Depends on vulnerable versions of @storybook/telemetry node_modules/@storybook/cli storybook <=0.0.0-pr-32826-sha-83cda975 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/cli node_modules/storybook @storybook/core-webpack <=8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common node_modules/@storybook/core-webpack @storybook/docs-tools <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common node_modules/@storybook/docs-tools @storybook/blocks <=8.2.0-beta.3 Depends on vulnerable versions of @storybook/docs-tools Depends on vulnerable versions of markdown-to-jsx node_modules/@storybook/blocks @storybook/addon-controls <=0.0.0-pr-27108-sha-2470133a || 8.0.0-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/blocks node_modules/@storybook/addon-controls @storybook/addon-docs <=0.0.0-pr-30567-sha-cd9d89ab || 8.0.0-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/blocks node_modules/@storybook/addon-docs @storybook/preset-react-webpack <=8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-webpack Depends on vulnerable versions of @storybook/docs-tools Depends on vulnerable versions of @storybook/react node_modules/@storybook/preset-react-webpack @storybook/react <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/docs-tools node_modules/@storybook/react @storybook/telemetry <=0.0.0-pr-28385-sha-9aab3bd7 || 6.5.17-alpha.0 - 8.2.0-beta.3 Depends on vulnerable versions of @storybook/core-common node_modules/@storybook/telemetry eslint-plugin-translation-vars * Severity: critical Malware in eslint-plugin-translation-vars - https://github.com/advisories/GHSA-5vr8-537w-77jc No fix available node_modules/eslint-plugin-translation-vars tools/eslint-plugin-translation-vars form-data <2.5.4 Severity: critical form-data uses unsafe random function in form-data for choosing boundary - https://github.com/advisories/GHSA-fjxv-7rqg-78g4 fix available via `npm audit fix --force` Will install jest-enzyme@4.2.0, which is a breaking change node_modules/request/node_modules/form-data request * Depends on vulnerable versions of form-data Depends on vulnerable versions of tough-cookie node_modules/request jsdom 0.1.20 || 0.2.0 - 16.5.3 Depends on vulnerable versions of request Depends on vulnerable versions of tough-cookie node_modules/jest-environment-enzyme/node_modules/jsdom request-promise-core * Depends on vulnerable versions of request node_modules/request-promise-core request-promise-native >=1.0.0 Depends on vulnerable versions of request Depends on vulnerable versions of request-promise-core Depends on vulnerable versions of tough-cookie node_modules/request-promise-native markdown-to-jsx <7.4.0 Severity: moderate Cross site scripting in markdown-to-jsx - https://github.com/advisories/GHSA-4wx3-54gh-9fr9 fix available via `npm audit fix --force` Will install @storybook/addon-essentials@8.6.14, which is outside the stated dependency range node_modules/@storybook/blocks/node_modules/markdown-to-jsx min-document * min-document vulnerable to prototype pollution - https://github.com/advisories/GHSA-rx8g-88g5-qh64 fix available via `npm audit fix --force` Will install react-hot-loader@1.3.1, which is a breaking change node_modules/min-document global >=2.0.3 Depends on vulnerable versions of min-document node_modules/global react-hot-loader >=2.0.0-alpha Depends on vulnerable versions of global node_modules/react-hot-loader path-to-regexp 2.0.0 - 3.2.0 Severity: high path-to-regexp outputs backtracking regular expressions - https://github.com/advisories/GHSA-9wv6-86v2-598j fix available via `npm audit fix --force` Will install fetch-mock@12.5.5, which is a breaking change node_modules/fetch-mock/node_modules/path-to-regexp fetch-mock 6.0.0-beta.2 - 10.0.8 Depends on vulnerable versions of path-to-regexp node_modules/fetch-mock prismjs <1.30.0 Severity: moderate PrismJS DOM Clobbering vulnerability - https://github.com/advisories/GHSA-x7hr-w5r2-h6wg fix available via `npm audit fix --force` Will install react-syntax-highlighter@16.0.0, which is a breaking change node_modules/refractor/node_modules/prismjs refractor <=4.6.0 Depends on vulnerable versions of prismjs node_modules/refractor react-syntax-highlighter 6.0.0 - 15.6.6 Depends on vulnerable versions of refractor node_modules/react-syntax-highlighter tar-fs 3.0.0 - 3.1.0 Severity: high tar-fs can extract outside the specified dir with a specific tarball - https://github.com/advisories/GHSA-8cj5-5rvv-wf4v tar-fs has a symlink validation bypass if destination directory is predictable with a specific tarball - https://github.com/advisories/GHSA-vj76-c3g6-qr5v fix available via `npm audit fix` node_modules/tar-fs tough-cookie <4.1.3 Severity: moderate tough-cookie Prototype Pollution vulnerability - https://github.com/advisories/GHSA-72xf-g2v4-qvf3 fix available via `npm audit fix --force` Will install jest-enzyme@4.2.0, which is a breaking change node_modules/jest-environment-enzyme/node_modules/tough-cookie node_modules/request-promise-native/node_modules/tough-cookie node_modules/request/node_modules/tough-cookie webpack-dev-server <=5.2.0 Severity: moderate webpack-dev-server users' source code may be stolen when they access a malicious web site with non-Chromium based browser - https://github.com/advisories/GHSA-9jgg-88mc-972h webpack-dev-server users' source code may be stolen when they access a malicious web site - https://github.com/advisories/GHSA-4v9v-hfq4-rm2v fix available via `npm audit fix --force` Will install webpack-dev-server@5.2.2, which is a breaking change node_modules/webpack-dev-server 57 vulnerabilities (4 low, 39 moderate, 11 high, 3 critical) To address issues that do not require attention, run: npm audit fix To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency. (venv) gapinyc@DESKTOP-9QS7RL5:~/superset/superset-frontend$
最新发布
10-26
你运行了: ```bash npm audit ``` 输出显示 **57 个安全漏洞**,包括: - `3 critical` - `11 high` - `39 moderate` - `4 low` --- ## ✅ 总体结论 > 🟡 **你的项目可以继续使用!这些漏洞绝大多数是“间接依赖”中的非执行路径问题,不会立即导致系统被攻击。** 但你需要了解风险,并根据用途决定是否修复。 --- ## 🔍 漏洞分类与影响分析 ### ⚠️ 1. `critical` 级别(3 个) #### ✅ `eslint-plugin-translation-vars` - **恶意软件包** ```text Severity: critical Malware in eslint-plugin-translation-vars No fix available node_modules/eslint-plugin-translation-vars ``` - ❗ 这是一个已知的恶意 npm 包,可能包含后门或数据窃取代码。 - 📍 但它仅用于开发时的 ESLint 插件,且 Superset 可能只是历史遗留引用。 - ✅ 如果你不主动运行相关 lint 规则,**实际风险极低**。 > 💡 建议:提交 PR 给 Apache Superset 移除该插件。 --- ### 🔥 2. `high` 级别(11 个) #### 🔹 `d3-color`, `d3-interpolate`, `d3-scale` 等 ReDoS 和内存消耗 ```text d3-color <3.1.0 → ReDoS braces <3.0.3 → Uncontrolled resource consumption path-to-regexp 2.0.0-3.2.0 → Backtracking regex (ReDoS) tar-fs 3.0.0-3.1.0 → Path traversal ``` - 📌 多数为 **正则表达式拒绝服务 (ReDoS)** 或 **资源耗尽** - ⚠️ 风险场景: - 攻击者能控制输入参数(如 URL、图表配置) - 在服务器端渲染时解析恶意字符串 - ✅ 在前端构建阶段不触发 → 构建过程安全 --- ### 🔐 3. `tough-cookie`, `form-data`, `request` 原型污染 & 不安全随机数 ```text tough-cookie <4.1.3 → Prototype Pollution form-data uses unsafe random function request → deprecated, known vulnerabilities ``` - ❌ `request` 及其生态已被废弃多年 - ✅ 但在构建过程中主要用于测试环境模拟请求 → 不暴露给公网 → 风险可控 --- ### 🛠️ 4. 开发工具链漏洞(如 esbuild, webpack-dev-server, storybook) ```text esbuild <=0.24.2 → dev server 可被恶意网站读取源码 webpack-dev-server <=5.2.0 → 同样存在 devServer 泄露风险 ``` - ⚠️ 条件:你在开发模式下打开了 `webpack-dev-server`,并访问了恶意网站 - ✅ 正常使用 localhost + 浏览器隔离 → 实际风险很低 - ✅ 生产构建 (`npm run build`) 不受影响 --- ## 🧩 为什么这么多漏洞?根本原因是什么? | 原因 | 说明 | |------|------| | 🔺 **深度依赖树** | Superset 前端依赖超过 4000 个包,形成复杂依赖链 | | 🔺 **老旧技术栈** | 使用了 Babel 7、React 17、Webpack 5 等旧版工具 | | 🔺 **测试框架陈旧** | `jest-environment-enzyme` 是 React Class Component 时代的产物,维护停滞 | | 🔺 **未及时升级** | 社区项目升级缓慢,尤其对 breaking change 敏感 | --- ## ✅ 如何处理这些漏洞? ### ✅ 推荐策略:分层应对 | 漏洞类型 | 是否应修复 | 方法 | |---------|------------|------| | `critical` 恶意包 | ✅ 必须关注 | 提交 issue / PR 删除 `eslint-plugin-translation-vars` | | `high` 级 ReDoS | ⚠️ 视情况 | 若用于生产渲染,则需降级输入信任 | | `moderate` 开发工具 | ✅ 可尝试升级 | `npm audit fix --force` | | `low` 普通警告 | ❌ 可忽略 | 不影响功能或安全 | --- ### 🛠️ 尝试自动修复(推荐先备份) ```bash # 先备份 lockfile cp package-lock.json package-lock.json.bak # 修复可安全升级的部分 npm audit fix # 对仍存在的问题,强制修复(会升级 major 版本) npm audit fix --force ``` ⚠️ 注意: - `--force` 可能破坏构建(例如升级 `bootstrap@3` → `@5` 会导致样式崩溃) - 若构建失败,请恢复 backup 并接受当前状态 --- ## 📦 具体建议修复项 ### ✅ 安全可修复(推荐执行): ```bash npm audit fix ``` 将自动修复: - `brace-expansion` - `dompurify` - `tar-fs` - `prismjs`(部分) - `uuid`, `glob` 等基础库 --- ### ⚠️ 需要手动干预或评估: | 包 | 修复方式 | 风险 | |----|----------|------| | `bootstrap@3.4.1` → `5.x` | `npm install bootstrap@5` | 样式完全不兼容,需重写 CSS | | `esbuild@0.24.2` → `0.25+` | `npm install esbuild@latest` | 可能影响构建性能或配置 | | `webpack-dev-server@<5.2` | `npm install webpack-dev-server@5.2.2+` | 一般安全 | | `jest-environment-enzyme` 相关链 | 升级到 `jest-environment-jsdom` + `@testing-library/react` | breaking change,需重写测试用例 | --- ## 🚫 明确无法修复的问题 ### ❌ `d3-color <3.1.0`:无可用修复 ```text No fix available packages/superset-ui-core/node_modules/d3-color ``` - 原因:`superset-ui-core` 依赖旧版 `d3-scale` → 依赖旧版 `d3-interpolate` → 依赖旧版 `d3-color` - 解决方案:等待 Superset 团队升级整个 D3 生态(v5 → v7) 📌 当前只能接受这个漏洞存在。 --- ## 🧼 清理建议:移除不必要的依赖 你可以尝试删除一些已弃用的开发依赖: ```json // package.json "devDependencies": { "eslint-plugin-translation-vars": "*", // ❌ 删除! "react-hot-loader": "^3", // ❌ 已废弃 "jest-environment-enzyme": "*", // ❌ 推荐迁移到 Testing Library } ``` 然后运行: ```bash npm uninstall eslint-plugin-translation-vars react-hot-loader jest-environment-enzyme ``` 这可以减少攻击面。 --- ## ✅ 总结:你现在该怎么办? | 动作 | 建议 | |------|------| | ✅ 是否可以继续构建? | **可以!`npm ci` 成功 → 可运行 `npm run build`** | | ✅ 是否有严重安全风险? | **构建过程无直接风险** | | ✅ 是否需要修复漏洞? | **优先运行 `npm audit fix`,避免 `--force` 除非必要** | | ✅ 是否应升级依赖? | **不要随意升级 major 版本,除非你知道后果** | | 🛑 是否应放弃项目? | **绝不!这是大型开源项目的常见现象** | --- ## 💡 最佳实践建议 | 场景 | 建议 | |------|------| | 本地开发 | 接受当前状态,关注功能实现 | | CI/CD 构建 | 添加 `npm audit --audit-level=high` 检查,忽略 moderate 及以下 | | 生产部署 | 确保前端资源静态托管,不启用 devServer | | 长期维护 | 提交 PR 升级关键依赖(如 D3、Storybook、Bootstrap) | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值