✂️

【クライアントサイドのみで解決】HTML１枚でURLエンコード・デコードしたい【内製ツール】

2024/04/30に公開

Security

はじめに

URLエンコードされた文字列をデコードしたり平文をURLエンコードしたい場合、検索エンジンにて同様のツールを提供しているWebサイトを探すと思います。

しかしながら、業務で得た情報をそれらでエンコードしたりデコードしたりする際、入力情報がサーバに送信されているのかどうか不安になってしまいます。

ほとんどのWebサイトではサーバに入力情報を送信しない旨を明言していただけており、かつ実際にHTTPトラフィックを確認しても送信している形跡がないため比較的安全です。

問題なのは、誤ってサーバに入力情報を送信しているWebサイトで機密情報を入力してしまうインシデントです。

これらを心配しながら利用するのではあれば、いっそのことツールを内製してしまえば良いのです。

今回はHTML１枚かつクライアントサイドだけで完結する（サーバいらず）URLエンコード・デコードツールを皆さんに共有します。
※筆者自身も普段は当該ツールを使用しています。

ソースコード

<!DOCTYPE html>
<head>
<title>URL Encoder & Decoder</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>URL Encoder/Decoder</h1>
<textarea id="input" placeholder="Input Any Words"></textarea>
<button onclick="encodeURL()">Encode</button>
<button onclick="decodeURL()">Decode</button>
<textarea id="output" readonly></textarea>

<script>
  function encodeURL() {
    const input = document.getElementById('input').value;
    const encoded = encodeURIComponent(input);
    document.getElementById('output').value = encoded;
  }

  function decodeURL() {
    const input = document.getElementById('input').value;
    const decoded = decodeURIComponent(input);
    document.getElementById('output').value = decoded;
  }
</script>
</body>
</html>