이 오류는 무엇입니까?
최근 AMP 용 광고를 사용하는 경우 개발자 도구에서 이러한 콘솔 오류가 발생하였습니다. AMP 자동 광고의 반응형 광고와 AMP에 정적 레이아웃 시스템이 충돌할 때 이러한 문제가 발생하는 것 같습니다.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://d-00000000000000000000.ampproject.net/0000000000000/nameframe.html with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
The resource https://d-00000000000000000000.ampproject.net/0000000000000/nameframe.html was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
CORB (Cross-Origin Read Blocking)는 웹 페이지에 도달하기 전에 웹 브라우저에서 애매한 교차 출처 리소스로드를 식별하고 차단할 수 있는 알고리즘입니다. CORB는 교차 출처 웹 페이지와 거리를 유지함으로써 민감한 데이터 유출 위험을 줄입니다. 대부분의 브라우저에서 이러한 데이터는 신뢰할 수 없는 스크립트로부터 보호됩니다. 사이트 격리 기능이 있는 브라우저에서는 이러한 데이터를 신뢰할 수없는 렌더링 프로세스에서 완전히 차단할 수 있으므로 Spectre와 같은 채널 공격을 막을 수 있습니다.
amp-ad에는 amp-iframe이 포함되어 광고가 나타납니다. 모든 AMP 요소와 마찬가지로 amp-iframe은 정적 레이아웃을 정의해야 하지만 런타임에서 amp-iframe 크기를 조정할 수 있습니다.
이는 amp-iframe에 미리 크기를 알 수 없는 반응형 광고 콘텐츠가 포함된 경우 유용합니다. resizable 속성을 amp-iframe 요소에 추가하여 크기를 조정하여 나타낼 수 있습니다.
<amp-iframe src="" ... resizable ...>
크기 조정을 요청하기 위해 iframe에서 AMP 페이지 컨테이너로 요청을 보낼 수 있습니다. 요청된 높이는 height 속성에 지정됩니다. 픽셀 높이를 나타내는 숫자 값이거나 iframe 코드 자체에서 JavaScript로 계산할 수 있습니다. 예를 들면 다음과 같습니다.
window.parent.postMessage ({
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight
}, '*');
크기를 조정할 수 있는 amp-iframe에는 overflow 요소가 포함되어야
합니다. 이것은 본질적으로 AMP 런타임이 크기 조정 요청을 즉시 수용할 수 없는
경우 표시되는 버튼입니다. 예를 들어 크기 조정이 페이지 리플로우를 유발하거나
스크롤을 중단하여 사용자 경험에 부정적인 영향을 미치는 경우 이러한 오류가
발생할 수 있습니다. 크기 조정이 가능한 overflow 속성이 포함된
amp-ad의 코드는 다음과 같습니다.
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
사용자가 overflow 버튼을 탭하면 사용자가 트리거한 작업이므로 iframe의 크기가 즉시 조정됩니다. 따라서 사용자의 화면에 맞는 amp-iframe을 포함한 반응형 광고가 나타나게 됩니다. 유용하길 바랍니다.