|
| 1 | +<html> |
| 2 | + <head> |
| 3 | + <meta http-equiv="content-security-policy" content="frame-src 'none'"> |
| 4 | + </head> |
| 5 | + <body> |
| 6 | + <iframe id="renderer" sandbox="allow-scripts allow-modals" srcdoc=""></iframe> |
| 7 | + |
| 8 | + <script> |
| 9 | + // the *partial* verifiable credential filtered by `renderProperty` |
| 10 | + const credential = { |
| 11 | + '@context': [ |
| 12 | + 'https://www.w3.org/ns/credentials/v2', |
| 13 | + 'https://www.w3.org/ns/credentials/examples/v2' |
| 14 | + ], |
| 15 | + type: ['VerifiableCredential', 'NameCredential'], |
| 16 | + issuer: { |
| 17 | + id: 'did:example:1234', |
| 18 | + name: 'The Issuer', |
| 19 | + }, |
| 20 | + credentialSubject: { |
| 21 | + name: 'Example Name', |
| 22 | + } |
| 23 | + }; |
| 24 | + |
| 25 | + // template value extracted from the original VC |
| 26 | + const template = ` |
| 27 | + <div> |
| 28 | + <h1 id="credentialSubject-name"></h1> |
| 29 | + <p>Issued by: <span id="issuer-name"></span></p> |
| 30 | +
|
| 31 | + <script> |
| 32 | + console.log('running template render script'); |
| 33 | +
|
| 34 | + // display credential as JSON as an example renderer; anything |
| 35 | + // could be done here instead, including mustache/other-style |
| 36 | + // template processing to generate the HTML for display |
| 37 | + const credential = JSON.parse(document.querySelector( |
| 38 | + 'head > script[name="credential"]').innerHTML); |
| 39 | +
|
| 40 | + document.querySelector('#credentialSubject-name').innerText = |
| 41 | + credential.credentialSubject.name; |
| 42 | + document.querySelector('#issuer-name').innerText = |
| 43 | + credential.issuer.name; |
| 44 | + <\/script> |
| 45 | + </div> |
| 46 | + `; |
| 47 | + |
| 48 | + // Setup the iframe shim code--required for security sandboxing |
| 49 | + renderer.srcdoc = `<!DOCTYPE html> |
| 50 | + <html> |
| 51 | + <head> |
| 52 | + <meta http-equiv="content-security-policy" content="connect-src 'none'"> |
| 53 | + <script name="credential" type="application/vc">${JSON.stringify(credential)}<\/script> |
| 54 | + </head> |
| 55 | + <body>${template}</body> |
| 56 | + </html>`; |
| 57 | + </script> |
| 58 | + </body> |
| 59 | +</html> |
0 commit comments