비공개 네트워크 액세스 권한 메시지 오리진 트라이얼: HTTPS를 사용하는 웹사이트를 마이그레이션하는 경로

Yifan Luo
Yifan Luo
GitHub

배경

Chrome 94에서는 비보안 공개 웹사이트에서 개인 네트워크가 액세스하는 것을 차단합니다. 현재 진행 중인 비보안 컨텍스트에서의 비공개 네트워크 액세스 지원 중단 트라이얼을 통해 영향을 받는 웹사이트를 HTTPS로 이전하는 데 어려움이 있는 것으로 나타났습니다. 일반적인 우려사항은 비공개 기기를 HTTPS로 이전하기가 어렵고 이로 인해 혼합 콘텐츠 검사 위반이 발생한다는 것입니다.

앞서 언급한 문제를 해결하기 위해 Chrome 120의 오리진 트라이얼에서 새로운 권한 메시지를 사용할 수 있습니다.

새 옵션으로 표시되는 권한 메시지

새 targetAddressSpace 속성을 가져오기 옵션으로 추가하면 요청에서 혼합 콘텐츠 검사를 건너뛸 수 있습니다.

예:

fetch("http://router.local/ping", {
  targetAddressSpace: "private",
});

비공개 네트워크 액세스: 프리플라이트 도입에 따라 모든 비공개 네트워크 요청 앞에는 프리플라이트 요청이 있습니다. 이 실행 전 요청에는 새 헤더 Access-Control-Request-Private-Network: true가 포함되고 해당 응답에는 Access-Control-Allow-Private-Network: true 헤더가 포함되어야 합니다.

새로운 권한 프롬프트를 수용하기 위해 기기에서 새로운 응답 헤더 두 개(Private-Network-Access-Name 및 Private-Network-Access-ID)를 통합해야 했습니다.

Private-Network-Access-Name: <some human-readable device name>
Private-Network-Access-ID: <the MAC address of the device>

예:

Private-Network-Access-Name: "My Smart Toothbrush"
Private-Network-Access-ID: "01:23:45:67:89:0A"

Private-Network-Access-ID: 콜론으로 구분된 6개의 16진수 바이트로 표시되는 48비트 값입니다. Private-Network-Access-Name: ECMAScript 정규 표현식 /^[a-z0-9_-.]+$/와 일치하는 문자열로 유효한 이름입니다. 이름의 최대 길이는 248 UTF-8 코드 단위입니다.

데모

https://private-network-access-permission-test.glitch.me/에서 데모를 확인할 수 있습니다.

오리진 트라이얼 등록

비공개 네트워크 액세스 권한 프롬프트가 개발자가 비공개 네트워크 액세스에 안전한 컨텍스트 제한을 채택하는 데 도움이 되도록 Chrome 버전 120부터 122까지 오리진 트라이얼로 사용할 수 있도록 할 예정입니다.

오리진 트라이얼에 등록하여 웹사이트에서 권한 프롬프트를 사용하도록 설정합니다.

  1. 출처에 대한 토큰을 요청합니다.
  2. 다음 방법 중 하나로 토큰을 사용합니다.
    • HTML에서: html <meta http-equiv="Origin-Trial" content="TOKEN_GOES_HERE">
    • JavaScript에서: js const meta = document.createElement('meta'); meta.httpEquiv = 'Origin-Trial'; meta.content = 'TOKEN_GOES_HERE'; document.head.append(meta);
    • HTTP 헤더에서 다음을 실행합니다. text Origin-Trial: TOKEN_GOES_HERE

이 기능에 관한 의견이나 제안사항이 있으면 GitHub 저장소에서 문제를 신고해 주세요.

자료