블로그 • 공유 메커니즘

URL Hash를 사용하여 공유 JSON: 서버에 업로드하지 않는 원칙, 제한 및 사용법

동료는 "네 쪽 JSON은 포맷하자마자 맞는데 여기서 오류 신고하겠다"고 말했다. 파일을 주고받는 것도 귀찮고, 스크린샷도 더 이상 수정할 수 없습니다.

URL Hash 공유현재 도구를 작성하고 주소 표시줄에 입력합니다.#나중에. 상대방이 동일한 링크를 열면 브라우저는 왼쪽 및 오른쪽 열을 로컬로 복원합니다. 일반 페이지 요청은 이 데이터를 서버로 보내지 않습니다.

이는 "온라인 서식 지정 웹사이트에 게시한 다음 공유를 클릭하는" 것과는 다릅니다. 후자는 일반적으로 원본 텍스트를 다른 사람의 백엔드에 먼저 게시한 다음 짧은 링크를 제공합니다. Hash 공유에는 그런 단계가 없습니다.

이 기사에서는 다음 내용을 설명합니다.

• URL Hash 왜 보통 서버 로그에 나타나지 않나요?
• DevBox 중#tool=…&data=…코딩하는 방법
• Base64가 암호화되지 않은 이유
• 링크는 얼마나 확장되며 어떤 소프트웨어가 링크를 자를까요?
• 언제 공유를 사용해야 하며 언제 공유를 중지해야 합니까?

URL Hash 공유란 무엇인가요?

전체 URL는 서버가 볼 수 있는 부분과 브라우저에만 남아 있는 부분의 두 부분으로 나눌 수 있습니다.

DevBox의 "공유" 기능은 현재 도구 ID를 인코딩하고 Hash에 입력한 다음 전체 단락을 인코딩하는 것입니다.location.href클립보드에 복사합니다. 상대방이 그것을 열면 페이지 스크립트는 다음과 같습니다.location.hash,존재하다자신의 브라우저도구와 텍스트를 복원합니다.

1. 1
   브라우저에서 "공유"를 클릭합니다.

   입력은 먼저 UTF-8로 변환된 다음 Base64로 컴파일되어 다음과 같이 작성됩니다.#tool=&data=.

2. 2
   전체 URL를 동료에게 보내기

   상대방이 동일한 사이트를 연 후 페이지 스크립트는 다음을 읽습니다.location.hash.

3. 3
   상대방의 브라우저에서 복원

   로컬 서식, 체크섬 또는 Diff. 서버는 페이지 자체만 수신하며 이 JSON은 수신하지 않습니다.

이것과브라우저에 JSON 처리 넣기동일한 원칙입니다. 계산은 로컬에서 이루어지며 공유는 데이터베이스를 통과하지 않습니다. 개인 정보 보호 경계는 다음과 같이 기록됩니다.개인 정보 보호 정책섹션 3.

Hash가 서버에 업로드되지 않는 이유

조각이 HTTP 요청을 입력하지 않습니다.

~에 따르면URL.hash에 대한 MDN의 설명그리고WHATWG URL 표준의 조각,#그 다음에는 조각 식별자가 옵니다. 브라우저가 탐색할 때 HTTP 요청의 경로/쿼리는 이 단락을 포함하지 않습니다.

따라서 액세스 로그에는 일반적으로 다음만 포함됩니다.

GET /json/format.html HTTP/1.1

대신:

GET /json/format.html#data=……

이것이 Hash가 "내 붙여넣기 복사본을 사이트에 저장하는 것을 원하지 않습니다"에 적합한 이유입니다.적합하지 않음보안 채널의 경우: 데이터는 URL에 그대로 유지되며 기본적으로 이 네트워크 홉을 통과하지 않습니다.

쿼리 문자열과 쿼리 문자열의 차이점

누군가가 같은 Base64를 넣으면?나중에 효과는 동일해 보이지만 데이터가 서버 로그에 입력되었습니다. DevBox 이 레이어를 피하려면 Hash만 쓰세요.

추가: 리퍼러는 일반적으로 조각을 전달하지 않습니다. 공유 페이지에서 외부 링크를 클릭하면 일반적으로 상대 사이트에서 Hash의 JSON을 가져올 수 없습니다. 이는 추가 암호화가 아닌 브라우저의 기본 동작입니다.

DevBox의 공유 링크는 어떤 모습인가요?

'공유'를 클릭하면 Hash가 그룹이 됩니다.URLSearchParams:

#tool=json-format&data=<Base64>

tool

현재 도구 ID입니다. 링크를 연 후 항상 "JSON 형식"으로 떨어지는 대신 해당 작업 공간으로 전환됩니다. 일반적인 값은 다음과 같습니다json-format,json-validate,json5,json-path,json-diff.

도구만 전환하고 공유를 클릭하지 않으면 주소 표시줄이 다음으로 업데이트됩니다.#tool=…,데이터가 포함되어 있지 않습니다.. 이는 어떤 도구를 사용하고 있는지 기억하고 편집기의 내용을 기록에 기록하지 않기 위한 것입니다.

data

왼쪽에 UTF-8 텍스트를 입력한 후 Base64를 입력하세요. 구현상 다음과 동일합니다.

btoa(unescape(encodeURIComponent(input)))

첫 번째encodeURIComponent중국어와 이모티콘이 통할 수 있도록 하기 위함입니다.btoa. 복원할 때는 반대 경로를 따르세요. 이는 MDN과 논의되었습니다.Base64 Unicode 문자열 인코딩같은 종류의 문제입니다.

인코딩은 암호화가 아닙니다

Base64의 목적은 "신뢰할 수 있는 사람만 읽을 수 있는" 것이 아니라 "모든 바이트를 URL에 넣을 수 있다"는 것입니다. 링크를 받은 사람은 누구나 콘솔에서 링크를 복원할 수 있습니다.

const data = new URLSearchParams(location.hash.slice(1)).get("data");
decodeURIComponent(escape(atob(data)));

당신은 또한 넣을 수 있습니다data=이 사이트에 다음 문자열이 표시됩니다.Base64 디코딩. 비밀번호, 일회성 링크, 만료 날짜가 없습니다.

완전한 예

"JSON 형식"으로 입력한다고 가정해 보겠습니다.

{
  "name": "Ada",
  "role": "dev"
}

한 줄로 압축하면 27바이트입니다.

{"name":"Ada","role":"dev"}

UTF-8 → Base64는 36개의 ASCII 문자를 얻습니다.+ / /, URL)에 배치할 때 더 이상 백분율 기호 인코딩으로 늘어나지 않습니다.

eyJuYW1lIjoiQWRhIiwicm9sZSI6ImRldiJ9

Hash 완료:

#tool=json-format&data=eyJuYW1lIjoiQWRhIiwicm9sZSI6ImRldiJ9

상대방이 열어서 같은 단락 JSON을 본 후 계속해서 서식을 지정하고 수행할 수 있습니다.JSONPath 추출, 또는 자신만의 응답으로 Diff를 수행하세요. 원본 텍스트가 실제로 주석이 달린 구성인 경우 대신 사용해야 합니다.JSON5 분석출력을 사용할 수 없도록 두지 말고 다시 공유하십시오.JSON.parse텍스트가 상대방에게 직접 전송됩니다.

한자가 포함되어 있으면 볼륨이 더 분명해집니다. 예를 들어{"msg":"格式化后两边一致"}34바이트 UTF-8, Base64 다음에 48자가 나옵니다. 어디/그리고=URL 인코딩 후 매개변수 값은 54자가 됩니다.

링크는 얼마나 걸리나요?

Hash 공유에 대한 엄격한 제한은 '서버 업로드 제한'이 아닙니다.URL 문단 전체가 상대방 브라우저로 계속 전송될 수 있나요?.

대략적인 순수 ASCII인 JSON 섹션의 경우 측정된 크기 순서는 다음과 같습니다(포함).tool=json-format&data=확장 후 길이):

Chrome은 매우 긴 주소 표시줄을 소화할 수 있지만 그 사이에는 IM, 이메일, 짧은 링크 서비스, QR 코드 등의 또 다른 레이어가 있습니다. 그들은 각각 모자가 더 짧고 "꼬리를 잘라냈습니다"라고 말하는 경우가 거의 없습니다. 따라서 프로세스는 다음과 같아야 합니다.

1. 1
   "공유"를 클릭하세요

   그냥 복사하지 말고 전체 주소를 복사하세요#조금 뒤에.

2. 2
   먼저 이 컴퓨터의 새 탭에서 엽니다.

   동료에게 보내기 전에 도구와 입력이 있는지 확인하세요.

전체 액세스 로그와 수 메가바이트의 내보내기 파일을 보려면 로컬에 붙여넣거나 "다운로드"를 클릭하세요. Hash 공유의 목적은 네트워크 디스크로서가 아닌 "입력의 짧은 시간을 재생"하는 것입니다.

Hash 공유와 다른 방법의 차이점은 무엇인가요?

팀에 이미 인트라넷 붙여넣기 또는 작업 주문 첨부 파일이 있는 경우 대규모 로그 섹션에 원래 채널을 사용하는 것이 더 안정적입니다. Hash 값은 다음과 같습니다.동일한 링크에는 "사용할 도구"와 "입력 내용"이 모두 포함되어 있습니다., 서식을 클릭했는지 확인을 클릭했는지 상대방이 추측할 필요가 없습니다.

사용할 때 기억해야 할 경계

• 링크는 일반 텍스트와 같습니다.페이지를 열 수 있는 사람은 누구나 콘텐츠를 복원할 수 있습니다. 비밀 키, 생산 토큰, 고객 목록 또는 비공개 인터페이스를 공유하지 마세요.
• 보내기 전에 클릭하세요.채팅 소프트웨어가 지나치게 긴 URL을 자르면 상대방은 불완전한 Hash을 열어 공백 입력 또는 디코딩 실패로 나타납니다.
• 상대방도 동일한 DevBox 사이트를 열 수 있어야 합니다.Hash는 페이지와 별도로 구문 분석할 수 없습니다.#마지막 단락을 메모장에 던져도 소용이 없습니다.
• 브라우저 기록에는 전체 주소가 남습니다.로컬 기록, 동기화된 계정, 화면 공유를 모두 볼 수 있습니다. 공유를 클릭하지 않고 도구만 전환하면 Hash에 데이터가 없고 복사본 하나만 저장됩니다.
• 확장 및 디버깅 도구는 다음을 읽을 수 있습니다.location.href.로컬 컴퓨팅은 "이 컴퓨터의 누구도 그것을 볼 수 없다"는 것이 아니라 "우리 사이트가 복사본을 저장한다"는 위험을 줄여줍니다.
• "URL에서 당기기"는 또 다른 방법입니다.작업 공간에 원격 주소를 입력하고 "Pull"을 클릭하면 브라우저가 해당 주소로 요청을 보냅니다. 공유 Hash 가져오시면url=, 이를 연 사람도 이 요청을 시작합니다. 직접 확인한 출처만 신뢰하세요.

실제 개인 정보 보호에 관해서는 오프라인 또는 인트라넷 도구를 사용하십시오. 이는 "사이트에 로그인 상자가 있는지 여부"와는 아무런 관련이 없습니다.

FAQ

URL Hash 공유란 무엇인가요?

현재 도구를 인코딩하고 주소 표시줄에 입력#나중에. 상대방이 동일한 사이트에서 동일한 링크를 열면 브라우저는 이 데이터를 페이지 요청으로 서버에 전송하지 않고 로컬로 콘텐츠를 복원합니다.

Hash에 있는 데이터 서버를 볼 수 있나요?

일반 페이지 요청은 조각을 서버로 보내지 않으며 액세스 로그에는 일반적으로 경로만 있습니다. 하지만 이것이 비밀이라는 의미는 아닙니다. 전체 링크를 가진 사람은 누구나 해독할 수 있습니다.

인코딩과 암호화의 차이점은 무엇입니까?

인코딩(여기서는 Base64)을 사용하면 텍스트를 URL에 넣을 수 있고 누구나 이를 되돌릴 수 있습니다. 암호화에는 키가 필요하며 키가 없으면 읽을 수 없습니다. DevBox 공유는 전자를 수행합니다.

Hash 키나 토큰에 공유를 사용할 수 있나요?

캔트. 링크가 전송되면 되돌릴 수 없으며 기록에 계속 기록됩니다. 키에 대해서는 팀의 키 관리 시스템을 입력하시고, 웹 주소창은 입력하지 마세요.

상대방이 공백으로 열었습니까?

먼저 URL가 있는지 확인하세요.data=중간이 잘렸습니다. 단순한 복사본이 아닌 동일한 DevBox 사이트를 열고 있는지 다시 확인하세요.#조금 뒤에. 대신 이 기계를 사용하여 큰 텍스트를 붙여넣으세요.

JSON 서식 지정 및 확인과 어떤 관계가 있나요?

공유는 "현재 입력 및 도구를 있는 그대로 가져오는 것"만 담당합니다. 서식 지정, 구문 확인, JSON5, JSONPath, Diff는 여전히 상대방의 브라우저에서 로컬로 실행됩니다. 먼저 구조를 살펴보고 사용해야 합니다.JSON 형식;위치 지정이 필요함Unexpected token,사용확인하다또는JSON5.

요약

URL Hash 공유는 기본적으로 다음과 같습니다.

로컬 도구 상태 + 가역적 인코딩 + 브라우저 조각은 요청과 함께 업로드되지 않습니다.

JSON의 짧은 구간이나 구성을 재현하는데 적합합니다. 네트워크 디스크로 사용하기에 적합하지 않으며 비밀을 전송하는 데에도 적합하지 않습니다. 올바르게 사용하면 귀하와 귀하의 동료는 동일한 왼쪽 및 오른쪽 열과 대화하고 있습니다. 잘못 사용하면 누구나 열 수 있는 주소에 일반 텍스트를 붙여넣는 것과 같습니다.

← 블로그로 돌아가기