HTML Encoder/Decoder

Professional HTML encoding and decoding tool with advanced security features. Protect against XSS attacks, encode special characters, and ensure safe web content. Supports named entities, numeric entities, and URL encoding with real-time security analysis.

Aina ya Msimbaji
Chaguo za Ziada
Vitendo
Tokeo la Kusimbwa
Tokeo la Kusimbua

Marejeleo ya Vijenzi vya HTML

Herufi Kijenzi cha Jina Kijenzi cha Namba Kijenzi cha Hex Maelezo
< < < < Ndogo kuliko
> > > > Kubwa kuliko
& & & & Alama ya na
" " " " Alama nukuu mbili
' ' ' ' Alama nukuu moja
        Non-breaking space
© © © © Hakimiliki
® ® ® ® Alama ya biashara

Sample Encoding/Decoding Examples

Kuzuia Mashambulizi ya XSS
Mfumo wa kawaida wa mashambulizi ya XSS
Maudhui ya HTML
Hello & Welcome
HTML ya kawaida na herufi maalum
Udhibiti wa Nukuu
He said "Hello" & she replied 'Hi'
Maandishi yenye nukuu moja na mbili
Herufi za Unicode
© 2025 Company™ • All Rights Reserved
Alama maalum na herufi za Unicode
Uingizaji wa JavaScript
javascript:alert(document.cookie)
Jaribio la kuingiza URL ya JavaScript
Data ya Fomu
name=John&email=john@example.com&message=Hello!
URL-encoded form data with special characters

Unahitaji Suluhisho za Usalama wa Tovuti?

Peleka programu salama na huduma bora za usalama

Smart Nation's Core Infrastructure: WIA Code

Drone·Robot delivery, autonomous driving, emergency rescue and more - Experience the future in 30 days, completely free for your nation!

Jifunze Zaidi Kuhusu WIA Code

🤖 Chagua Msaidizi wako wa AI

💬 ChatGPT
Most versatile • Best for general tasks
🧠 Claude
Best reasoning • Perfect for analysis
Gemini BURE
Free daily limits • Built-in chat
', html: '
Hello & Welcome
', quotes: 'He said "Hello" & she replied \'Hi\'', unicode: '© 2025 Company™ • All Rights Reserved', javascript: 'javascript:alert(document.cookie)', form: 'name=John&email=john@example.com&message=Hello!' }; // HTML Entities Map const HTML_ENTITIES = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '\n': ' ', '\r': ' ', '\t': ' ' }; // Extended HTML Entities const EXTENDED_ENTITIES = { '©': '©', '®': '®', '™': '™', '€': '€', '£': '£', '¥': '¥', '§': '§', '¶': '¶', '•': '•', '…': '…', '–': '–', '—': '—', ''': '‘', ''': '’', '"': '“', '"': '”', '«': '«', '»': '»', '°': '°', '±': '±', '×': '×', '÷': '÷', '¼': '¼', '½': '½', '¾': '¾', 'α': 'α', 'β': 'β', 'γ': 'γ', 'δ': 'δ', 'ε': 'ε', 'λ': 'λ', 'μ': 'μ', 'π': 'π', 'σ': 'σ', 'τ': 'τ', 'φ': 'φ', 'ω': 'ω' }; // XSS Pattern Detection const XSS_PATTERNS = [ /]*>/i, /javascript:/i, /vbscript:/i, /onload\s*=/i, /onclick\s*=/i, /onerror\s*=/i, /onmouseover\s*=/i, /onfocus\s*=/i, /onblur\s*=/i, /eval\s*\(/i, /document\.cookie/i, /document\.write/i, /window\.location/i, /alert\s*\(/i, /confirm\s*\(/i, /prompt\s*\(/i, /]*>/i, /]*>/i, /]*>/i, /]*>/i, /]*>/i, /data:[^;]*;base64/i, /\.innerHTML/i, /\.outerHTML/i ]; // ========== MAIN PROCESSING FUNCTIONS ========== // Main processing function function processText() { const input = document.getElementById('inputText').value; if (!input.trim()) { document.getElementById('encodedOutput').textContent = ''; document.getElementById('decodedOutput').textContent = ''; hideSecurityAnalysis(); return; } try { // Encode const encoded = encodeHTML(input); document.getElementById('encodedOutput').textContent = encoded; // Decode const decoded = decodeHTML(input); document.getElementById('decodedOutput').textContent = decoded; // Security analysis performSecurityAnalysis(input); // Show OTA after successful processing showOTA(); // Track usage trackEvent('html_processed', { hasXSSPatterns: detectXSSPatterns(input).length > 0 }); } catch (error) { showNotification(`Error: ${error.message}`, 'error'); } } // HTML Encoding Function function encodeHTML(text) { let encoded = text; // Basic HTML encoding if (document.getElementById('encodeBasic').checked) { encoded = encoded.replace(/&/g, '&') .replace(//g, '>'); } // Quote encoding if (document.getElementById('encodeQuotes').checked) { encoded = encoded.replace(/"/g, '"') .replace(/'/g, '''); } // Extended characters if (document.getElementById('encodeExtended').checked) { for (const [char, entity] of Object.entries(EXTENDED_ENTITIES)) { encoded = encoded.replace(new RegExp(escapeRegExp(char), 'g'), entity); } } // Numeric entities if (document.getElementById('encodeNumeric').checked) { encoded = encoded.replace(/[^\x00-\x7F]/g, function(char) { return '&#' + char.charCodeAt(0) + ';'; }); } // Newlines if (document.getElementById('encodeNewlines').checked) { encoded = encoded.replace(/\n/g, ' ') .replace(/\r/g, ' ') .replace(/\t/g, ' '); } // URL encoding if (document.getElementById('urlEncode').checked) { encoded = encodeURIComponent(encoded); } return encoded; } // HTML Decoding Function function decodeHTML(text) { let decoded = text; try { // URL decode first if needed if (text.includes('%')) { try { decoded = decodeURIComponent(decoded); } catch (e) { // If URL decoding fails, continue with original text } } // Decode HTML entities const tempDiv = document.createElement('div'); tempDiv.innerHTML = decoded; decoded = tempDiv.textContent || tempDiv.innerText || ''; return decoded; } catch (error) { return text; // Return original if decoding fails } } // XSS Pattern Detection function detectXSSPatterns(text) { const detectedPatterns = []; for (const pattern of XSS_PATTERNS) { if (pattern.test(text)) { detectedPatterns.push(pattern.source); } } return detectedPatterns; } // Security Analysis function performSecurityAnalysis(text) { const items = []; // XSS pattern detection const xssPatterns = detectXSSPatterns(text); if (xssPatterns.length > 0) { items.push({ type: 'error', icon: '🚨', message: `Potential XSS patterns detected: ${xssPatterns.length} suspicious patterns found` }); } else { items.push({ type: 'success', icon: '✅', message: 'Hakuna dalili za XSS zilizoonekana' }); } // HTML tag detection const htmlTags = text.match(/<[^>]+>/g); if (htmlTags) { if (htmlTags.length > 5) { items.push({ type: 'warning', icon: '⚠️', message: `Contains ${htmlTags.length} HTML tags - verify if intentional` }); } else { items.push({ type: 'info', icon: 'ℹ️', message: `Contains ${htmlTags.length} HTML tags` }); } } // JavaScript protocol detection if (/javascript:/i.test(text)) { items.push({ type: 'error', icon: '🛑', message: 'Ina itifaki ya javascript - hatari kubwa ya XSS!' }); } // Event handler detection if (/on\w+\s*=/i.test(text)) { items.push({ type: 'error', icon: '⚡', message: 'Ina vishughulishi vya HTML - uwezekano wa XSS' }); } // Special characters analysis const specialChars = text.match(/[<>&"']/g); if (specialChars) { items.push({ type: 'info', icon: '🔤', message: `Contains ${specialChars.length} special HTML characters` }); } // Unicode analysis const unicodeChars = text.match(/[^\x00-\x7F]/g); if (unicodeChars) { items.push({ type: 'info', icon: '🌐', message: `Contains ${unicodeChars.length} Unicode characters` }); } // Encoding recommendations if (xssPatterns.length > 0 || htmlTags) { items.push({ type: 'warning', icon: '💡', message: 'Pendekezo: Tumia usimbaji sahihi kwa matokeo ya tovuti' }); } displaySecurityAnalysis(items); } // Display Security Analysis function displaySecurityAnalysis(items) { const container = document.getElementById('securityItems'); const analysisSection = document.getElementById('securityAnalysis'); container.innerHTML = ''; items.forEach(item => { const div = document.createElement('div'); div.className = `security-item ${item.type}`; div.innerHTML = ` ${item.icon} ${item.message} `; container.appendChild(div); }); analysisSection.style.display = 'block'; } // Hide Security Analysis function hideSecurityAnalysis() { document.getElementById('securityAnalysis').style.display = 'none'; } // Use Sample function useSample(sampleId) { const sample = HTML_SAMPLES[sampleId]; if (!sample) return; document.getElementById('inputText').value = sample; processText(); // Smooth scroll to results setTimeout(() => { document.querySelector('.results-section').scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100); trackEvent('sample_used', { sample: sampleId }); } // Clear All function clearAll() { document.getElementById('inputText').value = ''; document.getElementById('encodedOutput').textContent = ''; document.getElementById('decodedOutput').textContent = ''; hideSecurityAnalysis(); } // Swap Input/Output function swapInputOutput() { const input = document.getElementById('inputText'); const encoded = document.getElementById('encodedOutput').textContent; if (encoded) { input.value = encoded; processText(); } } // ========== UTILITY FUNCTIONS ========== // Escape RegExp function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\ Badilisha Ufunguo wa API'; } else { statusEl.textContent = 'No API key set'; } } // 채팅 메시지 추가 function addMessage(type, content) { const chatMessages = document.getElementById('chatMessages'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; if (type === 'user') { messageDiv.innerHTML = `You: ${content}`; } else { messageDiv.innerHTML = `✨ Gemini:
${content.replace(/\n/g, '
')}`; } chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Gemini에 메시지 전송 async function sendToGemini() { const input = document.getElementById('geminiInput'); const message = input.value.trim(); if (!message) return; addMessage('user', message); input.value = ''; const loadingMsg = document.createElement('div'); loadingMsg.className = 'message assistant'; loadingMsg.innerHTML = '✨ Gemini:
Thinking...'; loadingMsg.id = 'loading-message'; document.getElementById('chatMessages').appendChild(loadingMsg); try { const currentText = document.getElementById('inputText').value.trim(); let contextInfo = ''; if (currentText) { const xssPatterns = detectXSSPatterns(currentText); contextInfo = `\n\nCurrent HTML content context: - Length: ${currentText.length} characters - Contains HTML tags: ${/<[^>]+>/.test(currentText)} - XSS patterns detected: ${xssPatterns.length} - Special characters: ${/[<>&"']/.test(currentText)}`; } const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${aiModalState.apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: `You are a web security expert helping a developer with HTML encoding/decoding and XSS prevention. Context: The user is working with an HTML encoder/decoder tool for web security purposes. They need help with proper character encoding, XSS prevention, and secure web development practices. Please provide accurate, security-focused advice about: - HTML entity encoding/decoding - XSS prevention techniques - Context-aware output encoding - Web security best practices - Character set handling ${contextInfo} User question: ${message}` }] }], generationConfig: { temperature: 0.7, maxOutputTokens: 1000 } }) }); const data = await response.json(); document.getElementById('loading-message').remove(); if (data.candidates && data.candidates[0] && data.candidates[0].content) { const reply = data.candidates[0].content.parts[0].text; addMessage('assistant', reply); } else { addMessage('assistant', 'Sorry, I could not generate a response. Please try again.'); } } catch (error) { document.getElementById('loading-message')?.remove(); if (error.message.includes('API key')) { addMessage('error', 'Invalid API key. Please check your API key and try again.'); showAPIKeySetup(); } else { addMessage('error', 'Failed to connect to Gemini. Please check your internet connection and try again.'); } } } // ========== EVENT LISTENERS ========== document.addEventListener('DOMContentLoaded', function() { // AI 버튼 이벤트 document.getElementById('aiBtn').addEventListener('click', openAIModal); // 모달 외부 클릭시 닫기 document.getElementById('aiModal').addEventListener('click', function(e) { if (e.target === this) { closeAIModal(); } }); // 키보드 이벤트 document.addEventListener('keydown', function(e) { if (e.key === 'Enter') { const geminiInput = document.getElementById('geminiInput'); if (document.activeElement === geminiInput) { sendToGemini(); } } if (e.key === 'Escape') { closeAIModal(); } }); // 초기화 updateAPIKeyStatus(); updateCurrentYear(); updateToolCount(); // Load default sample useSample('html'); }); // ========== DYNAMIC TOOL COUNT ========== async function updateToolCount() { try { const response = await fetch('/api/tool-count.php'); const data = await response.json(); document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${data.count}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${data.count}+ ${suffix}`; }); } catch (error) { const fallbackCount = 333; document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${fallbackCount}+ free online tools in 206 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${fallbackCount}+ ${suffix}`; }); } } function updateCurrentYear() { const currentYear = new Date().getFullYear(); document.querySelectorAll('.current-year').forEach(el => { el.textContent = currentYear; }); } // ========== ANALYTICS ========== window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXX'); trackEvent('page_view', { tool: TOOL_CONFIG.name, category: TOOL_CONFIG.category });