이 페이지는 Cloud Translation API를 통해 번역되었습니다.

이전에 아무도 링크한 적이 없는 대담한 링크: 텍스트 프래그먼트

텍스트 프래그먼트를 사용하면 URL 프래그먼트에서 텍스트 스니펫을 지정할 수 있습니다. 이러한 텍스트 프래그먼트가 있는 URL로 이동할 때 브라우저는 사용자의 주의를 끌 수 있습니다.

Thomas Steiner

프래그먼트 식별자

Chrome 80은 큰 출시작이었습니다. 많은 기대를 모은 웹 작업자의 ECMAScript 모듈, null리시 병합 선택사항 체이닝 등이 있습니다. 발표곡은 평소와 같이 Google Cloud로 블로그 게시물을 읽어보세요 Chromium 블로그 아래 스크린샷에서 블로그 게시물의 일부를 확인할 수 있습니다.

`id` 속성이 있는 요소 주위에 빨간색 상자가 표시된 Chromium 블로그 게시물

빨간색 상자의 내용이 무엇을 의미하는지 궁금할 것입니다. 이는 Kubernetes의 다음 스니펫으로 교체할 수 있습니다. id 속성이 있는 모든 요소를 강조표시합니다.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

빨간색 상자로 강조표시된 모든 요소에 딥 링크를 배치할 수 있습니다. 프래그먼트 식별자 그런 다음 해시 페이지 URL을 반환합니다. Google Ad Manager 고객센터에서 제품 포럼 상자에 표시되는 차치하고는, URL을 직접 만들어서 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1입니다. 개발자 도구의 '요소' 패널에서 볼 수 있듯이 문제가 되는 요소에는 id이 있습니다. 속성 값을 HTML1로 설정합니다.

JavaScript의 URL() 생성자로 이 URL을 파싱하면 여러 구성요소가 표시됩니다. 값이 #HTML1인 hash 속성을 확인합니다.

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

하지만 요소의 id를 찾기 위해 개발자 도구를 열어야 했다는 사실은 이 섹션의 작성자가 페이지의 해당 섹션에 연결될 가능성에 대해 블로그 게시물을 참고하세요.

id가 없는 항목에 연결하려면 어떻게 해야 하나요? ECMAScript 모듈로 연결하려 한다고 가정해 보겠습니다. in Web Workers 제목 참조 아래 스크린샷에서 볼 수 있듯이 문제의 <h1>는 id 속성이 있습니다. 즉, 이 제목에 연결할 방법이 없습니다. 이것이 바로 텍스트 프래그먼트가 해결됩니다.

텍스트 프래그먼트

텍스트 프래그먼트 제안은 URL 해시에 텍스트 스니펫을 지정합니다. 이러한 텍스트 프래그먼트가 있는 URL로 이동할 때 사용자 에이전트가 이를 강조하거나 사용자의 관심을 끌 수 있습니다.

브라우저 호환성

브라우저 지원

소스

보안상의 이유로 이 기능을 사용하려면 noopener 컨텍스트. 따라서 rel="noopener" <a> 앵커 마크업 또는 추가 noopener을(를) Window.open() 창 기능 기능의 목록

`start`

가장 간단한 형태의 텍스트 프래그먼트 문법은 다음과 같습니다. 해시 기호 # 다음에 :~:text=, 마지막으로 start는 퍼센트 인코딩 텍스트를 입력합니다.

#:~:text=start

예를 들어 Chrome 80의 기능을 발표하는 블로그 게시물, 이 경우 URL은 다음과 같습니다.

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

텍스트 프래그먼트는 이와 같이 강조됩니다. Chrome과 같은 지원 브라우저에서 링크를 클릭하면 텍스트 조각이 강조표시되고 스크롤하면 뷰로 스크롤됩니다.

`start` 및 `end`

제목이 웹 작업자의 ECMAScript 모듈이라는 제목의 전체 섹션에 연결하려면 어떻게 해야 하나요? 제목만 있나요? 섹션의 전체 텍스트를 퍼센트 인코딩하면 결과 URL이 매우 깁니다.

다행히 더 나은 방법이 있습니다. 전체 텍스트 대신 start,end 문법 따라서 앞부분에 퍼센트 인코딩 단어를 지정하면 원하는 텍스트의 끝부분에 퍼센트 인코딩 단어를 추가하여 쉼표 ,.

이런 모습입니다.

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

start의 경우 ECMAScript%20Modules%20in%20Web%20Workers이(가) 있고 그 뒤에 쉼표 ,이(가) 이어집니다. ES%20Modules%20in%20Web%20Workers.님이 end(으)로 지원되는 브라우저를 클릭하면 Chrome과 마찬가지로 전체 섹션이 강조표시되고 스크롤하여 확인할 수 있습니다.

제가 어떤 start와 end을 선택했는지 궁금하실 텐데요. 실제로는 조금 더 짧은 URL이 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. 드림 양쪽에 두 단어만 있어도 효과가 있었을 것입니다. start 및 end를 이전 값입니다.

한 단계 더 나아가 start와 end에 한 단어만 사용하면 내가 곤경에 처한 것을 알 수 있습니다. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. 드림 이제 더 짧아졌지만 강조표시된 텍스트 프래그먼트는 더 이상 원래 원하는 프래그먼트가 아닙니다. 이 Workers.라는 단어가 처음 나오는 지점에서 강조표시가 중지됩니다. 강조할 목적으로 만들어졌습니다. 문제는 원하는 섹션이 현재 한 단어로 된 start 및 end 값:

`prefix-` 및 `-suffix`

고유한 링크를 얻기 위한 한 가지 방법은 start 및 end에 충분한 긴 값을 사용하는 것입니다. 하지만 일부 경우에는 이렇게 할 수 없습니다. 한 가지 말씀드리자면, Chrome 80 출시 블로그 게시물을 예로 들겠습니다. 답은 이번 출시에서는 Text Fragments가 도입되었으며

블로그 게시물 텍스트: 텍스트 URL 프래그먼트 이제 사용자나 작성자가 URL에 제공된 텍스트 프래그먼트를 사용하여 페이지의 특정 부분으로 링크할 수 있습니다. 페이지가 로드되면 브라우저는 텍스트를 강조표시하고 프래그먼트를 스크롤하여 표시합니다. 예를 들어 아래 URL은 '고양이'에 대한 위키 페이지를 로드합니다. `text` 매개변수에 나열된 콘텐츠로 스크롤합니다. — 텍스트 프래그먼트 공지사항 블로그 게시물 발췌

위 스크린샷에서 'text'라는 단어를 보면 4번 나타납니다. 네 번째 어커런스는 초록색 코드 글꼴로 작성되어 있습니다 이 특정 단어에 연결하려면 start로 설정합니다. text에게 전송합니다. 'text'라는 단어 때문에 한 단어만 end이 될 수 없습니다. 시작하기 전에 이 URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text 드림 'Text'라는 단어가 처음 나타날 때 일치합니다. 가 이미 제목에 들어 있습니다.

다행히 해결 방법이 있습니다. 이 경우 prefix- 및 -suffix를 지정할 수 있습니다. 이 초록색 코드 글꼴 "text" 앞에 있는 단어 'the'이고 다음 단어는 'parameter'입니다. 해당 사항 없음 '텍스트'라는 단어가 다른 세 번 나오는 경우 앞뒤 단어가 동일합니다. 이걸로 무장하고 이전 URL을 조정하고 prefix-와 -suffix를 추가할 수 있습니다. 다른 앱과 마찬가지로 매개변수도 퍼센트 인코딩되어야 하고 둘 이상의 단어를 포함할 수 있습니다. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter를 탭합니다. 파서가 prefix-와 -suffix를 명확하게 식별할 수 있게 하려면 구분해야 합니다. start 및 선택사항인 end(대시 - 포함)에서 값을 반환합니다.

전체 구문

텍스트 프래그먼트의 전체 문법은 다음과 같습니다. 대괄호는 선택적 매개변수를 나타냅니다. 모든 매개변수의 값은 퍼센트 인코딩되어야 합니다. 이는 대시에 특히 중요합니다. -, 앰퍼샌드 &, 쉼표 , 문자는 텍스트의 일부로 해석되지 않습니다. 지시어 문법

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-, start, end, -suffix 각각은 단일 내의 텍스트만 일치시킵니다. 블록 수준 요소, 전체 start,end 범위는 여러 블록에 걸쳐 있을 수 있습니다. 예를 들어 다음 예에서는 :~:text=The quick,lazy dog가 일치하지 않습니다. 문자열 'The fast' 중단 없는 단일 블록 수준 요소 내에 표시되지 않습니다.

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

그러나 다음 예에서는 일치합니다.

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

브라우저 확장 프로그램으로 텍스트 프래그먼트 URL 만들기

텍스트 프래그먼트 URL을 직접 만드는 것은 지루한 작업이며, 특히 URL이 고유합니다. 원하는 경우 사양에 몇 가지 팁이 있으며 자세한 내용은 텍스트 프래그먼트 URL을 생성하는 단계를 참조하세요. Google은 브라우저 확장 프로그램인 Google Cloud의 텍스트 프래그먼트에 연결을 통해 다음을 수행할 수 있습니다. 링크를 선택한 다음 '선택한 텍스트로 링크 복사'를 클릭하여 링크를 복사 컨텍스트 내에서 선택합니다. 이 확장 프로그램은 다음 브라우저에서 사용할 수 있습니다.

</ph> <ph type="x-smartling-placeholder"></ph> 텍스트 프래그먼트 링크 브라우저 확장 프로그램이 있습니다.

하나의 URL에 있는 여러 텍스트 프래그먼트

하나의 URL에 여러 개의 텍스트 프래그먼트가 표시될 수 있습니다. 특정 텍스트 프래그먼트는 앰퍼샌드 문자 &로 구분됩니다. 다음은 텍스트 프래그먼트 3개가 있는 링크의 예입니다. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet

요소 및 텍스트 프래그먼트 혼합

기존 요소 프래그먼트는 텍스트 프래그먼트와 결합할 수 있습니다. 두 가지를 모두 보유해도 괜찮습니다. 예를 들어 페이지의 원본 텍스트가 텍스트 조각이 더 이상 일치하지 않게 됩니다. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. 드림 링크를 클릭하여 의견을 보내주세요. 제품 포럼 섹션 요소 프래그먼트 (HTML1)와 텍스트 프래그먼트가 모두 포함되어 있습니다. (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

프래그먼트 지시문

아직 설명하지 않은 문법의 한 가지 요소는 프래그먼트 지시문 :~:입니다. 피해야 할 사항 위와 같이 기존 URL 요소 프래그먼트와의 호환성 문제가 있다면 텍스트 프래그먼트 사양은 프래그먼트를 도입함 지시어를 사용합니다. 프래그먼트 지시문은 코드 시퀀스로 구분된 URL 프래그먼트의 일부입니다. :~: text=와 같은 사용자 에이전트 안내를 위해 예약되며 URL에서 삭제됩니다. 작성자 스크립트가 직접 상호작용할 수 없도록 해야 합니다. 사용자 에이전트 안내는 명령어라고도 합니다. 따라서 구체적인 경우 text=를 텍스트 지시어라고 합니다.

특성 감지

지원을 확인하려면 document에서 읽기 전용 fragmentDirective 속성을 테스트하세요. 프래그먼트 명령어는 문서를 참조하세요. 작성자 스크립트와의 직접적인 상호작용을 방지하여 향후 사용자 에이전트가 기존 콘텐츠에 브레이킹 체인지가 발생할 염려 없이 지침을 추가할 수 있습니다. 1개 번역 힌트가 이러한 향후 추가될 수 있는 사례일 수 있습니다.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

참고: Chrome 80부터 Chrome 85까지 fragmentDirective 속성은 Location.prototype에 정의되었습니다. 이 변경사항에 대한 자세한 내용은 WICG/scroll-to-text-fragment#130을 참조하세요.

기능 감지는 주로 링크가 동적으로 생성되는 경우 (예: 이를 지원하지 않는 브라우저에 텍스트 조각 링크가 표시되지 않도록 할 수 있습니다.

텍스트 프래그먼트 스타일 지정

기본적으로 브라우저는 텍스트 프래그먼트의 스타일을 동일한 방식으로 mark (일반적으로 노란색 바탕에 검은색, CSS 시스템 색상 (mark) user-agent 스타일시트에는 다음과 같은 CSS가 포함됩니다.

:root::target-text {
  color: MarkText;
  background: Mark;
}

보시다시피 브라우저는 의사 선택기를 노출하고 다음 작업에 사용할 수 있는 ::target-text 강조표시를 맞춤설정할 수 있습니다. 예를 들어 텍스트 프래그먼트를 검은색으로 디자인할 수 있습니다. 있습니다. 항상 그렇듯이 색상 대비를 확인하고 따라서 재정의 스타일 지정으로 인해 접근성 문제가 발생하지 않으며, 실제로 강조표시가 눈에 잘 띄어야 합니다.

:root::target-text {
  color: black;
  background-color: red;
}

폴리필성

텍스트 프래그먼트 기능은 어느 정도까지 폴리필될 수 있습니다. Google은 polyfill: 지원되지 않는 브라우저의 경우 확장 프로그램 기능이 JavaScript로 구현되는 텍스트 프래그먼트를 기본적으로 지원합니다.

프로그래매틱 텍스트 프래그먼트 링크 생성

polyfill에는 fragment-generation-utils.js를 가져와서 텍스트 프래그먼트 링크를 생성하는 데 사용할 수 있습니다. 이것은 아래 코드 샘플에 설명되어 있습니다.

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

분석 목적으로 텍스트 프래그먼트 가져오기

많은 사이트에서 라우팅에 프래그먼트를 사용하기 때문에 브라우저에서 텍스트 프래그먼트를 제거하는 이유입니다. 그렇게 하면 페이지가 깨지지 않게 할 수 있습니다. 이 사용하는 텍스트 프래그먼트 링크를 페이지에 노출합니다. 예를 들어 분석 목적으로 제안된 솔루션이 아직 구현되지 않았습니다 이 문제를 해결하려면 아래 코드를 사용하여 원하는 정보를 찾을 수 있습니다.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

보안

텍스트 프래그먼트 지시문은 다음과 같은 결과인 전체 (동일 페이지가 아닌) 탐색에서만 호출됩니다. a 사용자 활성화에 대해 자세히 알아보세요. 또한 목적지와 다른 출발지에서 시작된 탐색에는 탐색, 탐색, 탐색 noopener 컨텍스트, 예: 충분히 격리되어야 합니다. 텍스트 프래그먼트 지시문은 기본 프레임에 적용됩니다. 이는 텍스트가 iframe 내에서 검색되지 않음을 의미합니다. 탐색에서 텍스트 프래그먼트를 호출하지 않습니다.

개인 정보 보호

Text Fragments 사양의 구현 시 텍스트가 프래그먼트가 페이지에서 발견되었는지 여부를 알려줍니다. 요소 프래그먼트는 텍스트 조각도 누구나 만들 수 있습니다. 위의 예에서 Web Workers의 ECMAScript 모듈 제목에 연결할 방법이 없었습니다. <h1>이 id가 없는데, 저를 포함하여 누구든지 세심하게 어떻게 해야 할까요?

악성 광고 네트워크(evil-ads.example.com)를 운영했다고 가정해 보겠습니다. 더 나아가 내 광고 중 하나에서 iframe 텍스트를 사용하여 dating.example.com에 숨겨진 교차 출처 iframe을 동적으로 생성함 프래그먼트 URL dating.example.com#:~:text=Log%20Out 사용자가 광고와 상호작용하면 '로그아웃'이라는 텍스트가 표시되는 경우 현재 피해자가 발견되었음을 압니다. dating.example.com에 로그인했습니다. 사용자 프로파일링에 사용할 수 있습니다. 기본 텍스트이므로 프래그먼트 구현이 성공적인 일치로 인해 포커스 전환이 발생해야 한다고 결정할 수 있음 evil-ads.example.com blur 이벤트를 수신 대기하여 일치가 발생한 시점을 알 수 있습니다. 포함 Chrome에서는 위의 시나리오가 발생할 수 없는 방식으로 텍스트 프래그먼트를 구현했습니다.

또 다른 공격은 스크롤 위치를 기반으로 네트워크 트래픽을 악용하는 것일 수 있습니다. 액세스 권한이 있었다고 가정하고 회사 인트라넷 관리자처럼 피해자의 네트워크 트래픽 로그를 볼 수 있습니다. 이제 상상해 보세요 이 문서에는 긴 인사 문서인 고난이 발생한 경우 해야 할 일과 번아웃, 불안 등과 같은 상태가 됩니다. 각 항목 옆에 추적 픽셀을 배치하면 목록. 그런 다음 문서 로드가 번아웃 항목 옆에 있는 추적 픽셀을 클릭하면 인트라넷 관리자가 직원이 :~:text=burn%20out이 포함된 텍스트 프래그먼트 링크를 클릭하고 누구도 볼 수 없다고 가정했을 수 있습니다. 이 예시는 매우 구체적인 전제조건을 충족해야 하기 때문에 Chrome 보안팀은 탐색 시 스크롤을 구현하는 것이 관리가 용이하도록 하는 위험을 평가했습니다. 다른 사용자 에이전트가 대신 수동 스크롤 UI 요소를 표시할 수도 있습니다.

선택 해제하려는 사이트를 위해 Chromium은 문서 정책 헤더 값이 포함되어 사용자 에이전트가 텍스트 프래그먼트 URL을 처리하지 않습니다.

Document-Policy: force-load-at-top

텍스트 프래그먼트 사용 중지

이 기능을 사용 중지하는 가장 쉬운 방법은 HTTP 응답을 삽입할 수 있는 확장 프로그램을 사용하는 것입니다. 예를 들어 ModHeader (Google 제품이 아님)을 사용하여 다음과 같이 응답 (요청 아님) 헤더를 삽입합니다.

Document-Policy: force-load-at-top

더 복잡한 또 다른 방법은 엔터프라이즈 설정 ScrollToTextFragmentEnabled macOS에서 이 작업을 수행하려면 터미널에 아래 명령어를 붙여넣습니다.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows의 경우 Chrome Enterprise 도움말 지원 사이트

웹 검색의 텍스트 프래그먼트

일부 검색의 경우 Google은 검색어와 관련된 간단한 답변이나 요약을 제공합니다. 관련 웹사이트의 스니펫 이러한 추천 스니펫은 검색 시 표시될 가능성이 가장 높습니다 질문 형식으로 되어 있습니다. 사용자가 추천 스니펫을 클릭하면 추천 스니펫으로 소스 웹페이지의 스니펫 텍스트입니다. 이는 자동으로 생성된 텍스트 프래그먼트 URL 덕분에 작동합니다.

추천 스니펫을 보여주는 Google 검색엔진 결과 페이지. 상태 표시줄에 텍스트 프래그먼트 URL이 표시됩니다.

결론

텍스트 프래그먼트 URL은 웹페이지의 임의 텍스트로 연결되는 강력한 기능입니다. 학문 분야 커뮤니티에서 이를 사용해 매우 정확한 인용 또는 참고 링크를 제공할 수 있습니다. 검색엔진은 딥 링크로 연결할 수 있습니다. 소셜 네트워킹 사이트에서는 이를 이용하여 사용자들이 특정 문구나 웹페이지의 특정 문구만 사용합니다. 시작하는 게 좋습니다 텍스트 프래그먼트 URL 사용 저만큼 유용하다고 생각합니다. 다음 명령어를 Text Fragment에 링크 브라우저 확장자가 포함됩니다.

감사의 말씀

텍스트 프래그먼트는 Nick Burris와 데이비드 보칸, 그랜트 왕 도움을 주신 Joe Medley님께 감사드립니다. 이 도움말을 자세히 검토하세요. 그렉 라코지님의 히어로 이미지 스플래시 해제.