SXG는 애플리케이션이나 API를 인증할 수 있게 하는 리소스의 출처임을 알 수 있습니다
서명된 교환 (SXG)은 리소스 제공 방식과 관계없이 리소스의 출처를 인증할 수 있는 전달 메커니즘입니다. SXG를 구현하면 개인 정보 보호 교차 출처 미리 가져오기를 사용 설정하여 최대 콘텐츠 페인트 (LCP)를 개선할 수 있습니다. 또한 이러한 분리는 오프라인 인터넷 환경 및 서드 파티 캐시에서 제공과 같은 다양한 사용 사례를 개선합니다.
이 도움말에서는 SXG의 작동 방식, 사용 사례, 도구에 관한 포괄적인 개요를 제공합니다.
브라우저 호환성
SXG는 Chromium 기반 브라우저에서 지원됩니다. (Chrome 73, Edge 79, Opera 64 버전부터)
개요
기본 사용 사례로 SXG는 캐시를 사용하여 출처에서 암호화 방식으로 서명한 콘텐츠를 미리 가져오고 제공합니다. 이렇게 하면 리퍼러 사이트에서 교차 출처 탐색의 속도를 높이는 동시에 페이지가 변경되지 않고 출처에 귀속되도록 할 수 있습니다. 식별 가능한 정보는 사용자가 사이트로 이동할 때까지 숨겨져 사용자의 개인 정보가 보호됩니다. Google 검색은 SXG 미리 가져오기 기능을 초기에 도입했으며, Google 검색에서 트래픽의 많은 부분을 수신하는 사이트의 경우 SXG가 사용자에게 더 빠른 페이지 로드를 제공하는 중요한 도구가 될 수 있습니다. 앞으로 더 많은 리퍼러에게도 이러한 영향이 확대되기를 바랍니다.
작동 방식
사이트에서 요청/응답 쌍('HTTP 교환')에 서명하여 브라우저의 원본 및 무결성 확인 콘텐츠 배포 방식 따라서 브라우저에서 원래 사이트의 URL을 입력하여 광고를 게재할 수 있습니다.
역사적으로 유일한 방법은 해당 사이트를 유지하면서 제3자를 통해 콘텐츠를 배포하도록 은 사이트가 SSL 인증서를 다른 리소스와 유통업체입니다. 여기에는 보안상의 단점이 있습니다. 게다가 현재와 멀리 떨어져 있는 정말 멋진 일입니다.
SXG 형식
SXG는 두 개의 기본 구성 요소인 HTTP 교환 및 서명 모든 광고 항목이 있습니다 HTTP 교환은 요청 URL, 콘텐츠 협상 정보 및 HTTP 응답이 포함됩니다.
format version: 1b3
request:
method: GET
uri: https://example.org/
headers:
response:
status: 200
headers:
Cache-Control: max-age=604800
Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
Expires: Mon, 24 Aug 2020 16:08:24 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: mi-sha256-03
Date: Mon, 17 Aug 2020 16:08:24 GMT
Vary: Accept-Encoding
signature:
label;cert-sha256=<em>ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=</em>;
cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
validity-url="https://example.org/webpkg/validity"
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>
<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code><title>SXG example</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
}
</style>
</code></pre>
<div>
<h1>Hello</h1>
</div>
<p>서명의 expires 매개변수는 SXG의 만료일을 나타냅니다. 가
SXG는 최대 7일 동안 유효할 수 있습니다. 다음에서 자세히 알아보기
Signed HTTP Exchanges(서명된 HTTP 교환)
사양을 참조하세요.
서버 측 맞춤설정 지원
Vary: Cookie 헤더가 포함된 SXG는 그렇지 않은 사용자에게만 표시됩니다.
쿠키가 있어야 합니다. 사이트의 HTML이 다른 경우
이 기능을 사용하여 SXG를
사용자 환경을 변경할 수 있습니다. 서버 측 맞춤설정 자세히 알아보기
동적 SXG 사용
웹 패키징
SXG는 더 광범위한 웹의 일부입니다. 패키징 사양 제안서 모음. 또한 웹 패키징 사양의 다른 주요 구성요소는 웹 번들입니다. ('번들된 HTTP 교환') 웹 번들은 HTTP 리소스 및 메타데이터도 변환할 수 있습니다.
SXG와 웹 번들의 관계는 흔히 혼동하는 부분입니다. SXG와 웹 번들은 각각에 종속되지 않는 두 가지 고유한 기술입니다. other: 웹 번들은 서명된 교환과 서명되지 않은 교환에 모두 사용할 수 있습니다. 일반적인 SXG와 웹 번들 모두가 추진한 목표는 '웹 패키징' 오프라인에서 사용할 수 있도록 사이트 전체를 공유할 수 있는 형식입니다.
서명된 교환으로 페이지 로드 속도 높이기
서명된 교환을 사용 설정하면 웹페이지 성능의 속도를 높여 사이트의 코어 웹 바이탈(특히 최대 콘텐츠 페인트(LCP))에 영향을 미칠 수 있습니다. Google 검색은 얼리 어답터로서 SXG를 사용하여 사용자에게 검색결과 페이지에서 로드된 페이지에 더 빠른 페이지 로드 경험을 제공합니다.
Google 검색은 가능한 경우 SXG를 크롤링 및 캐시하고, 사용자가 방문할 가능성이 있는 SXG(예: 첫 번째 검색결과에 해당하는 페이지)를 미리 가져옵니다.
SXG는 CDN 사용 및 렌더링 차단 하위 리소스 축소와 같은 다른 성능 최적화와 함께 가장 잘 작동합니다. 구현 후에는 이 권장사항에 따라 SXG 미리 가져오기의 LCP 이점을 극대화하세요. 대부분의 경우 이렇게 최적화하면 Google 검색에서 거의 즉각적으로 페이지 로드가 발생할 수 있습니다.
서명된 교환의 영향
지난 실험 결과, SXG 지원 미리 가져오기에서 LCP가 평균 300~400ms 감소한 것으로 관찰되었습니다. 이렇게 하면 사이트에서 사용자에게 더 나은 첫인상을 줄 수 있으며 비즈니스 측정항목에 긍정적인 영향을 미치는 경우가 많습니다.
여러 글로벌 브랜드와 사이트가 이미 서명된 교환의 혜택을 받고 있습니다. 우수사례로 유명 콘텐츠 관리 시스템 (CMS)인 RebelMouse가 어떻게 서명된 교환을 구현하여 고객의 구매 만족도를 실적 및 비즈니스 측정항목:
- LCP를 41%개선한 Narcity
- Paper Magazine의 사용자당 세션수 27% 증가
- MLT 블로그, 페이지 로드 시간 21%감소
Cloudflare는 테스트한 사이트의 98% 에서 SXG가 TTFB를 개선했고, 사이트의 85% 에서 LCP를 개선했으며, SXG 대상 페이지 로드의 중앙값이 20% 이상 개선된다는 사실을 발견했습니다.
색인 생성
페이지의 SXG 및 비 SXG 표현은 순위가 지정되거나 색인이 생성되지 않습니다. 다르게 표시됩니다. SXG는 궁극적으로 전달 메커니즘입니다. 변경할 수 있습니다.
AMP
AMP 콘텐츠는 SXG를 사용하여 전송할 수 있습니다. SXG를 통해 AMP 콘텐츠 미리 가져오기 가능 AMP URL이 아닌 표준 URL을 사용하여 표시됩니다. AMP에는 자체 표준 URL이 있습니다. 도구를 확인해 보세요. amp.dev.
Chrome DevTools로 SXG 디버깅
SXG를 직접 보려면 Chromium 브라우저를 사용하고 DevTools를 열고 Network 패널을 연 다음 이 검색 페이지 예를 방문하세요. 서명된 교환은 Type 열에서 signed-exchange를 찾아 식별할 수 있습니다.
미리보기 탭에는 SXG의 콘텐츠에 관한 자세한 정보가 나와 있습니다.
<ph type="x-smartling-placeholder">
도구
SXG 구현은 지정된 URL에 해당하는 SXG를 생성하는 것으로 구성됩니다. 요청자 (일반적으로 크롤러)에게 SXG를 제공합니다.
인증서
SXG를 생성하려면 SXG에 서명할 수 있는 인증서가 필요하지만 일부 도구는 이를 자동으로 획득합니다. 이 페이지에는 이 유형의 인증서를 발급할 수 있는 인증기관 목록이 나와 있습니다. 인증서는 모든 ACME 클라이언트를 사용하여 Google 인증 기관에서 자동으로 받을 수 있습니다. 웹 패키지 도구 서버에는 ACME 클라이언트가 내장되어 있으며 sxg-rs도 곧 지원될 예정입니다.
플랫폼별 SXG 도구
이러한 도구는 특정 기술 스택을 지원합니다. 이미 지원되는 플랫폼을 사용하는 경우에는 범용 도구입니다
sxg-rs/cloudflare_worker드림 Cloudflare Workers에서 실행됩니다.sxg-rs/fastly_compute드림 Fastly에서 실행 Compute@Edge를 사용합니다.자동 서명됨 Exchanges는 자동으로 인증서를 취득하고 서명된 교환.
NGINX SXG 모듈은 nginx를 사용하는 사이트에 SXG를 제공합니다 설정 여기에서 안내를 확인하세요.
Envoy SXG 필터 SXG를 생성 및 제공하고 Envoy
범용 SXG 도구
sxg-rs HTTP 서버
sxg-rs
http_server
에 대한 역방향 프록시 역할을 합니다.
SXG를 서빙합니다 SXG 크롤러의 요청의 경우 http_server은
SXG로 응답합니다. 설치용
자세한 내용은
리드미.
웹 패키지 프로그램 서버
웹 패키지 도구
서버,
webpkgserver는 Go로 작성된 sxg-rs http_server의 대안입니다. 대상
웹 패키지 도구 서버 설정에 대한 안내는 웹 패키지 도구 서버 설정에 대한
웹 패키지 도구를 사용한 광고 거래에 대해 자세히 알아보세요.
웹 패키지 도구 CLI
웹 패키지 도구 CLI가 SXG 생성 입니다.
webpackager \
--private\_key=private.key \
--cert\_url=https://example.com/certificate.cbor \
--url=https://example.com
SXG 파일이 생성되면 서버에 업로드하고
application/signed-exchange;v=b3 MIME 유형입니다. 또한 다음을 수행해야 합니다.
SXG 인증서를 application/cert-chain+cbor로 제공합니다.
SXG 라이브러리
다음 라이브러리를 사용하여 자체 SXG 생성기를 빌드할 수 있습니다.
sxg_rs는 SXG를 생성합니다 가장 기능이 많은 SXG 라이브러리로cloudflare_worker및fastly_compute도구 기반libsxg는 다음을 위한 최소 C 라이브러리입니다. SXG를 생성합니다 NGINX SXG 모듈의 기반으로 사용되며 Envoy SXG 필터go/signed-exchange드림 웹 패키지 사양에서 웹 패키지 사양으로 제공되는 최소 Go 라이브러리로 참조 구현의 SXG를 생성합니다 이 서비스는 참조 CLI 도구의 기초로 사용됩니다gen-signedexchange드림 웹 패키지 도구 도구 등이 있습니다.
콘텐츠 협상
Accept 헤더에 애플리케이션/서명된 교환의 q-값이 text/html의 q-값보다 크거나 같다고 나타내는 경우 서버는 SXG를 제공해야 합니다. 실제로 원본 서버가 SXG를 크롤러에 제공하지만 브라우저는 제공하지 않습니다. 위의 도구 중 다수는 기본적으로 이 작업을 수행하지만 다른 도구의 경우 다음 정규 표현식을 사용하여 SXG로 제공되어야 하는 요청의 Accept 헤더와 일치시킬 수 있습니다.
http
Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
이 권장사항에는 Apache 및 nginx에 대한 예시가 포함되어 있습니다.
캐시 API 업데이트
Google SXG Cache에는 사이트 소유자가 Cache-Control: max-age로 인해 만료되기 전에 SXG를 캐시에서 삭제하는 데 사용할 수 있는 API가 있습니다. 자세한 내용은 업데이트 캐시 API 참조를 확인하세요.
SXG에 연결
가능한 경우 모든 사이트에서 및 태그를 사용하여 연결되는 페이지의 SXG를 캐시하고, 제공하고, 미리 가져올 수 있습니다.
<ph type="x-smartling-placeholder">html
<a href="https://example.com/article.html.sxg">
<link rel="prefetch" as="document" href="https://example.com/article.html.sxg"></ph>
이 도움말에서는 nginx를 사용하여 SXG를 배포하는 방법을 설명합니다.
고유한 이점
SXG는 교차 출처 미리 가져오기를 사용 설정할 수 있는 많은 기술 중 하나입니다. 어떤 기술을 사용할지 결정할 때는 여러 측면을 최적화하는 것 사이에서 균형을 맞춰야 할 수 있습니다. 다음 섹션에서는 가능한 솔루션 공간에서 SXG가 제공하는 몇 가지 고유한 값을 보여줍니다. 이러한 요소는 시간이 지남에 따라 사용 가능한 솔루션의 공간이 발전함에 따라 변경될 수 있습니다.
게재 요청 감소
크로스 사이트 미리 가져오기를 사용하면 서버에서 추가 요청을 처리해야 할 수 있습니다. 이는 페이지를 미리 가져왔지만 사용자가 페이지를 방문하지 않았거나 미리 가져온 바이트를 사용자에게 표시할 수 없는 경우에 해당합니다. SXG의 경우 다음과 같이 사용되지 않는 추가 요청을 크게 줄일 수 있습니다.
- SXG는 캐시되며 만료될 때까지 사용자에게 전송될 수 있습니다. 따라서 캐시 서버에서 단독으로 많은 미리 가져오기를 처리할 수 있습니다.
- SXG는 사이트에서 쿠키 유무와 관계없이 사용자에게 표시될 수 있습니다. 따라서 탐색 후 페이지를 다시 가져와야 하는 경우가 줄어듭니다.
페이지 속도 개선
프리패치 표시 경로와 현재 지원하는 기능으로 인해 페이지 속도가 추가로 개선될 수 있습니다.
- SXG는 사이트의 쿠키를 사용하여 사용자에게 표시될 수 있습니다.
- 또한 SXG는
Link헤더를 사용하여 지정된 경우 JavaScript, CSS, 글꼴, 이미지와 같은 페이지의 하위 리소스를 미리 가져옵니다. - 조만간 Google 검색에서 SXG 미리 가져오기를 사용할 수 있는 검색 결과 유형이 더 늘어날 예정입니다.
결론
서명된 교환은 리소스의 출처 및 유효성과 관계없이 합니다. 따라서 SXG는 서드 파티에 의해 배포될 수 있지만 전체 게시자 기여 분석을 유지할 수 있습니다