vrr/open-code-review
2
0
Fork 0
mirror of https://github.com/alibaba/open-code-review.git synced 2026-07-09 17:28:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3
open-code-review/pages
History
kite 9dfcffda07
fix(pages): address CodeQL XSS alerts in markdown rendering (#300) 
* fix(pages): address CodeQL XSS alerts in markdown rendering

Alert #4 (headingId.ts): replace the unreliable single-pass regex used to
strip HTML tags (incomplete multi-character sanitization) with DOMPurify.
This also fixes a pre-existing mismatch where headings containing HTML
entities produced different anchor ids on the TOC vs renderer sides.

Alert #5 (MarkdownRenderer.tsx): mermaid runs with securityLevel:'strict'
and already sanitizes its own SVG output, so re-running DOMPurify over the
whole SVG broke rendering (namespaces, inline <style>, foreignObject
labels). Make securityLevel explicit and inject mermaid's trusted output
directly, annotated with a codeql suppression comment.

* docs(pages): clarify CodeQL XSS suppression justification in MarkdownRenderer

The suppression comment claimed the mermaid SVG is 'not raw user input',
which understates the trust boundary. The SVG is in fact derived from
user-controlled mermaid code; safety relies on mermaid's securityLevel:
'strict' sanitizing the output via DOMPurify. Update the comment to state
this accurately and flag that the boundary depends on that setting.
2026-07-06 10:31:37 +08:00
..
src fix(pages): address CodeQL XSS alerts in markdown rendering (#300) 2026-07-06 10:31:37 +08:00
.gitignore feat: init 2026-05-20 22:03:52 +08:00
index.html feat(pages): add Docs page with search, markdown rendering, and i18n support (#273) 2026-07-03 11:45:33 +08:00
logo.svg feat: update brand assets (#257) 2026-07-01 19:09:42 +08:00
package.json feat(pages): add Docs page with search, markdown rendering, and i18n support (#273) 2026-07-03 11:45:33 +08:00
postcss.config.js feat: init 2026-05-20 22:03:52 +08:00
README.md docs(pages): add landing page development guide (#270) 2026-07-02 16:36:54 +08:00
tailwind.config.js feat: init 2026-05-20 22:03:52 +08:00
tsconfig.json feat: init 2026-05-20 22:03:52 +08:00
webpack.config.js feat(pages): add Docs page with search, markdown rendering, and i18n support (#273) 2026-07-03 11:45:33 +08:00

README.md

OpenCodeReview Landing Page (pages/)

This directory contains the OpenCodeReview landing page, built with TypeScript, React, Webpack, and Tailwind CSS.

Getting Started

Prerequisites

  • Node.js >=18 (recommended: latest LTS)
  • npm (comes with Node.js) or pnpm

Install dependencies

From the pages/ directory:

npm install

Or with pnpm:

pnpm install

Start local dev server

npx webpack serve

Equivalent npm script:

npm run dev

Default dev server settings (from webpack.config.js):

  • URL: http://localhost:3030
  • Host: 0.0.0.0
  • Port: 3030

Build for production

npx webpack

Project script (recommended, sets production mode):

npm run build

Build output is generated in pages/dist/.

Type checking

npm run typecheck

Project Structure

pages/
├── src/                # React + TypeScript source code
│   ├── components/     # Reusable UI components
│   ├── pages/          # Route-level page components
│   ├── i18n/           # Localization resources and i18n context
│   ├── styles/         # Global styles (Tailwind entry, custom CSS)
│   └── index.tsx       # Frontend entry point
├── dist/               # Production build artifacts (generated)
├── index.html          # HTML template used by HtmlWebpackPlugin
├── webpack.config.js   # Bundling + dev server config
├── tailwind.config.js  # Tailwind theme/content configuration
├── postcss.config.js   # PostCSS pipeline (Tailwind + Autoprefixer)
├── tsconfig.json       # TypeScript compiler options
└── package.json        # Dependencies and scripts

Development Guidelines

PR screenshots are required

Any PR that changes files in pages/ must include before/after screenshots of affected views in the PR description.

Please include:

  • What page/section changed
  • Before screenshot
  • After screenshot
  • Desktop or mobile context (if responsive behavior changed)

Code style and formatting

  • Follow existing TypeScript + React style in this directory.
  • Keep components focused and readable; prefer splitting large JSX blocks into smaller components.
  • Prefer utility-first Tailwind classes and reuse existing design tokens from tailwind.config.js.
  • Keep imports and file naming consistent with surrounding code.
  • Run npm run typecheck before opening a PR.

Tailwind CSS configuration notes

  • Tailwind config is in tailwind.config.js.
  • Content scanning targets:
    • ./src/**/*.{ts,tsx}
    • ./index.html
  • PostCSS integration is configured in postcss.config.js with:
    • tailwindcss
    • autoprefixer

TypeScript configuration notes

  • TypeScript config is in tsconfig.json.
  • Important defaults:
    • strict: true
    • jsx: react-jsx
    • target: ES2020
    • noEmit: true (Webpack handles output)

Suggested PR Checklist

  • Dependencies installed and project runs locally
  • npm run typecheck passes
  • npm run build succeeds
  • Before/after screenshots added to PR
  • Scope is limited to one logical change