검증 가능한 자격 증명 렌더링 방법 v1.0
이 문서에 대한 자세한 정보
Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
이 명세는 시각, 청각 또는 촉각 매체를 통해 검증 가능한 자격 증명을 표현하는 데 사용할 수 있는 검증 가능한 자격 증명 데이터 모델의 확장 메커니즘을 설명합니다. 이는 검증 가능한 자격 증명을 물리적 문서, 디지털 이미지, 스크린 리더 또는 점자 출력으로 렌더링하는 것을 다룹니다.
이 절은 이 문서가 발행된 시점의 상태를 설명합니다. 현재 W3C 발행물 목록과 이 기술 보고서의 최신 개정판은 다음 W3C 표준 및 초안 색인에서 확인할 수 있습니다.
이것은 실험적 명세이며 정기적으로 개정되고 있습니다. 이는 프로덕션 배포에 적합하지 않습니다.
이 문서는 검증 가능한 자격 증명 작업 그룹이 권고안 트랙을 사용하여 작업 초안으로 발행했습니다.
작업 초안으로 발행되었다고 해서 W3C 및 그 회원의 승인을 의미하지는 않습니다.
이것은 초안 문서이며 언제든지 다른 문서로 업데이트, 대체 또는 폐기될 수 있습니다. 이 문서를 진행 중인 작업 이외의 것으로 인용하는 것은 적절하지 않습니다.
이 문서는 W3C 특허 정책에 따라 운영되는 그룹이 작성했습니다. W3C는 해당 그룹의 산출물과 관련하여 이루어진 모든 특허 공개의 공개 목록을 유지합니다. 이 페이지에는 특허 공개를 위한 지침도 포함되어 있습니다. 자신이 믿기에 필수 청구항을 포함하는 특허에 대해 실제 지식을 가진 개인은 W3C 특허 정책 제6절에 따라 해당 정보를 공개해야 합니다.
이 문서는 2025년 8월 18일 W3C 프로세스 문서의 적용을 받습니다.
렌더링 방법은 발행자가 시각, 청각 또는 촉각 메커니즘을 통해 관찰자에게 검증 가능한 자격 증명을 표현하려는 특정 방식이 있을 때 사용할 수 있습니다. 예를 들어, 직원 배지 자격 증명의 발행자는 회사 로고의 풍부한 이미지와 배지의 특정 영역에 직원 정보를 특정 방식으로 배치하는 내용을 포함하고자 할 수 있습니다. 또한 시력과 관련된 접근성 요구가 있는 개인을 위해 배지의 중요한 측면을 음성으로 읽어 주는 기능을 제공하고자 할 수도 있습니다.
다음 용어는 이 명세의 개념을 설명하는 데 사용됩니다.
이 문서의 자격 증명 정의는 NIST의 자격 증명 정의와 다릅니다.
did:example:123456abcdef입니다.
verifiableCredential와 같은 특정 속성과 연결된
그래프입니다. 이러한 속성은
해당 JSON 객체에 정의된 모든 클레임을 포함하는
별도의 그래프를 생성합니다.
비규범으로 표시된 절뿐 아니라, 이 명세의 모든 작성 지침, 도표, 예제 및 참고 사항은 비규범입니다. 이 명세의 그 밖의 모든 내용은 규범입니다.
이 문서에서 핵심 단어 MAY, MUST, MUST NOT, OPTIONAL, RECOMMENDED, REQUIRED 및 SHOULD는 여기에 표시된 것처럼 모두 대문자로 나타나는 경우에만 BCP 14 [RFC2119] [RFC8174]에 설명된 대로 해석되어야 합니다.
적합한 렌더 방법은 이 명세의 규범적 문장을 준수하는 데이터 모델의 구체적 표현입니다. 구체적으로, 이 문서의 2. 데이터 모델 및 2.2.4.2 알고리즘 절에 있는 모든 관련 규범적 문장은 MUST 적용되어야 합니다.
적합한 처리기는 적합한 렌더 방법을 생성하거나 소비하는, 소프트웨어 및/또는 하드웨어로 실현된 모든 알고리즘입니다. 적합한 처리기는 부적합 문서가 소비될 때 오류를 생성해야 MUST 합니다.
이 문서에는 JSON 및 JSON-LD 콘텐츠를 포함하는 예제도 들어 있습니다. 이러한
예제 중 일부에는 인라인 주석(//)이나
예제에 거의 가치를 더하지 않는 정보를 나타내기 위한 생략 부호(...) 사용처럼
유효하지 않은 JSON 문자가 포함되어 있습니다. 구현자는 이 정보를 유효한 JSON 또는
JSON-LD로 사용하려는 경우 이러한 콘텐츠를 제거해야 함에 유의해야 합니다.
다음 절에서는 이 명세가 렌더링 방법에 사용하는 데이터 모델을 개괄합니다.
renderMethod 속성은 검증 가능한 자격 증명 데이터 모델
명세 [VC-DATA-MODEL-2.0]의
예약된 확장 지점입니다. 발행자는 이 속성을
검증 가능한 자격 증명에서 사용하여 하나 이상의 선호
렌더링 방법을 표현할 수 있습니다.
renderMethod 속성의 값은 소프트웨어가 시각, 청각 또는
촉각 메커니즘을 사용하여
검증 가능한 자격 증명을 표현하는 데 사용할 수 있는 하나 이상의
렌더링 방법을 지정해야 MUST 합니다. 각
renderMethod 값은 예를 들어
TemplateRenderMethod와 같이 자신의 type을 지정해야
MUST 합니다. 각 렌더링 힌트의 정확한 내용은 특정
renderMethod type 정의에 의해 결정됩니다.
발행자가
검증 가능한 자격 증명에 대한 템플릿 기반 렌더링 지침을 지정하려는 경우,
아래에 설명된 데이터 모델을 사용하는 renderMethod 속성을 추가할 수
MAY 있습니다.
| 속성 | 설명 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| id | URL 표준을 따르며, 가져올 때 렌더 템플릿으로 역참조되는 OPTIONAL 문자열입니다. | ||||||||
| type |
값이 TemplateRenderMethod여야 MUST 하는
REQUIRED 문자열입니다.
|
||||||||
| renderSuite | 구체적인 렌더링을 생성하는 데 사용되는 알고리즘을 식별하는 REQUIRED 문자열입니다. | ||||||||
| name | 수행될 렌더링 유형에 대한 힌트를 제공하기 위해 표시될 수 있는 사람이 읽을 수 있는 OPTIONAL 문자열입니다. 이 속성은 개인이 여러 프레젠테이션 모드 중에서 선택할 수 있도록 하는 그래픽 인터페이스에서 사용될 수 있습니다. | ||||||||
| description |
특정 렌더링이 언제 유용할 수 있는지에 대해 name보다 더 상세한
설명을 제공하는 사람이 읽을 수 있는 OPTIONAL
문자열입니다.
|
||||||||
| renderProperty |
이 특정 렌더 방법을 사용할 때
검증 가능한 자격 증명에서 어떤 속성이 노출되는지를 지정하는,
JavaScript Object Notation (JSON)
Pointer 구문을 각각 따르는
문자열 값의
OPTIONAL 목록입니다.
renderProperty가 제공되지 않으면 렌더 방법이 사용될 때 전체
검증 가능한 자격 증명이
공유되는 것으로 간주됩니다.
|
||||||||
| template |
렌더링을 수행하는 데 사용될 템플릿을 제공하거나 참조하는
OPTIONAL URL 또는 맵입니다.
값이 URL인 경우,
템플릿 코드를 포함하는 data: URL [RFC2397]일 수
MAY 있습니다. 값이 맵인 경우, 다음 규칙을
따라야 MUST 합니다.
|
||||||||
| digestMultibase |
id가 지정된 경우 참조된 렌더 방법의 multibase 인코딩
Multihash인 OPTIONAL 값입니다. multibase 값은
u(base64url-nopad)여야 MUST 하며,
multihash 값은 256비트 출력(0x12)을 갖는 SHA-2여야
MUST 합니다.
|
위에 표시된 데이터 모델은 아래 예제의 검증 가능한 자격 증명 안에 표현됩니다.
{
"@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"
}
},
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "svg-mustache",
"template": {
"id": "https://example.edu/credential-templates/BachelorDegree",
"mediaType": "image/svg+xml",
"digestMultibase": "zQmerWC85Wg6wFl9znFCwYxApG270iEu5h6JqWAPdhyxz2dR",
"renderProperty": [
"/issuer", "/validFrom", "/credentialSubject/degree/name"
]
}
}
}
위 예제에서 발행자는
renderProperty에 나열된 검증 가능한 자격 증명의 특정
정보로 채워질 학사 학위용 Mustache 기반 SVG 렌더링 템플릿을 제공했습니다.
svg-mustache 렌더 제품군은 Mustache 템플릿 언어를 사용하여
SVG 파일을 수정하고, 이 파일은 이후
검증 가능한 자격 증명의 시각적 표현을
렌더링하는 데 사용됩니다.
아래 예제에서는 완전히 포함된 SVG 파일이 렌더링 템플릿으로 사용됩니다.
{
...
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "svg-mustache",
// the SVG file is embedded in the VC
"template": "data:image/svg+xml;base64,Qjei89...3jZpW"
}
}
다음 예제는 웹의 SVG 파일에 연결하고 digestMultibase 속성을 사용하여
수정되지 않도록 보호합니다.
{
...
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "svg-mustache",
"template": {
// this SVG file is fetched from the Web
"id": "https://degree.example/credential-templates/bachelors",
"mediaType": "image/svg+xml",
"digestMultibase": "zQmerWC85Wg6wFl9znFCwYxApG270iEu5h6JqWAPdhyxz2dR"
}
}
다음 예제는 웹의 렌더링 템플릿에 연결하고
digestMultibase 속성을 사용하여 이를 보호합니다.
{
...
"renderMethod": {
// this render method is fetched from the Web
"id": "https://degrees.example/bachelors-svg.jsonld",
"mediaType": "application/ld+json",
"type": "TemplateRenderMethod",
"renderSuite": "svg-mustache",
"digestMultibase": "zQmG270iEu5h6JqWAPdhyxz2dRerWC85Wg6wFl9znFCwYxAp"
}
pdf-mustache 렌더 제품군은 Mustache 템플릿 언어를 사용하여
PDF 파일을 수정하고, 이 파일은 이후
검증 가능한 자격 증명의 시각적 표현을
렌더링하는 데 사용됩니다.
아래 예제에서는 완전히 포함된 PDF 파일이 렌더링 템플릿으로 사용됩니다.
{
...
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "pdf-mustache",
// this PDF file is embedded in the VC
"template": "data:application/pdf;base64,k309SK...pwK83b"
}
}
다음 예제는 웹의 PDF 파일에 연결하고 digestMultibase 속성을 사용하여
수정되지 않도록 보호합니다.
{
...
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "pdf-mustache",
"template": {
// this PDF file is fetched from the Web
"id": "https://degree.example/bachelors.pdf",
"mediaType": "application/pdf",
"digestMultibase": "zQmznFCwYxApG270iEu5h6JqWAPdhyxz2dRerWC85Wg6wFl9"
}
}
다음 예제는 웹의 렌더링 템플릿에 연결하고
digestMultibase 속성을 사용하여 이를 보호합니다.
{
...
"renderMethod": {
// this render method is fetched from the Web
"id": "https://degrees.example/bachelors-pdf.jsonld",
"type": "TemplateRenderMethod",
"renderSuite": "pdf-mustache",
"digestMultibase": "zQmEu5h6JqWAPdhyxmz2dRerWC85Wg6wFl9znFCwYxApG270"
}
nfc 렌더 제품군은
검증 가능한 자격 증명을 나타내는 이진 페이로드를
무선 NFC 연결을 통해 전송합니다.
아래 예제에서는 자격 증명과 연결된 바코드 식별자만 공개하는, 완전히 포함된 NFC 페이로드가 렌더링 템플릿으로 사용됩니다.
{
...
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "nfc",
"name": "Tap to send",
// the NFC payload is embedded
"template": "data:application/octet-stream;base64,2QZkpQGDG...G8XJWnROcY4Biw",
// only the barcode is transmitted over NFC
"renderProperty": ["/credentialSubject/barcode"]
}
...
}
html 렌더 제품군은 템플릿 작성자가
검증 가능한 자격 증명을 렌더링하기 위한
HTML 템플릿을 제공할 수 있게 합니다. HTML은 template 또는
template.id(template 값이 객체인 경우)의 값으로 원격에서
참조되거나 data: URL을 통해 참조될 수 있습니다. HTML 조각 내의 JavaScript는
HTML 템플릿과 함께 샌드박스 처리된 iframe에 호스팅된 HTML 데이터 블록
(즉 <script type="application/vc"></script>)을 통해 제공되는
필터링된 검증 가능한 자격 증명 데이터를
렌더링하는 역할을 합니다.
{
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
"type": [
"VerifiableCredential",
"NameCredential"
],
"issuer": {
"id": "did:example:1234",
"name": "The Issuer"
},
"credentialSubject": {
"name": "Example Name",
"notRendered": "should not appear"
},
"renderMethod": {
"type": "TemplateRenderMethod",
"renderSuite": "html",
"renderProperty": [
"/issuer/name",
"/credentialSubject/name"
],
"template": {
"id": "https://test.example/credential-templates/NameCredential.html",
"mediaType": "text/html",
"digestMultibase": "zQmerWC85Wg6wFl9znFCwYxApG270iEu5h6JqWAPdhyxz2dR"
},
"outputPreference": {
"mode": [
"visual"
],
"mediaType": "application/html",
"style": {
"width": "800px",
"height": "800px"
}
}
}
}구현은 필터링된 검증 가능한 자격 증명 데이터를 사용하여 JavaScript가 HTML 템플릿을 안전하게 렌더링할 수 있는 환경을 제공해야 MUST 합니다. 이 환경을 설명하기 위해 다음 용어가 사용됩니다.
최소한 환경은 추적 및 기타 개인정보 보호 침해를 방지하기 위해 탐색, 외부 콘텐츠 로드, 호스트 페이지 접근을 방지해야 MUST 합니다.
예를 들어 브라우저 기반 구현은
호스트 페이지에 대한 Content Security Policy [CSP3] 제한,
HTML 템플릿을 호스팅하는 iframe의 샌드박스 처리, 그리고
추가 CSP 제한을 추가하고 호스트 페이지와
준비 및 오류 이벤트 통신을 제공하기 위해 HTML 템플릿을 감싸는 래퍼 코드를
조합하여 이러한 환경을 제공할 수 있습니다.
호스트 페이지(일반적으로 지갑 또는 검증 가능한 자격 증명 렌더러)는 HTML 템플릿이 최상위 탐색 컨텍스트를 탐색하거나, 외부 콘텐츠에 접근하거나, 호스트 페이지에 접근하거나, 원격 콘텐츠를 로드하는 것을 방지해야 MUST 합니다.
호스트 페이지가 사용되는 경우 다음 규칙이 적용됩니다.
frame-src 'none'가 포함되어야 MUST 합니다.
이는 iframe에 대해 src 대신 srcdoc 사용을 강제하며,
브라우저가 HTML 템플릿을 로드하는 것을 방지합니다. 결과적으로
호스트 페이지 코드는 원격으로 참조된 템플릿
코드를 미리 로드하고, 템플릿을 래퍼 코드에 주입하기 전에
관련 digestMultibase 값과 응답을 확인해야 합니다.
iframe에는
탐색 및 최상위 접근을 방지하기 위해
sandbox="allow-scripts"가 설정되어야
MUST 합니다.
<html>
<head>
<meta http-equiv="content-security-policy" content="frame-src 'none'">
</head>
<body>
<iframe id="renderer" sandbox="allow-scripts allow-modals" srcdoc=""></iframe>
</body>
</html>
renderMethod의 template 속성이 참조하는 HTML
템플릿 코드는
검증 가능한 자격 증명을 렌더링하는 데 필요한
HTML, CSS 및 JavaScript를 포함하는 HTML 조각이어야
MUST 합니다. 템플릿
코드는
<html>, <head> 또는
<body> 태그를 포함해서는 안 됩니다
MUST NOT. 이러한 태그는
래퍼
코드가 제공하기 때문입니다.
<div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
console.log('running template render script');
// display credential as JSON as an example renderer; anything
// could be done here instead, including mustache/other-style
// template processing to generate the HTML for display
// FIXME: determine best name/location for the datablock/script tag
const credential = JSON.parse(document.querySelector(
'head > script[name="credential"]').innerHTML);
document.querySelector('#credentialSubject-name').innerText =
credential.credentialSubject.name;
document.querySelector('#issuer-name').innerText =
credential.issuer.name;
// TBD: signal to host that rendering is complete
window.renderMethodReady();
});
</script>
<style>
h1 {
color: blue;
}
</style>
<h1 id="credentialSubject-name"></h1>
<p>Issued by: <span id="issuer-name"></span></p>
</div>
템플릿 HTML 조각은 부분
검증 가능한 자격 증명을 포함하는 데이터 블록을
제공하고, 탐색과 외부 콘텐츠 로드를 방지하기 위한 추가 CSP 정책을 추가하는
래퍼 코드로 감싸져야
MUST 합니다. 구체적으로, 래퍼
코드는
템플릿
코드가 네트워크 요청을 수행하는 것을 방지하기 위해
default-src data: 'unsafe-inline'의 CSP 제한을 추가해야
MUST 합니다.
<html>
<head>
<meta http-equiv="content-security-policy" content="default-src data: 'unsafe-inline'">
<script name="credential" type="application/vc">${JSON.stringify(credential)}</script>
</head>
<body>${template}</body>
</html>
설정을 완료하려면 호스트 페이지가
래퍼
코드(검증 가능한 자격 증명과
템플릿 코드가 채워진 후)를 iframe의
srcdoc 속성에 주입해야 MUST 하며, 이를 통해
래퍼
코드와 템플릿 코드에 포함된
JavaScript가 실행됩니다.
<html>
<head>
<meta http-equiv="content-security-policy" content="default-src 'none' data: 'unsafe-inline'">
<!-- The credential data block injected into the Wrapper Code. -->
<script name="credential" type="application/vc">{
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
"type": [
"VerifiableCredential",
"NameCredential"
],
"issuer": {
"id": "did:example:1234",
"name": "The Issuer"
},
"credentialSubject": {
"name": "Example Name"
}
}</script>
<!-- End credential data block -->
</head>
<body>
<!-- The template HTML injected into the Wrapper Code. -->
<div>
<script>
console.log('running template render script');
// display credential as JSON as an example renderer; anything
// could be done here instead, including mustache/other-style
// template processing to generate the HTML for display
// FIXME: determine best name/location for the datablock/script tag
const credential = JSON.parse(document.querySelector(
'head > script[name="credential"]').innerHTML);
document.querySelector('#credentialSubject-name').innerText =
credential.credentialSubject.name;
document.querySelector('#issuer-name').innerText =
credential.issuer.name;
// TBD: signal to host that rendering is complete
window.renderMethodReady()
</script>
<style>
h1 {
color: blue;
}
</style>
<h1 id="credentialSubject-name"></h1>
<p>Issued by: <span id="issuer-name"></span></p>
</div>
<!-- End template HTML -->
</body>
</html>
래퍼 코드에서 생성된 iframe은
렌더링이 완료되었거나 렌더링 중 오류가 발생했을 때 템플릿이
호스트 페이지에 알릴 수 있도록
통신 채널을 제공해야 MUST 합니다. 이는
래퍼 코드가 설정한
MessageChannel과 함께 postMessage API를 사용하여
수행할 수 있습니다.
아래에 표시된 JavaScript는 iframe에 onload 이벤트를 추가하여
MessageChannel을 설정하기 위해 위의
호스트 페이지에
추가됩니다. 호스트 페이지는 또한
래퍼 코드로부터 ready 메시지를
받으면 해결되고, error 메시지를 받으면 거부되는
Promise를 생성합니다. 래퍼 코드는 또한 템플릿이
렌더링 완료를 호스트 페이지에 알리거나 오류 메시지를 되돌려 보내는 데
사용할 수 있는 window.renderMethodReady 메서드를 제공합니다.
// a promise that resolves when the rendering is ready (or rejects if it
// fails); can be used to show the display or an error instead
let resolveRender;
let rejectRender;
const readyPromise = new Promise((resolve, reject) => {
resolveRender = resolve;
rejectRender = reject;
});
// Setup communication channel for use by the template code in the iframe
renderer.onload = () => {
// create a MessageChannel; transfer one port to the iframe
const channel = new MessageChannel();
// start message queue so messages won't be lost while iframe loads
channel.port1.start();
// handle `ready` message
channel.port1.onmessage = function ready(event) {
if(event.data === 'ready') {
// unhide the iframe because it's ready
resolveRender();
} else {
rejectRender(new Error(event.data?.error?.message));
}
channel.port1.onmessage = undefined;
};
// send "start" message; send `port2` to iframe for return communication
renderer.contentWindow.postMessage('start', '*', [channel.port2]);
};
// setup event responses to ready or error
// NOTE: this section is idiosyncratic to the Wallet/Renderer's UX needs
readyPromise.then(() => {
console.log('rendering ready');
const renderer = document.getElementById('renderer');
renderer.hidden = false;
}).catch(err => {
const errorMessage = document.getElementById('error-message');
errorMessage.style.display = 'block';
errorMessage.innerText = 'Rendering failed: ' + err.message;
console.error('rendering failed', err);
});// add promise that will resolve to the communication port from
// the parent window
const portPromise = new Promise(resolve => {
window.addEventListener('message', function start(event) {
if(event.data === 'start' && event.ports?.[0]) {
window.removeEventListener('message', start);
resolve(event.ports[0]);
}
});
});
// attach a function to the window for the template to call when
// it's "ready" (or that an error occurred) that will send a message
// to the parent so the parent can decide whether to show the iframe
window.renderMethodReady = function(err) {
portPromise.then(port => port.postMessage(
!err ? 'ready' : {error: {message: err.message}}));
};
이 설정을 사용하면 템플릿 JavaScript는 window.renderMethodReady()를 호출하여
렌더링이 완료되었음을 호스트 페이지에 알리거나,
window.renderMethodReady(new Error("error message"))를 호출하여
오류를 호스트 페이지에 알릴 수 있습니다.
다음 절에서는 html 렌더 제품군이 HTML 템플릿을 안전하게 렌더링하는 데
사용하는 알고리즘을 개괄합니다. 보안 및 개인정보 보호 결과와 출력이 동일하다면
대체 알고리즘을 사용할 수 MAY 있습니다.
호스트 페이지는 HTML 템플릿을 호스팅하기 위해
iframe 요소를 생성해야 MUST 합니다.
호스트 페이지는 탐색 및 최상위 접근을
방지하기 위해 iframe의 sandbox 속성을
allow-scripts로 설정해야 MUST 합니다.
vc를 렌더링할 검증 가능한 자격 증명이라고 합니다.
renderMethod를 vc 안에서 선택된
renderMethod 속성이라고 하며,
여기서 renderMethod.type은 TemplateRenderMethod이고
renderMethod.renderSuite는 html입니다.
renderMethod.template이 문자열이면,
template을 renderMethod.template의 값이라고 합니다.
renderMethod.template이 맵이면,
template을 renderMethod.template.id 안의 URL을
가져온 결과라고 합니다.
호스트 페이지는
renderMethod.renderProperty가 존재하는 경우,
검증 가능한 자격 증명 vc를
renderMethod.renderProperty에 지정된 속성만 포함하도록 필터링해야
MUST 합니다. renderMethod.renderProperty가 없으면
전체 검증 가능한 자격 증명이 사용됩니다.
이 필터링은 renderMethod.renderProperty에 존재하는
JSON Pointer [RFC6901] 값에
Data Integrity ECDSA Cryptosuites v1.0 명세 [VC-DI-ECDSA]의
3.4.13절 selectJsonLd에
정의된 selectJsonLd 알고리즘을 적용하여 수행되어야
MUST 합니다.
호스트 페이지는 필터링된 검증 가능한 자격 증명과 HTML 템플릿을 위에서 정의한 래퍼 코드 템플릿에 포함하여 래퍼 코드를 생성해야 MUST 합니다.
wrapperCode를 <head> 안에
<meta http-equiv="Content-Security-Policy"
content="default-src data: 'unsafe-inline'">가 있는 HTML 문서라고 합니다.
datablock을 type이 application/vc인
HTML 데이터 블록이라고 합니다.
datablock의 내용을 문자열화된 JSON 형식의 필터링된
검증 가능한
자격 증명으로 설정합니다.
datablock을 wrapperCode의 <head>에
삽입합니다.
template의 값을 wrapperCode의 <body>에
삽입합니다.
호스트 페이지는 iframe의
srcdoc 속성을 결과 래퍼 코드로 설정해야
MUST 합니다.
iframe의 srcdoc 속성을 wrapperCode의
문자열화된 HTML로 설정합니다.
호스트 페이지는 위에서 설명한 대로
ready 및 error 메시지를 수신하기 위해
래퍼 코드와
통신 채널을 설정해야 MUST 합니다.
renderPromise를 다음과 같은 새 Promise라고 합니다.
resolve 시 사용자에게 iframe을 표시하는 데
사용할 수 있습니다.
reject 시 사용자에게 오류 메시지를 표시합니다.
iframe의 onload 이벤트에서:
channel을 새 MessageChannel이라고 합니다.
wrapperCode를 통해 iframe에 주입된
template 안의 코드에서 오는 ready
메시지를 수신하는 새 port1 리스너를
channel에 생성하고 시작합니다.
port1 리스너에서 ready 메시지를 받으면
renderPromise를 해결합니다. error 메시지를 받으면
오류 메시지와 함께 renderPromise를 거부합니다.
postMessage를 사용하여 channel의
port2를 iframe 콘텐츠 창으로 보냅니다.
호스트 페이지는 렌더링이 완료되었는지 또는
렌더링 중 오류가 발생했는지 판단하기 위해 renderPromise를 사용하는 것이
좋습니다 SHOULD.
래퍼 코드는
MessageChannel을 통해 호스트 페이지로부터 통신을
수신하도록 설정하고,
템플릿 코드가 사용할 수 있도록
window.renderMethodReady 메서드를 제공해야
MUST 합니다.
EmbeddedRenderer는 발행자가 검증 가능한 자격 증명을 렌더링하는 데 사용됩니다.
검증 가능한 자격 증명은 문서에서 참조되는 Template Renderer 웹사이트를 통해
포함된 <iframe> 안에서 HTML로 렌더링됩니다. 이 구성은
OpenAttestationMerkleProofSignature2018을 사용한 대화형 선택적 공개를 가능하게 합니다.
Template Renderer는 iframe에 포함된 웹 애플리케이션입니다. 이는 선택된 템플릿을 기반으로 검증 가능한 자격 증명을 렌더링하며, 렌더링 프로세스를 용이하게 하기 위해 Host 애플리케이션의 특정 메시지를 수신해야 합니다.
현재 다수의 EmbeddedRenderer 발행자와 embedded renderer 구현이 존재합니다.
발행자가
검증 가능한 자격 증명에 대한 포함형 렌더링 지침을
지정하려는 경우, 아래에 설명된 데이터 모델을 사용하는 renderMethod 속성을
추가할 수 MAY 있습니다.
| 속성 | 설명 |
|---|---|
| id | EmbeddedRenderer Action API를 구현하는 웹사이트를 찾는 URL입니다. |
| type | type 속성은 EmbeddedRenderer여야
MUST 합니다.
|
| renderName |
id로 지정된 웹사이트가 문서를 렌더링하는 데 사용하는
템플릿의 이름입니다. embedded renderer가 검증 가능한 자격 증명의 다른
HTML 보기를 표시하도록 다른 템플릿을 사용할 수 있습니다.
|
위에 표시된 데이터 모델은 아래 예제의 검증 가능한 자격 증명 안에 표현됩니다.
{
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://w3id.org/security/data-integrity/v2",
"https://trustvc.io/context/render-method-context-v2.json",
],
"credentialSubject": {
...
},
"type": ["VerifiableCredential"],
"issuer": "did:web:trustvc.github.io:did:1",
"validFrom": "2024-04-01T12:19:52Z",
"id": "urn:uuid:01992e54-cc5e-700e-a80b-60ddf0fffca9",
},
"renderMethod": [
{
"type": "EMBEDDED_RENDERER",
"templateName": "DEMO_CERTIFICATE",
"id": "https://generic-templates.tradetrust.io"
}
]
}
검증 가능한 자격 증명은
DEMO_CERTIFICATE라는 템플릿을 사용하여
https://generic-templates.tradetrust.io의 embedded renderer를 지정합니다.
embedded renderer는 검증 가능한 자격 증명에 대해 서로 다른 보기를 제공할 수 있는 여러 템플릿을 지원할 수 있습니다. 아래는 서로 다른 템플릿을 사용하여 동일한 검증 가능한 자격 증명을 렌더링한 두 가지 예입니다.
Host는 Template Renderer의 도움을 받아 문서를 표시하는 애플리케이션입니다.
Template Renderer는 renderMethod.id로 지정된 iframe 안에
포함된 웹 애플리케이션이어야 MUST 합니다. 이는 작업을 수행하기 위해
postMessage API를 사용하여 Host 애플리케이션과 통신해야
MUST 합니다.
모든 작업은 동일한 구조를 따릅니다. 이는 type과
payload로 구성됩니다.
type은 실행되는 작업의 종류를 나타냅니다. 예를 들어
RENDER_DOCUMENT는 문서 렌더링을 의미합니다. 작업의 type은
필수입니다.
payload는 type과 연결된 선택적 데이터를 나타냅니다. 예를 들어
렌더링할 문서의 내용입니다.
오픈 소스 참조 구현은 GitHub에서 사용할 수 있습니다.
Host와 Template Renderer 간의 상호작용은 다음 다이어그램에 나와 있습니다.
iframe이 처음 표시될 때 host는 문서를 렌더링하도록 iframe에 명령을 보냅니다. 지원되는 4가지 작업 유형은 아래에 설명되어 있습니다.
| type | payload | 작업 |
|---|---|---|
GET_TEMPLATES |
|
주어진 문서에 대해 renderer가 지원하는 템플릿 목록을 가져옵니다. 템플릿 목록은 iframe에서 호출되는 UPDATE_TEMPLATES에서 반환됩니다. |
SELECT_TEMPLATE |
|
렌더링에 사용할 템플릿을 선택합니다. 이는 GET_TEMPLATES가 반환한 목록에 있어야 합니다. 찾을 수 없으면 기본 템플릿이 사용됩니다. |
RENDER_DOCUMENT |
|
선택된 템플릿을 사용하여 IFRAME 안에서 검증 가능한 자격 증명을 렌더링합니다. Document는 검증 가능한 자격 증명의 JSON 객체 형태입니다. |
PRINT |
|
IFRAME의 내용을 인쇄할 수 있도록 인쇄 대화상자를 표시해야 MUST 합니다. |
이는 iframe이 서식 조정 또는 선택적 편집을 위해 host를 업데이트하는 데 사용됩니다.
| type | payload | 작업 |
|---|---|---|
OBFUSCATE |
|
이는 선택적 편집에 사용됩니다. 난독화된 필드의 경로가 Host에 전달되어, host가 선택된 필드가 난독화된 문서의 업데이트된 버전을 만들 수 있습니다. |
UPDATE_HEIGHT |
|
Host가 브라우저에서 크기를 조정할 수 있도록 포함된 iframe의 높이를 픽셀 단위로 Host에 알립니다. |
UPDATE_TEMPLATES |
|
RENDER_METHOD 또는 GET_TEMPLATES 호출에서 사용할 수 있는 템플릿 이름 목록을 Host에 알립니다. |
다음 절에서는 이 명세가 렌더링 방법에 사용하는 알고리즘을 개괄합니다.
Mustache 템플릿 언어는 검증 가능한 자격 증명의 시각적 표현을 생성하는 데 사용됩니다. 자세한 내용은 Mustache 5.0 명세를 참조하십시오.
이 절은 비규범입니다.
아래에 나열된 보안 고려사항 목록은 절로 변환되어야 합니다.
이 절은 비규범입니다.
아래에 나열된 개인정보 보호 고려사항 목록은 절로 변환되어야 합니다.
id를 사용하여 개인을 추적할 수 있습니다. 이러한
값은 클라이언트 측에서 적극적으로 캐시하거나,
mixnet 또는 프록시 서비스를 사용하여 조회해야 합니다.
이 절은 비규범입니다.
아래에 나열된 국제화 고려사항 목록은 절로 변환되어야 합니다.
Referenced in:
Referenced in:
Referenced in:
Referenced in: