https://let.blog.jp/tag/iframe

長いクエリがある URL に短縮 URL を作ってリダイレクトせず短縮 URL のまま表示する
サーバサイドも使えれば長い URL のページへ proxy するだけで済むので単純
静的ファイルのみしか使えない場合はどうしようかと考えたら全画面 iframe 使うだけだった

<!doctype html>

<style>
body { margin: 0; }
iframe {
	display: block;
	width: 100vw;
	height: 100vh;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
</style>
<iframe src="page.html"></iframe>

src の page.html のところに長い URL を設定する
iframe だけのページを iframe の URL 変えながらたくさん作るのも面倒なのでマッピングのデータの json をロードして今のページに対する長い URL を動的に作るほうがいいかも
ページ数分の大きめな json を毎回ロードすることになるけどキャッシュされればそこまで困るほどでもなさそう

JSONP ふうに iframe への設定も含めとくとか

!function(values) {
	document.querySelector("iframe").src = values[location.pathname]
}({
	"/azj4": "/foo/bar.html?longlonglong=query",
	"/bj9c": "/long-url.html",
	// ...
	// ....
})

Chrome が余計な変更をしたので data: から始まる URL はユーザが直接入力しない限りトップフレームで開けません
かと言って URL.createObjectURL を使ってあとからメモリ解放もするというのはあまりしたくないです

トップフレームじゃなければ開けるので全画面で iframe を使うようにすると見た目上はほぼ同じにできます
実際にトップフレームで開く用の HTML を用意します

<!doctype html>

<iframe></iframe>

<style>
	body {
		margin: 0;
	}
	iframe {
		border: 0;
		padding: 0;
		margin: 0;
		width: 100vw;
		height: 100vh;
		display: block;
	}
</style>

<script>
	const url = new URL(location).searchParams.get("url")
	if (url) document.querySelector("iframe").src = url
</script>

このページのクエリパラメータで「?url=data:～」を指定します
単純に URL を iframe で開くので iframe で開くことを禁止してるページでなければ https の URL でも使えます

DataURI は長くなりがちなので URL の長さの限界を超えたいなら window.open した返り値の window オブジェクトを保持して

const subwin = window.open("/preview.html")
subwin.contentDocument.querySelector("iframe").src = url