This repository has been archived by the owner on Apr 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
139 lines (124 loc) · 7.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Generate Subresource Integrity (SRI) attributes, easily and fast">
<title>SRI Hash Generator</title>
<link rel="canonical" href="https://www.srihash.org/">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="badge/badge.css" integrity="sha256-W/HJOs3990RCHyGg0j2NjYy4xSrtLhIe1hbzdzDYzXE=">
<link rel="stylesheet" href="badge/will-pass.css">
<link rel="stylesheet" href="badge/must-fail.css" integrity="sha384-INVALIDHASH">
<link rel="apple-touch-icon" href="favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#333333">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="SRI Hash Generator">
<meta name="application-name" content="SRI Hash Generator">
<meta name="msapplication-TileColor" content="#333333">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#333333">
<!-- meta tags for social media-->
<meta name="title" content="SRI Hash Generator">
<meta name="description" content="Generate Subresource Integrity (SRI) attributes, easily and fast">
<!-- Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.srihash.org/">
<meta property="og:title" content="SRI Hash Generator">
<meta property="og:description" content="Generate Subresource Integrity (SRI) attributes, easily and fast">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.srihash.org/">
<meta property="twitter:title" content="SRI Hash Generator">
<meta property="twitter:description" content="Generate Subresource Integrity (SRI) attributes, easily and fast">
<meta property="twitter:image" content="">
<script src="clipboard.js" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<pre id="for-copy"></pre>
<!-- Nav -->
<nav>
<a href="#about">About</a>
<a href="#app">Hash Generator</a>
<br class="clear">
</nav>
<!-- Banner -->
<div id="app" class="container">
<div class="container" id="sriAppContainer">
<div id="sri-app">
<h1>SRI Hash Generator</h1>
<label for="url">Enter the URL of the resource you wish to use:</label>
<form id="sri-form" action="#">
<input id="url" name="url" type="url" value="" placeholder="Resource URL" required autofocus spellcheck="false">
<select id="sriHash" type="select">
<option value="sha256">SHA-256</option>
<option value="sha384" selected>SHA-384</option>
<option value="sha512">SHA-512</option>
</select>
<input id="sriSubmit" type="submit" value="Hash!">
</form>
<pre id="sri-snippet" name="sriSnippet"></pre>
<div id="sri-error"></div>
</div>
</div>
</div>
<!-- About -->
<section id="about" class="container">
<h2>What is Subresource Integrity?</h2>
<p>SRI is a new <a href="https://www.w3.org/TR/SRI/">W3C specification</a> that allows web developers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.</p>
<p>Learn more about <a href="https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity">how to use subresource integrity</a> on MDN.</p>
<hr>
<h2>How is Subresource Integrity different to HTTPS?</h2>
<p>TLS ensures that the connection between the browser and the server is secure. The resource itself may still be modified server-side by an attacker to include malicious content, yet still be served with a valid TLS certificate. SRI, on the other hand, guarantees that a resource hasn't changed since it was hashed by a web author.</p>
<hr>
<h2>How can I generate Integrity hashes?</h2>
<p>Use the generator above or the following shell command:<br>
<code>
openssl dgst -sha384 -binary <strong>FILENAME.js</strong> | openssl base64 -A
</code>
</p>
<hr>
<h2>Why do I need to include <code class="inline">crossorigin="anonymous"</code>?</h2>
<p>
When the request is not on the same origin the <code class="inline">crossorigin</code> attribute must be present to check the integrity of the
file.<br>
Without a <code class="inline">crossorigin</code> attribute, the browser will choose to 'fail-open' which
means it will load the resource as if the integrity attribute was not set, effectively losing all the security SRI brings in the first place.<br><br>
<code class="inline">crossorigin="anonymous"</code> results that no credentials are sent to the cross-origin site hosting the content. However,
it will send an <code class="inline">Origin</code> HTTP header. If the server denies including the resource (by not setting the <code class="inline">Access-Control-Allow-Origin</code> HTTP header),
the resource will not be used by the browser.<br>
You can find more information on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">MDN.</a>
</p>
<hr>
<h2>Test your browser</h2>
<p>Check out <a href="https://caniuse.com/#feat=subresource-integrity">SRI on caniuse.com</a> to see specific browser version support information.</p>
<p>To fully test your browser for subresource integrity support, please open <a href="https://wpt.live/subresource-integrity/subresource-integrity.html">this page</a>.</p>
<div class="sri-test" id="sri-badge">
<div data-sri-status="pass">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="64" focusable="false">
<title>Pass</title>
<path fill="#79bd8f" d="M0 8.383c8.291 0 19.824-2.551 25-8.383 5.195 5.832 16.7 8.383 25 8.383C50 55.797 25 64 25 64S0 55.747 0 8.383z"/>
</svg>
<p>Your browser supports SRI</p>
</div>
<div data-sri-status="fail">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="64" focusable="false">
<title>Fail</title>
<path fill="#ff6138" d="M25 0c-3.2 3.63-8.9 6.02-14.8 7.28L25 21.98l14.8-14.7C33.9 6.02 28.2 3.63 25 0zM0 11.2c.284 13 2.51 22.8 5.5 30.3l12.4-12.4L0 11.2zm50 0L32.1 29.1l12.4 12.4c3-7.5 5.2-17.3 5.5-30.3zm-25 25L10.3 50.9C17.2 61.4 25 64 25 64s7.8-2.6 14.7-13.1L25 36.2z"/>
</svg>
<p>Your browser does not support SRI</p>
</div>
</div>
</section>
<hr>
<!-- Footer -->
<footer class="container">
The code behind this service is hosted on <a href="https://github.com/mozilla/srihash.org">GitHub</a> and is licensed under the <a href="https://www.mozilla.org/MPL/2.0/">Mozilla Public License 2.0</a>.
</footer>
</body>
</html>