Securely Copy IP Address to Clipboard — Best Practices

Quick Guide: IP Copy to Clipboard with One Click

Need a one-click way for users to copy an IP address from your page? This short guide shows a simple, accessible, and robust approach using plain JavaScript plus progressive enhancements for frameworks.

What this does

• Displays an IP address (server-provided or fetched).
• Lets the user copy it with one click or tap.
• Provides visual feedback and fallback behavior for older browsers.

HTML structure

Use a clear, semantic structure so screen readers and keyboard users can interact easily.

 192.0.2.1 Copy 

Minimal CSS (optional)

.ip-copy { display:inline-flex; gap:8px; align-items:center; }#copy-msg { margin-left:8px; color: #0a7; font-size:0.9rem; }button:focus { outline: 2px solid #06f; }

JavaScript: Clipboard API with fallback

This code uses navigator.clipboard when available, falls back to a hidden textarea for legacy browsers, and updates UI feedback.

const ipText = document.getElementById(‘ip-text’);const copyBtn = document.getElementById(‘copy-btn’);const copyMsg = document.getElementById(‘copy-msg’); async function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(text); return true; } // Fallback: hidden textarea const ta = document.createElement(‘textarea’); ta.value = text; ta.setAttribute(‘readonly’, “); ta.style.position = ‘absolute’; ta.style.left = ‘-9999px’; document.body.appendChild(ta); ta.select(); try { const success = document.execCommand(‘copy’); document.body.removeChild(ta); return success; } catch { document.body.removeChild(ta); return false; }} copyBtn.addEventListener(‘click’, async () => { const ip = ipText.textContent.trim(); if (!ip) return; copyBtn.disabled = true; const ok = await copyToClipboard(ip); copyBtn.disabled = false; if (ok) { copyMsg.textContent = ‘Copied!’; copyMsg.setAttribute(‘aria-hidden’, ‘false’); setTimeout(() => { copyMsg.textContent = “; copyMsg.setAttribute(‘aria-hidden’, ‘true’); }, 2000); } else { copyMsg.textContent = ‘Copy failed — select and copy manually.’; copyMsg.setAttribute(‘aria-hidden’, ‘false’); }});

Accessibility notes

• Use a semantic button (not a div) so keyboard and assistive tech work by default.
• Provide live region feedback (aria-live or visible message) when copy succeeds/fails.
• Keep focus behavior predictable (don’t move focus on success).

Getting the IP value

• If the IP comes from the server, render it into the span on page render.
• For dynamic fetch (e.g., fetch(’https://api.ipify.org?format=json’)):

async function loadIp() { try { const res = await fetch(’https://api.ipify.org?format=json’); const data = await res.json(); document.getElementById(‘ip-text’).textContent = data.ip; } catch { document.getElementById(‘ip-text’).textContent = ‘Unavailable’; }}loadIp();

Security and privacy tips

• Avoid logging IPs in client-side code or exposing them where not needed.
• If showing other users’ IPs, ensure you have consent and follow applicable policies.

Variations for frameworks

• React/Vue: bind the IP to state/props and call the same copyToClipboard helper from an event handler.
• Server-side render: inject the IP into the HTML to avoid an extra fetch.

That’s it — a compact, user-friendly one-click IP copy implementation that works across modern browsers and degrades gracefully.