Subresource Integrity (SRI) Hash Generator - Online

'; } else { return ''; } } else { if (resourceUrl) { return ''; } else { return ''; } } } } // Show results async function showResults(data, resourceUrl) { const algos = getSelectedAlgorithms(); if (algos.length === 0) { showError('Please select at least one hash algorithm.'); return; } $resultsContainer.empty(); $resultsSection.removeClass('d-none'); $errorAlert.addClass('d-none'); for (const algo of algos) { try { const base64Hash = await computeHash(data, algo.id); const resultStr = buildResultString(algo.prefix, base64Hash, resourceUrl); const sriValue = algo.prefix + '-' + base64Hash; const cardId = 'result-card-' + algo.prefix; const cardHtml = ` `; $resultsContainer.append(cardHtml); } catch (err) { showError('Hash computation failed for ' + algo.id + ': ' + err.message); } } // Bind copy buttons $resultsContainer.find('.copy-btn').off('click').on('click', function() { const text = $(this).data('copy'); copyToClipboard(text); const $btn = $(this); const $icon = $btn.find('i'); $icon.removeClass('fa-copy').addClass('fa-check'); $btn.removeClass('btn-outline-secondary').addClass('btn-success'); setTimeout(() => { $icon.removeClass('fa-check').addClass('fa-copy'); $btn.removeClass('btn-success').addClass('btn-outline-secondary'); }, 1500); }); } function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } // Copy to clipboard with toast function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => { showCopyToast(); }).catch(() => { fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showCopyToast(); } catch (e) { alert('Failed to copy. Please copy manually.'); } document.body.removeChild(textarea); } function showCopyToast() { const existing = document.querySelector('.copy-toast'); if (existing) existing.remove(); const toast = document.createElement('div'); toast.className = 'copy-toast'; toast.innerHTML = 'Copied to clipboard!'; document.body.appendChild(toast); setTimeout(() => toast.remove(), 1900); } function showError(msg) { $errorMsg.text(msg); $errorAlert.removeClass('d-none'); $resultsSection.addClass('d-none'); } function showLoading() { $loading.removeClass('d-none'); $errorAlert.addClass('d-none'); $resultsSection.addClass('d-none'); } function hideLoading() { $loading.addClass('d-none'); } function formatFileSize(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / 1048576).toFixed(2) + ' MB'; } // --- URL Tab --- async function fetchFromUrl() { const url = $urlInput.val().trim(); if (!url) { showError('Please enter a valid URL.'); return; } try { new URL(url); } catch (e) { showError('Please enter a valid URL (e.g., https://cdn.example.com/file.js).'); return; } currentResourceUrl = url; showLoading(); $urlStatus.html(''); try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 30000); const response = await fetch(url, { signal: controller.signal, mode: 'cors', credentials: 'omit' }); clearTimeout(timeoutId); if (!response.ok) { throw new Error('HTTP ' + response.status + ': ' + response.statusText); } const arrayBuffer = await response.arrayBuffer(); const contentLength = arrayBuffer.byteLength; $urlStatus.html('Fetched successfully — ' + formatFileSize(contentLength) + ''); hideLoading(); await showResults(arrayBuffer, url); } catch (err) { hideLoading(); if (err.name === 'AbortError') { showError('Request timed out after 30 seconds. Please try again or use the Paste/Upload options.'); } else if (err.message.includes('Failed to fetch') || err.message.includes('NetworkError')) { showError('Unable to fetch the resource. The CDN may not support CORS. Try downloading the file and using the Upload or Paste Content tab instead.'); $urlStatus.html('CORS may be blocked for this URL. Try Paste Content or Upload File.'); } else { showError('Error fetching URL: ' + err.message); } } } $fetchBtn.on('click', fetchFromUrl); $urlInput.on('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); fetchFromUrl(); } }); // Quick URL buttons $tool.find('.quick-url-btn').on('click', function() { const url = $(this).data('url'); $urlInput.val(url); // Switch to URL tab $('#sriMainTabs button[data-bs-target="#tab-url"]').tab('show'); fetchFromUrl(); }); // --- Text Tab --- $textInput.on('input', function() { const len = $(this).val().length; $charCount.text(len.toLocaleString() + ' characters'); }); $textGenerateBtn.on('click', async function() { const text = $textInput.val(); if (!text.trim()) { showError('Please paste some content to generate a hash.'); return; } currentResourceUrl = ''; showLoading(); try { await showResults(text, ''); } catch (err) { showError('Error generating hash: ' + err.message); } hideLoading(); }); // --- File Tab --- function handleFile(file) { if (!file) return; const validTypes = ['text/javascript', 'application/javascript', 'text/css', 'application/x-javascript', 'text/plain']; const ext = file.name.split('.').pop().toLowerCase(); const validExts = ['js', 'css', 'txt', 'mjs']; if (!validExts.includes(ext) && !validTypes.includes(file.type) && file.type !== '') { showError('Please select a JavaScript (.js) or CSS (.css) file. For other files, use the Paste Content tab.'); return; } currentFileName = file.name; const reader = new FileReader(); reader.onload = function(e) { currentFileData = new Uint8Array(e.target.result); $fileName.text(file.name); $fileSize.text(formatFileSize(file.size)); $fileInfo.removeClass('d-none'); $fileGenerateBtn.removeClass('d-none'); $dropZone.addClass('d-none'); $errorAlert.addClass('d-none'); }; reader.onerror = function() { showError('Failed to read file. Please try again.'); }; reader.readAsArrayBuffer(file); } $browseBtn.on('click', function(e) { e.stopPropagation(); $fileInput.click(); }); $dropZone.on('click', function() { $fileInput.click(); }); $fileInput.on('change', function() { if (this.files && this.files[0]) { handleFile(this.files[0]); } }); // Drag and drop $dropZone.on('dragover', function(e) { e.preventDefault(); e.stopPropagation(); $(this).addClass('drag-over'); }); $dropZone.on('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); $(this).removeClass('drag-over'); }); $dropZone.on('drop', function(e) { e.preventDefault(); e.stopPropagation(); $(this).removeClass('drag-over'); const files = e.originalEvent.dataTransfer.files; if (files && files[0]) { handleFile(files[0]); } }); $fileClear.on('click', function() { currentFileData = null; currentFileName = null; $fileInput.val(''); $fileInfo.addClass('d-none'); $fileGenerateBtn.addClass('d-none'); $dropZone.removeClass('d-none'); $resultsSection.addClass('d-none'); }); $fileGenerateBtn.on('click', async function() { if (!currentFileData) { showError('Please select a file first.'); return; } currentResourceUrl = ''; showLoading(); try { await showResults(currentFileData, ''); } catch (err) { showError('Error generating hash: ' + err.message); } hideLoading(); }); // Initialize - set active tab properly $('#sriMainTabs button[data-bs-target="#tab-url"]').tab('show'); // Check Web Crypto API availability if (!window.crypto || !window.crypto.subtle) { showError('Web Crypto API is not available. This tool requires a secure context (HTTPS) or localhost to function.'); $fetchBtn.prop('disabled', true); $textGenerateBtn.prop('disabled', true); $fileGenerateBtn.prop('disabled', true); } })();