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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
|
---
title: SubtleCrypto
slug: Web/API/SubtleCrypto
tags:
- API
- Advanced
- Cryptography
- Encryption
- Interface
- NeedsTranslation
- Reference
- SubtleCrypto
- TopicStub
- Web Crypto API
translation_of: Web/API/SubtleCrypto
---
<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
<p>The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</p>
<div class="warning">
<p><strong>Warning:</strong> This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.</p>
<p>Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.</p>
<p>Errors in security system design and implementation can make the security of the system completely ineffective.</p>
<p><strong>If you're not sure you know what you are doing, you probably shouldn't be using this API.</strong></p>
</div>
<h2 id="Properties">Properties</h2>
<p><em>This interface doesn't inherit any properties, as it has no parent interface.</em></p>
<h2 id="Methods">Methods</h2>
<p><em>This interface doesn't inherit any methods, as it has no parent interface.</em></p>
<dl>
<dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.sign()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.verify()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.digest()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.</dd>
<dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.</dd>
<dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.</dd>
<dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.</dd>
</dl>
<h2 id="Using_SubtleCrypto">Using SubtleCrypto</h2>
<p>We can split the functions implemented by this API into two groups: cryptography functions and key management functions.</p>
<h3 id="Cryptography_functions">Cryptography functions</h3>
<p>These are the functions you can use to implement security features such as privacy and authentication in a system. The <code>SubtleCrypto</code> API provides the following cryptography functions:</p>
<p>* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.<br>
* {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.<br>
* {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.</p>
<h3 id="Key_management_functions">Key management functions</h3>
<p>Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the <code>SubtleCrypto</code> API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.</p>
<h4 id="Generating_and_deriving_keys">Generating and deriving keys</h4>
<p>The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.</p>
<p>The difference is that <code>generateKey()</code> will generate a new distinct key value each time you call it, while <code>deriveKey()</code> derives a key from some initial keying material. If you provide the same keying material to two separate calls to <code>deriveKey()</code>, you will get two <code>CryptoKey</code> objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.</p>
<h4 id="Importing_and_exporting_keys">Importing and exporting keys</h4>
<p>To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.</p>
<p>The inverse of <code>exportKey()</code> is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like <a href="https://tools.ietf.org/html/rfc5208">PKCS #8</a> and <a href="https://tools.ietf.org/html/rfc7517">JSON Web Key</a> helps you do this. The <code>exportKey()</code> function exports the key in an unencrypted format.</p>
<p>If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".</p>
<p>The inverse of <code>wrapKey()</code> is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.</p>
<h4 id="Storing_keys">Storing keys</h4>
<p><code>CryptoKey</code> objects can be stored using the <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a>, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store <code>CryptoKey</code> objects.</p>
<h3 id="Supported_algorithms">Supported algorithms</h3>
<p>The cryptographic functions provided by the Web Crypto API can be performed by one or more different <em>cryptographic algorithms</em>: the <code>algorithm</code> argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the <code>algorithm</code> argument is a dictionary object that includes the extra parameters.</p>
<p>The table below summarises which algorithms are suitable for which cryptographic operations:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="row"></th>
<th scope="col">
<p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
<p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
</th>
<th scope="col">
<p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
<p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
</th>
<th scope="col"><a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></th>
<th scope="col">
<p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a></p>
<p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a></p>
</th>
<th scope="col">
<p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
<p><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a></p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">RSASSA-PKCS1-v1_5</th>
<td>✓</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">RSA-PSS</th>
<td>✓</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ECDSA</th>
<td>✓</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">HMAC</th>
<td>✓</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">RSA-OAEP</th>
<td></td>
<td>✓</td>
<td></td>
<td></td>
<td>✓</td>
</tr>
<tr>
<th scope="row">AES-CTR</th>
<td></td>
<td>✓</td>
<td></td>
<td></td>
<td>✓</td>
</tr>
<tr>
<th scope="row">AES-CBC</th>
<td></td>
<td>✓</td>
<td></td>
<td></td>
<td>✓</td>
</tr>
<tr>
<th scope="row">AES-GCM</th>
<td></td>
<td>✓</td>
<td></td>
<td></td>
<td>✓</td>
</tr>
<tr>
<th scope="row">SHA-1</th>
<td></td>
<td></td>
<td>✓</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">SHA-256</th>
<td></td>
<td></td>
<td>✓</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">SHA-384</th>
<td></td>
<td></td>
<td>✓</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">SHA-512</th>
<td></td>
<td></td>
<td>✓</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ECDH</th>
<td></td>
<td></td>
<td></td>
<td>✓</td>
<td></td>
</tr>
<tr>
<th scope="row">HKDF</th>
<td></td>
<td></td>
<td></td>
<td>✓</td>
<td></td>
</tr>
<tr>
<th scope="row">PBKDF2</th>
<td></td>
<td></td>
<td></td>
<td>✓</td>
<td></td>
</tr>
<tr>
<th scope="row">AES-KW</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>✓</td>
</tr>
</tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
<td>{{ Spec2('Web Crypto API') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.SubtleCrypto")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li>
<li><a href="/en-US/docs/Web/Security">Web security</a></li>
<li><a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li>
<li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
<li><a href="https://www.crypto101.io/">Crypto 101</a>: an introductory course on cryptography.</li>
</ul>
|