Skip to content

Instantly share code, notes, and snippets.

@undirectlookable

undirectlookable/README.md

Last active June 23, 2020 16:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save undirectlookable/f34cb3eb6a3bda9a2e5712fac39734e6 to your computer and use it in GitHub Desktop.
Save undirectlookable/f34cb3eb6a3bda9a2e5712fac39734e6 to your computer and use it in GitHub Desktop.
Download ZIP
Subresource Integrity (SRI) Hash Generator
Raw
README.md
Raw
srihash.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Subresource Integrity (SRI) Hash Generator">
<meta name="keywords" content="SRI,HTML">
<meta name="author" content="undirectlookable@users.noreply.github.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>SRI Hash Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"
integrity="sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7"
crossorigin="anonymous"></script>
<style>textarea { word-break: break-all; white-space: nowrap; }</style>
</head>
<body>
<h1>Subresource Integrity (SRI) Hash Generator</h1>
<div>Enter the URL of the resource you wish to use:</div>
<form action="" target="_self" id="form" onsubmit="return getInterity();">
<input
type="text"
name="url"
placeholder="URL"
size="100"
autocomplete="off"
list="url-example"
value=""
onfocus="this.select()"
required>
<input type="submit" value="Get SRI Hash">
</form>
<datalist id="url-example">
<option value="https://code.jquery.com/jquery-3.2.1.min.js"></option>
<option value="https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css"></option>
</datalist>
<h2>Results</h2>
<div>sha256</div>
<textarea id="sha256" cols="120" rows="4" onfocus="this.select()"></textarea>
<div>sha384</div>
<textarea id="sha384" cols="120" rows="4" onfocus="this.select()"></textarea>
<div>sha512</div>
<textarea id="sha512" cols="120" rows="4" onfocus="this.select()"></textarea>
<footer>
<ul>
<li><a href="https://gist.github.com/undirectlookable/f34cb3eb6a3bda9a2e5712fac39734e6">Source Code</a></li>
<li>Reference <a href="https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity">Subresource Integrity (MDN)</a></li>
<li>Powered By <a href="https://github.com/brix/crypto-js">crypto-js</a></li>
</ul>
</footer>
<script type="text/javascript">
function getInterity () {
var form = document.getElementById('form');
var url = form.url.value;
var type = 'script';
fetch(url)
.then(function(response) {
var type = 'script';
var contentType = response.headers.get('content-type');
if (contentType.indexOf('text/css') !== -1) type = 'css';
response.text().then(function(source) {
['sha256', 'sha384', 'sha512'].forEach(function (cipher) {
var hash = CryptoJS[cipher.toUpperCase()](source);
var b64 = hash.toString(CryptoJS.enc.Base64);
var result;
switch (type) {
case 'script':
result = '<script src="' + url + '"\n integrity="' + cipher + '-' + b64 + '"\n crossorigin="anonymous"><\/script>';
break;
case 'css':
result = '<link rel="stylesheet"\n href="' + url + '"\n integrity="' + cipher + '-' + b64 + '"\n crossorigin="anonymous">';
break;
default:
break;
}
document.getElementById(cipher).value = result;
});
});
})
.catch(function (err) {
alert('error fetch source code');
});
return false;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment