OpenGraph Tags Renderer

A secure, focused web application for extracting and rendering OpenGraph metadata from URLs using Deno and Hono.

Overview

This application provides a simple web interface for extracting OpenGraph metadata from any publicly accessible URL. It displays both a visual preview card and the raw JSON data, with options to copy or export the results.

Features

• OpenGraph Extraction: Fetches and parses OpenGraph metadata from any HTTP/HTTPS URL
• Visual Preview: Displays a formatted preview card showing title, description, image, and site name
• JSON Export: Syntax-highlighted JSON output with one-click copy functionality
• Image Export: Export preview cards as SVG or PNG images
• Security First: Comprehensive security measures to prevent abuse and attacks
• Modern UI: Built with Web Awesome components using the Brutalist theme

Security Features

This application implements defense-in-depth security:

SSRF Protection

• Blocks private IP ranges (10.x.x.x, 192.168.x.x, 172.16-31.x.x)
• Blocks localhost and link-local addresses
• Only allows HTTP/HTTPS protocols

Request Validation

• CSRF token protection with one-time use tokens
• Rate limiting (10 req/min for browsers, 1 req/min for bots)
• User-Agent validation and bot blocking
• Referrer header validation
• Request size limits (1KB max body, 2048 char max URL)

HTTP Security Headers

• Content Security Policy with restricted sources
• X-Frame-Options, X-Content-Type-Options, X-XSS-Protection
• Strict referrer and permissions policies

Tech Stack

• Runtime: Deno (secure JavaScript runtime)
• Web Framework: Hono (lightweight, fast web framework)
• Frontend: Web Awesome UI components with Brutalist theme
• Validation: Zod schema validation
• Syntax Highlighting: Shiki for JSON display
• Image Export: @zumer/snapdom for SVG/PNG generation
• OpenGraph: @deno/opengraph for metadata extraction

Getting Started

Prerequisites

• Deno installed on your system

Installation

1. Clone the repository:

git clone https://codeberg.org/hrbrmstr/og.git
cd og

2. Start the development server:

deno task start

Or run manually with permissions:

deno run --allow-net --allow-read --watch main.ts

3. Open your browser to http://127.0.0.1:9154

Usage

1. Enter a valid HTTP or HTTPS URL in the input field
2. Click submit or press Enter
3. View the OpenGraph preview card and JSON data
4. Use the export buttons to save as SVG/PNG or copy JSON to clipboard

Supported URLs

• Any publicly accessible HTTP/HTTPS URL
• URLs with OpenGraph metadata will show rich previews
• URLs without OpenGraph data will show an informational message

Blocked URLs

For security reasons, the following are blocked:

• Localhost URLs (127.0.0.1, localhost, ::1)
• Private network ranges (RFC 1918)
• Link-local addresses (169.254.x.x)
• Non-HTTP/HTTPS protocols

API Endpoints

GET /

Returns the main application interface with embedded CSRF token.

POST /process-url

Processes a URL and extracts OpenGraph metadata.

Request:

{
 "url": "https://example.com"
}

Required Headers:

• Content-Type: application/json
• X-CSRF-Token: <token>
• Referer: <same-origin>

Response (Success):

{
 "success": true,
 "url": "https://example.com",
 "result": {
 "title": "Example Title",
 "description": "Example description",
 "image": "https://example.com/image.jpg",
 "site_name": "Example Site"
 },
 "newCsrfToken": "<new-token>"
}

Response (No OpenGraph Data):

{
 "success": false,
 "url": "https://example.com",
 "result": {},
 "message": "This page doesn't contain OpenGraph metadata tags, but the URL is valid and accessible.",
 "newCsrfToken": "<new-token>"
}

Configuration

The application runs on:

• Host: 127.0.0.1 (localhost only)
• Port: 9154
• Timeout: 25 seconds for OpenGraph requests

Development

Project Structure

og/
├── main.ts # Main application server
├── templates/
│ └── index.html # Frontend template
├── static/
│ └── favicon.ico # Application favicon
├── deno.json # Deno configuration
├── application-flow.md # Application flow diagram
└── README.md # This file

Key Components

• Security Middleware: CSRF, rate limiting, input validation
• URL Processing: Zod validation, SSRF protection
• OpenGraph Extraction: Timeout-protected external requests
• Frontend: Web Awesome components with export functionality

Testing

Test with safe URLs:

• https://example.com
• https://github.com
• https://news.ycombinator.com

Deployment

Local Development

deno task start

Production Considerations

• Application binds to localhost only (127.0.0.1)
• Use a reverse proxy (nginx, Caddy) for external access
• Requires --allow-net and --allow-read permissions
• No external database dependencies
• In-memory storage (rate limits, CSRF tokens reset on restart)

Example nginx configuration:

location / {
 proxy_pass http://127.0.0.1:9154;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Security Considerations

• Never disable security features
• URL restrictions prevent SSRF attacks
• Rate limiting prevents resource exhaustion
• CSRF tokens are single-use and IP-bound
• Input sanitization prevents XSS
• Content Security Policy prevents code injection

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Ensure security measures remain intact
5. Test thoroughly
6. Submit a pull request

License

MIT

Support

For issues and questions, please open an issue on the repository.