-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
467 lines (418 loc) · 15.8 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
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
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
<!DOCTYPE html>
<html>
<head>
<title>Verifiable Credential Rendering Methods</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--
=== NOTA BENE ===
For the three scripts below, if your spec resides on dev.w3 you can check them
out in the same tree and use relative links so that they'll work offline,
-->
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
<script class="remove" src="https://w3c.github.io/vc-data-integrity/common.js"></script>
<script type="text/javascript" class="remove">
var respecConfig = {
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
specStatus: "CG-DRAFT",
// the specification's short name, as in http://www.w3.org/TR/short-name/
shortName: "vc-render-method",
group: "credentials",
// if you wish the publication date to be other than today, set this
//publishDate: "2023-04-18",
// if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
// and its maturity status
// previousPublishDate: "1977-03-15",
// previousMaturity: "WD",
// if there a publicly available Editor's Draft, this is the link
edDraftURI: "https://w3c-ccg.github.io/vc-render-method/",
//latestVersion: "https://www.w3.org/community/reports/credentials/CG-FINAL-di-eddsa-2020-20220724/",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// if you want to have extra CSS, append them to this list
// it is recommended that the respec.css stylesheet be kept
//extraCSS: ["spec.css", "prettify.css"],
// editors, add as many as you like
// only "name" is required
editors: [{
name: "Manu Sporny",
url: "https://www.linkedin.com/in/manusporny/",
company: "Digital Bazaar",
companyURL: "https://digitalbazaar.com/",
w3cid: 41758
}, {
name: "Dmitri Zagidulin",
url: "https://www.linkedin.com/in/dzagidulin/",
company: "MIT Digital Credentials Consortium",
companyURL: "https://digitalcredentials.mit.edu/",
w3cid: 86708
}, {
name: "Calvin Cheng",
url: "https://linkedin.com/in/cxcheng/",
company: "Government Technology Agency of Singapore",
companyURL: "https://www.tech.gov.sg/"
}, {
name: "Kyle Huang Junyuan",
url: "https://www.linkedin.com/in/kyle-huang-junyuan/",
company: "Government Technology Agency of Singapore",
companyURL: "https://www.tech.gov.sg/"
}, {
name: "Patrick St. Louis",
url: "https://www.linkedin.com/in/patrick-stlouis/",
company: "Open Security and Identity",
companyURL: "https://opsecid.ca/"
}],
authors: [{
name: "Manu Sporny", url: "https://www.linkedin.com/in/manusporny/",
company: "Digital Bazaar", companyURL: "https://digitalbazaar.com/",
w3cid: 41758
}, {
name: "Dmitri Zagidulin",
url: "https://www.linkedin.com/in/dzagidulin/",
company: "MIT Digital Credentials Consortium",
companyURL: "https://digitalcredentials.mit.edu/",
w3cid: 86708
}, {
name: "Calvin Cheng",
url: "https://linkedin.com/in/cxcheng/",
company: "Government Technology Agency of Singapore",
companyURL: "https://www.tech.gov.sg/"
}, {
name: "Kyle Huang Junyuan",
url: "https://www.linkedin.com/in/kyle-huang-junyuan/",
company: "Government Technology Agency of Singapore",
companyURL: "https://www.tech.gov.sg/"
}, {
name: "Patrick St. Louis",
url: "https://www.linkedin.com/in/patrick-stlouis/",
company: "Open Security and Identity",
companyURL: "https://opsecid.ca/"
}],
github: "https://github.com/w3c-ccg/vc-render-method/",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI from a random
// document unless you know what you're doing. If in doubt ask your friendly neighbourhood
// Team Contact.
// wgPatentURI: "",
maxTocLevel: 4,
/*preProcess: [ webpayments.preProcess ],
alternateFormats: [ {uri: "diff-20111214.html", label: "diff to previous version"} ],
*/
localBiblio: {
MULTIBASE: {
title: "Multibase",
href: "https://datatracker.ietf.org/doc/html/draft-multiformats-multibase-01",
},
MULTICODEC: {
title: "Multicodec",
href: "https://github.com/multiformats/multicodec/",
},
},
lint: {"no-unused-dfns": false},
postProcess: [restrictRefs]
};
</script>
<style>
pre .highlight {
font-weight: bold;
color: green;
}
pre .comment {
font-weight: bold;
color: Gray;
}
.color-text {
font-weight: bold;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
ol.algorithm {
counter-reset: numsection;
list-style-type: none;
}
ol.algorithm li {
margin: 0.5em 0;
}
ol.algorithm li:before {
font-weight: bold;
counter-increment: numsection;
content: counters(numsection, ".") ") ";
}
</style>
</head>
<body>
<section id="abstract">
<p>
This specification describes mechanisms that can be used to represent a
Verifiable Credential through a visual, auditory, or haptic medium. It covers
rendering a Verifiable Credential to a physical document, digital image,
screen reader, or braille output.
</p>
</section>
<section id="sotd">
<p>
This is an experimental specification and is undergoing regular revisions. It is
not fit for production deployment.
</p>
</section>
<section>
<h2>Introduction</h2>
<p>
Rendering methods can be used when the <a>issuer</a> has a specific way that
they want to express a <a>verifiable credential</a> to an observer through
a visual, auditory, or haptic mechanism. For example, an <a>issuer</a> of an
employee badge credential might want to include rich imagery of their corporate
logo and specific placement of employee information in specific areas of the
badge. They might also want to provide an audio read out of the important
aspects of the badge for individuals that have accessibility needs related
to their eyesight.
</p>
<section id="terminology">
<h3>Terminology</h3>
<div data-include="https://w3c.github.io/vc-data-model/terms.html"></div>
</section>
<section id="conformance">
<p>
A <dfn>conforming render method</dfn> is any concrete expression of the data
model that complies with the normative statements in this specification.
Specifically, all relevant normative statements in Sections
<a href="#data-model"></a> and <a href="#algorithms"></a>
of this document MUST be enforced.
</p>
<p>
A <dfn class="lint-ignore">conforming processor</dfn> is any algorithm realized
as software and/or hardware that generates or consumes a
<a>conforming render method</a>. Conforming processors MUST produce errors when
non-conforming documents are consumed.
</p>
<p>
This document also contains examples that contain JSON and JSON-LD content. Some
of these examples contain characters that are invalid JSON, such as inline
comments (`//`) and the use of ellipsis (`...`) to denote
information that adds little value to the example. Implementers are cautioned to
remove this content if they desire to use the information as valid JSON or
JSON-LD.
</p>
</section>
</section>
<section>
<h2>Data Model</h2>
<p>
The following sections outline the data model that is used by this specification
for rendering methods
</p>
<section>
<h3>The `renderMethod` Property</h3>
<p>
The `renderMethod` property is a
<a href="https://www.w3.org/TR/vc-data-model-2.0/#reserved-extension-points">
reserved extension point</a> in the Verifiable Credentials Data Model
specification [[VC-DATA-MODEL-2.0]]. An <a>issuer</a> can utilize this
property in a <a>verifiable credential</a> to express one or more preferred
render methods.
</p>
<dl>
<dt><var>renderMethod</var></dt>
<dd>
The value of the `renderMethod` property MUST specify one or
more rendering methods that can be used by software to express the
<a>verifiable credential</a> using a visual, auditory, or haptic mechanism. Each
`renderMethod` value MUST specify its `type`, for example,
`SvgRenderingTemplate`. The precise contents of each rendering
hint is determined by the specific `renderMethod` `type`
definition.
</dd>
</dl>
</section>
<section>
<h4>SvgRenderingTemplate</h4>
<p>
When an <a>issuer</a> desires to specify SVG rendering instructions for a
<a>verifiable credential</a>, they MAY add a `render` property that uses the
data model described below.
</p>
<table class="simple">
<thead>
<tr>
<th style="white-space: nowrap">Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>
A URL that dereferences to an SVG image [[SVG]] with an associated
`image/svg+xml` media type.
</td>
</tr>
<tr>
<td>type</td>
<td>
The <code>type</code> property MUST be <code>SvgRenderingTemplate</code>.
</td>
</tr>
<tr>
<td>name</td>
<td>
A name that can be used by a display to express the type of rendering that
is associated with the render method. This property might be used in a
graphical interface that enables an individual to select between multiple
presentation modes.
</td>
</tr>
<tr>
<td>css3MediaQuery</td>
<td>
A CSS Level 3 Media Query that can be used to specify desired characteristics
in the display device. If there are multiple render methods, the best match
to the CSS Level 3 Media Query will be used by default. It is expected that
an individual could override this preference through a manual process.
</td>
</tr>
<tr>
<td>digestMultibase</td>
<td>
An optional multibase-encoded multihash of the SVG image. The multibase value
MUST be `z` and the multihash value MUST be SHA-2 with 256-bits of output
(`0x12`).
</td>
</tr>
</tbody>
</table>
<p>
The data model shown above is expressed in a <a>verifiable credential</a>
in the example below.
</p>
<pre class="example nohighlight"
title="Usage of the render property by an issuer">
{
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2",
"https://w3id.org/vc/render-method/v1"
],
"id": "http://example.edu/credentials/3732",
"type": ["VerifiableCredential", "UniversityDegreeCredential"],
"issuer": "https://example.edu/issuers/14",
"validFrom": "2010-01-01T19:23:24Z",
"credentialSubject": {
"id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
"degree": {
"type": "BachelorDegree",
"name": "Bachelor of Science and Arts"
}
},
<span class="highlight">"renderMethod": [{
"id": "https://example.edu/credentials/BachelorDegree.svg",
"type": "SvgRenderingTemplate",
"name": "Portrait Mode",
"css3MediaQuery": "@media (orientation: portrait)",
"digestMultibase": "zQmAPdhyxzznFCwYxAp2dRerWC85Wg6wFl9G270iEu5h6JqW"
}]
</span>
}
</pre>
<p>
In the example above, the <a>issuer</a> has provided an SVG rendering template
for a bachelor's degree that will be filled in with the information in the
<a>verifiable credential</a>. The rendering is preferred when the device or
paper is in a portrait (display is taller than it is wider) orientation.
</p>
</section>
</section>
<section>
<h2>Algorithms</h2>
<p>
The following sections outline the algorithms that is used by this specification
for rendering methods.
</p>
<section>
<h5>Render (SvgRenderingTemplate)</h5>
<p>
The following algorithm is used to transform the SVG image template into the
final SVG image that is displayed. The inputs to the algorithm are the
<a>verifiable credential</a> (`verifiableCredential`) and the SVG image
source code (`svgImage`). The output is a SVG image.
</p>
<ol class="algorithm">
<li>
Generate a map, `replacementMap`, by finding all strings in `svgImage` that
start with `{{` (double open braces) and end with `}}`
(double close braces). For each string, `templateKey`, that is found:
<ol class="algorithm">
<li>
Generate another string, `templateValue`, by evaluating the value of
`templateKey` (without the opening or closing braces) using the JSON
Pointer [[RFC6901]] algorithm with the `verifiableCredential` as input to the
algorithm. If the evaluation is `null`, set `templateValue` to the empty string.
</li>
<li>
Set a key in `replacementMap` by using `templateKey` and associate it with
`templateValue`.
</li>
</ol>
</li>
<li>
For every key in `replacementMap`, replace each corresponding
string in `svgImage` that matches the key with the associated value in the
`replacementMap`.
</li>
</ol>
</section>
</section>
<section>
<h2>Security Considerations</h2>
<p class="issue" title="Summary of Security Considerations">
The list of security considerations listed below need to be converted into
sections:
</p>
<ul>
<li>
If a cryptographic hash for a display template isn't provided, you can't know
if it has been tampered with since issuance. There are good reasons an issuer
might allow for this, such as being able to update the look/feel of a
long-lived credential over time.
</li>
<li>
If a cryptographic hash for a display template is provided, implementations
that don't check it run the risk of display attacks, which might sound benign,
but they aren't; Verifiers might use verifiable displays to show what the
issuer intended, and if those displays don't check the cryptographic hash,
they might show the wrong info to an individual checking the credential on
the verifiable display.
</li>
<li>
Fetching resources from external locations can be used as a denial-of-service
attack vector where the resource is never served, or served at a very slow pace.
</li>
</ul>
</section>
<section>
<h2>Privacy Considerations</h2>
<p class="issue" title="Summary of Privacy Considerations">
The list of privacy considerations listed below need to be converted into
sections:
</p>
<ul>
<li>
An issuer could use a rendering method `id` to track individuals. These
values should be aggressively cached client-side, or looked up using a
mixnet or proxy service.
</li>
</ul>
</section>
<section>
<h2>Internationalization Considerations</h2>
<p class="issue" title="Summary of Internationalization Considerations">
The list of internationalization considerations listed below need to be
converted into sections:
</p>
<ul>
<li>
Are we allowed to use media queries to detect language and provide different
displays based on language?
</li>
</ul>
</section>
</body>
</html>