Blog • Sharing mechanism

Use URL Hash to share JSON: Principles, limitations and usage of not uploading to the server

The colleague said, "Your side JSON is correct as soon as you format it, but I will report an error here." It's annoying to transfer files back and forth, and screenshots can't be modified anymore.

URL Hash ShareWrite the current tool and input into the address bar#behind. When the other party opens the same link, the browser restores the left and right columns locally; ordinary page requests will not send this data to the server.

This is not the same thing as "posting it to an online formatting website and then clicking share." The latter usually POSTs the original text to someone else's backend first, and then gives you a short link. Hash There is no such step in sharing.

This article will explain:

• URL Hash Why doesn’t it usually appear in the server logs?
• DevBox of#tool=…&data=…how to code
• Why Base64 is not encrypted
• How much will the link expand and which software will truncate it?
• When should you use sharing and when should you stop sharing?

URL Hash What is sharing?

The complete URL can be broken into two parts: the part that the server will see, and the part that only stays in the browser.

What DevBox’s “Share” does is: encode the current tool id and left input into Hash, and then encode the entire paragraphlocation.hrefCopy to clipboard. After the other party opens it, the page script readslocation.hash, inhis own browserRestore tools and texts.

1. 1
   You click "Share" in your browser

   The input is first converted into UTF-8, then compiled into Base64, and written as#tool=&data=.

2. 2
   Send the complete URL to colleagues

   After the other party opens the same site, the page script readslocation.hash.

3. 3
   Restore in the other party's browser

   Local formatting, checksum or Diff. The server only receives the page itself, not this JSON.

This andPut JSON processing in the browserIt's the same principle: calculations happen locally, and sharing doesn't go through our database. Privacy boundaries are written inPrivacy statementSection 3.

Why Hash will not be uploaded to the server

Fragment does not enter HTTP request

pressMDN’s explanation of URL.hashandfragment in WHATWG URL standard,#After that comes the fragment identifier. When the browser navigates, the path/query of the HTTP request does not contain this paragraph.

So the access log usually only contains:

GET /json/format.html HTTP/1.1

instead of:

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

This is why Hash is suitable for "I don't want the site to save a copy of my paste", butNot suitableWhen the secure channel: the data is still intact in URL, it just does not go through this hop of the network by default.

The difference between Query String and Query String

If someone puts the same Base64 into?Later, the effect looks the same, but the data has been entered into the server log. DevBox Only write Hash just to avoid this layer.

In addition: Referer usually does not carry fragment. When you click from the sharing page to the external link, the other site generally cannot get the JSON in the Hash. This is the default behavior of the browser, not additional encryption we do.

What does DevBox’s sharing link look like?

After clicking "Share", Hash is a groupURLSearchParams:

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

tool

Current tool id. After opening the link, you will switch to the corresponding workspace, instead of always falling to "JSON Format". Common values includejson-format,json-validate,json5,json-path,json-diff.

When you only switch tools and do not click share, the address bar will be updated to#tool=…,Does not contain data. This is to remember which tool you are using and not write the contents of the editor into the history.

data

Enter the UTF-8 text on the left, then do Base64. Implementationally equivalent to:

btoa(unescape(encodeURIComponent(input)))

firstencodeURIComponentIt is to make Chinese and Emoji passablebtoa. Take the opposite path when restoring. This is discussed with MDNBase64 encoding of Unicode stringIt's the same kind of problem.

Encoding is not encryption

The purpose of Base64 is "any byte can be put into URL", not "only trusted ones can read it". Anyone who gets the link can restore it in the console:

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

You can also putdata=The following string is thrown into this siteBase64 Decoding. There is no password, no one-time link, and no expiration date.

A complete example

Suppose you enter in "JSON Format":

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

Compressed into one line it is 27 bytes:

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

UTF-8 → Base64 gets 36 ASCII characters (there are no+ / /, it will no longer be stretched by the percent sign encoding when placed in URL):

eyJuYW1lIjoiQWRhIiwicm9sZSI6ImRldiJ9

Complete Hash:

#tool=json-format&data=eyJuYW1lIjoiQWRhIiwicm9sZSI6ImRldiJ9

After the other party opens it and sees the same paragraph JSON, he can continue to format and doJSONPath Extraction, or do Diff with your own response. If the original text is actually an annotated configuration, it should be used insteadJSON5 AnalysisShare the output again instead of leaving it unavailableJSON.parseThe text is thrown directly to the other party.

The volume is more obvious when it contains Chinese characters. For example{"msg":"格式化后两边一致"}It is 34 bytes UTF-8, Base64 followed by 48 characters; where/and=After being URL encoded, the parameter value will become 54 characters.

How long will the link become?

Hash The hard limit for sharing is not the “server upload limit”;Can the entire paragraph URL still be sent to the other party’s browser?.

For a section of JSON that is approximately pure ASCII, the measured order of magnitude is as follows (includingtool=json-format&data=length after expansion):

Chrome can digest a very long address bar, but there is another layer in between: IM, email, short link services, and QR codes. They each have a shorter cap, and rarely tell you "I cut off the tail." So the process should be:

1. 1
   Click "Share"

   Copy the full address, don’t just copy it#A bit behind.

2. 2
   First open it in a new tab on this machine

   Make sure the tools and input are there before sending it to your colleagues.

For the entire access log and the export file of several megabytes, please paste it locally or click "Download". Hash The purpose of sharing is to "reproduce a short period of input", not as a network disk.

Hash What is the difference between sharing and other methods?

If the team already has intranet paste or work order attachments, it is more stable to use the original channel for large sections of logs. The value of Hash is:The same link contains both "which tool to use" and "what is the input", the other party does not need to guess whether you clicked on formatting or verification.

Boundaries that must be remembered when using

• Link equals clear text.Anyone who can open the page can restore the content. Don’t share secret keys, production tokens, customer lists, or undisclosed interfaces.
• Click it before sending it out.When the chat software truncates an overly long URL, the other party will open a incomplete Hash, which will appear as a blank input or decoding failure.
• The other party must be able to open the same DevBox site.Hash cannot be parsed separately from the page;#There is no use throwing the last paragraph into notepad.
• The browser history will leave the full address.The local history, synchronized accounts, and screen sharing can all be seen. When you don’t click share and just switch tools, there is no data in Hash, just to save one copy.
• Extensions and debugging tools may readlocation.href.Local computing reduces the risk of "our site saves a copy", not "no one on this computer can see it."
• "Pull from URL" is another way.When you fill in the remote address in the workspace and click "Pull", the browser will send a request to that address. Share Hash If you bring iturl=, the person who opened it will also initiate this request. Only trust sources that you have checked yourself.

When it comes to real privacy, use offline or intranet tools. This has nothing to do with "whether the site has a login box".

FAQ

URL Hash What is sharing?

Encode the current tool and input into the address bar#behind. When the other party opens the same link on the same site, the browser restores the content locally without sending this data to the server as a page request.

Can the data server in Hash be seen?

Ordinary page requests will not send the fragment to the server, and the access log usually only has the path. But that doesn’t mean it’s secret: anyone with the full link can decode it.

What is the difference between encoding and encryption?

The encoding (here Base64) ensures that the text can be put into URL, and anyone can reverse it. Encryption requires a key, without which it cannot be read. DevBox Sharing does the former.

Hash Can sharing be used for keys or tokens?

No. Once the link is sent, it cannot be taken back and it will still be recorded in the history. Please enter your team's key management system for the key, and do not enter any web address bar.

The other party opens it blank?

First check if URL is theredata=Truncated in the middle; confirm again that you are opening the same DevBox site, not just a copy.#A bit behind. Please use this machine to paste oversized text instead.

What is the relationship with JSON formatting and verification?

Sharing is only responsible for "taking away the current input and tools as is". Formatting, syntax verification, JSON5, JSONPath, Diff are still executed locally in the other party’s browser. You need to look at the structure first, useJSON Format;requires positioningUnexpected token, useVerifyorJSON5.

Summary

URL Hash Sharing is essentially:

Local tool status + reversible encoding + browser fragment is not uploaded with the request.

It is suitable for reproducing a short section of JSON or configuration. It is not suitable for use as a network disk, and it is not suitable for transmitting secrets. If you use it correctly, you and your colleagues are talking to the same left and right columns; if you use it wrongly, it is equivalent to pasting plain text into an address that anyone can open.

← Return to blog