No Login Data Private Local Save

SRI Hash Generator – Generate Integrity Attributes for Scripts

29
0
0
0

SRI Hash Generator

Generate Subresource Integrity hashes for scripts and stylesheets.

The resource must support CORS for direct fetching. Try CDNs like cdnjs, jsdelivr, or unpkg.

Paste content and an integrity value to verify they match.

Results

Generate an SRI hash to see results here.

Enter a URL, paste code, or upload a file, then click Generate.

Frequently Asked Questions

Subresource Integrity (SRI) is a W3C security feature that allows browsers to verify that resources fetched from third-party sources (like CDNs) have not been tampered with. It works by comparing a cryptographic hash of the fetched resource against a hash value provided in the integrity attribute of <script> or <link> tags. If the hashes don't match, the browser blocks the resource from loading, protecting your site from compromised CDN files or supply chain attacks.

SRI protects your website by ensuring that externally hosted scripts and stylesheets are exactly what you expect them to be. If an attacker compromises a CDN and injects malicious code, the hash will not match and the browser will refuse to execute the resource. This mitigates risks from third-party dependency compromises and man-in-the-middle attacks, even when loading resources over HTTPS from reputable CDNs.

The SRI specification supports three cryptographic hash algorithms: SHA-256, SHA-384, and SHA-512. SHA-256 provides 256-bit hashes and is the most commonly used. SHA-384 and SHA-512 offer stronger security with longer hash values. You can specify multiple hashes in a single integrity attribute (space-separated), and the browser will use the strongest one it supports. For most use cases, SHA-384 offers an excellent balance of security and performance.

To generate an SRI hash, you can use this tool: simply enter the URL of the script (if it's CORS-enabled), paste the JavaScript/CSS code directly, or upload the file. Select your preferred hash algorithm(s), choose the resource type, and click "Generate SRI Hash". The tool uses the browser's native Web Crypto API to compute the hash entirely client-side. You'll get the integrity attribute value and a ready-to-use HTML tag.

The crossorigin="anonymous" attribute is required when loading CORS-enabled resources with SRI. It instructs the browser to fetch the resource using a CORS request without sending credentials (cookies, HTTP auth). This ensures the browser can access the raw resource bytes to compute the hash. Without it, even if the resource loads, SRI validation may not work correctly for cross-origin resources. This tool automatically includes crossorigin="anonymous" in generated tags.

Yes! The SRI specification supports providing multiple hashes in a single integrity attribute by separating them with spaces. For example: integrity="sha256-abc... sha384-def... sha512-ghi...". The browser will select the strongest algorithm it supports. This is a great way to ensure maximum compatibility while maintaining strong security. This tool can generate combined integrity values when you select multiple algorithms.

If the computed hash of the fetched resource doesn't match any of the hashes in the integrity attribute, the browser will block the resource entirely. The script won't execute, and the stylesheet won't be applied. You'll see an error in the browser's developer console. This is a safety mechanism to prevent potentially compromised or altered resources from affecting your website. Always verify your SRI hashes before deploying to production.

Most popular CDNs support CORS, making them compatible with direct URL fetching for SRI hash generation. These include: cdnjs, jsDelivr, unpkg, Google Fonts, Bootstrap CDN, and jQuery CDN. If a CDN doesn't support CORS, you can still generate the hash by downloading the file and using the "Paste Code" or "Upload File" options in this tool.
'; } else { tag = '<script integrity="' + escapeHtml(combined) + '"></script>'; rawTag = ''; } } else { if (url) { tag = '<link rel="stylesheet" href="' + escapeHtml(url) + '" integrity="' + escapeHtml(combined) + '" crossorigin="anonymous">'; rawTag = ''; } else { tag = '<link rel="stylesheet" integrity="' + escapeHtml(combined) + '">'; rawTag = ''; } } generatedData = { hashes, combined, tag, rawTag }; renderResults(); $btnClearResults.show(); } catch (err) { $generateError.text(err.message).show(); } finally { $btnGenerate.prop('disabled', false).html(' Generate SRI Hash'); } }); function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } function renderResults() { if (!generatedData) return; $resultsEmpty.hide(); $resultsContainer.show(); // Individual hashes let hashHtml = ''; for (const algo of selectedAlgos) { if (generatedData.hashes[algo]) { hashHtml += `
${algo.toUpperCase()}
${escapeHtml(generatedData.hashes[algo])}
`; } } $hashResults.html(hashHtml); // Combined if (selectedAlgos.length > 1) { $combinedCard.show(); $combinedHash.text(generatedData.combined); } else { $combinedCard.hide(); } // Tag $tagOutput.html(generatedData.tag); $tagOutputRaw.text(generatedData.rawTag); $btnClearResults.show(); } // Copy buttons $tool.on('click', '.sri-copy-btn', function() { const $btn = $(this); let textToCopy; if ($btn.data('copy-text')) { textToCopy = $btn.data('copy-text'); } else if ($btn.data('copy-target')) { const targetId = $btn.data('copy-target'); textToCopy = $('#' + targetId).text().trim(); if (targetId === 'sri-tag-output-raw') { textToCopy = $tagOutputRaw.text().trim(); } } if (textToCopy) { copyToClipboard(textToCopy, $btn); } }); $tool.find('#sri-btn-copy-tag').on('click', function() { if (generatedData && generatedData.rawTag) { copyToClipboard(generatedData.rawTag, $(this)); } }); function copyToClipboard(text, $btn) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { onCopySuccess($btn); }).catch(function() { fallbackCopy(text, $btn); }); } else { fallbackCopy(text, $btn); } } function fallbackCopy(text, $btn) { const $ta = $('