{"id":52678,"date":"2021-07-11T03:01:56","date_gmt":"2021-07-10T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52678"},"modified":"2021-07-11T14:01:20","modified_gmt":"2021-07-11T04:01:20","slug":"javascript-and-php-encoding-and-decoding-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-encoding-and-decoding-primer-tutorial\/","title":{"rendered":"Javascript and PHP Encoding and Decoding Primer Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript and PHP Encoding and Decoding Primer Tutorial<\/p><\/div>\n

The recent HTML form navigation work gobsmacked us mildly as we reconnected with the fact that a character like “~” is not changed (ie. encoded) by Javascript’s “encodeURIComponent” encoding function. And then we figured that “~” can get you back to home directories on Linux and Unix, so presumably, could appear in a URL non-argument part (ie. the address of your web script). There are others too, and so we decided to write a practical way for you to experiment with.<\/p>\n

Let’s show you the PHP “proof of concept” web application<\/a> code, it being pretty short, below …<\/p>\n


\n<?php
\n\/\/ encoding_decoding.php
\n\/\/ User experimentation with encoding and decoding systems
\n\/\/ RJM Programming
\n\/\/ July, 2021
\n$pfrom=\"The quick brown fox jumps over the lazy dog and tilde (~) followed closely behind, dragging along 0 Mostel!?\";
\n$pto=\"\";
\n$pvia=\"\";
\n$blurb=\"Please choose an encode or decode option below ...\";
\nif (isset($_POST['from']) && isset($_POST['via'])) {
\n $pfrom=str_replace('+',' ',urldecode($_POST['from']));
\n $pvia=str_replace('+',' ',urldecode($_POST['via']));
\n if (strpos(urldecode($_POST['via']), \"base64_encode\") !== false) {
\n $pto=base64_encode($pfrom);
\n $blurb=$pvia;
\n } else if (strpos(urldecode($_POST['via']), \"base64_decode\") !== false) {
\n $pto=base64_decode($pfrom);
\n $blurb=$pvia;
\n } else if (strpos(urldecode($_POST['via']), \"urlencode\") !== false) {
\n $pto=urlencode($pfrom);
\n $blurb=$pvia;
\n } else if (strpos(urldecode($_POST['via']), \"urldecode\") !== false) {
\n $pto=urldecode($pfrom);
\n $blurb=$pvia;
\n }
\n}
\n
\necho \"
\n<html>
\n<head>
\n<script type='text\/javascript'>
\n function consider(sio) {
\n }
\n
\u200b
\n function maybeclient() {
\nocument.getElementById('tvia').value=document.getElementById('tvia').value.toLowerCase().replace('uri','URI').replace('component','Component');
\n if (document.getElementById('tvia').value == '') {
\n return false;
\n } else if (document.getElementById('tvia').value.indexOf('base64') == 0) {
\n return true;
\n } else if (document.getElementById('tvia').value.indexOf('url') == 0) {
\n return true;
\n } else if (document.getElementById('tvia').value.indexOf('atob') == 0) {
\n try {
\n document.getElementById('tto').value=atob(document.getElementById('tfrom').value);
\n } catch(ecvd) { alert('You have some invalid characters for atob to handle.'); }
\n } else if (document.getElementById('tvia').value.indexOf('btoa') == 0) {
\n document.getElementById('tto').value=btoa(document.getElementById('tfrom').value);
\n } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURIComponent'.toUpperCase()) == 0) {
\n document.getElementById('tto').value=encodeURIComponent(document.getElementById('tfrom').value);
\n } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURIComponent'.toUpperCase()) == 0) {
\n document.getElementById('tto').value=decodeURIComponent(document.getElementById('tfrom').value);
\n } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURI'.toUpperCase()) == 0) {
\n document.getElementById('tto').value=encodeURI(document.getElementById('tfrom').value);
\n } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURI'.toUpperCase()) == 0) {
\n document.getElementById('tto').value=decodeURI(document.getElementById('tfrom').value);
\n }
\n return false;
\n }
\n<\/script>
\n<\/head>
\n<body>
\n<h1>User experimentation with encoding and decoding systems<\/h1>
\n<h3>RJM Programming - July, 2021<\/h3>
\n<form onsubmit='return maybeclient();' method=POST action=.\/encoding_decoding.php>
\n<table style=width:90%; border=60>
\n<tr><th>From ... <\/th><th> ... <input type=submit value=via><\/input> ... <\/th><th> ... To<\/th><\/tr>
\n<tr><td><textarea rows=30 style=width:100%; name=from id=tfrom>\" . $pfrom . \"<\/textarea><\/td><td style=vertical-align:top;text-align:center;><select size=11 name=via id=tvia onchange=consider(this);>
\n<option value='\" . strtoupper($pvia) . \"'>\" . $blurb . \"<\/option>
\n<option value='base64_encode'>base64_encode<\/a><\/option>
\n<option value='base64_decode'>base64_decode<\/a><\/option>
\n<option value='btoa'>btoa<\/a><\/option>
\n<option value='atob'>atob<\/a><\/option>
\n<option value='urlencode'>urlencode<\/a><\/option>
\n<option value='urldecode'>urldecode<\/a><\/option>
\n<option value='encodeURIComponent'>encodeURIComponent<\/a><\/option>
\n<option value='decodeURIComponent'>decodeURIComponent<\/a><\/option>
\n<option value='encodeURI'>encodeURI<\/a><\/option>
\n<option value='decodeURI'>decodeURI<\/a><\/option>
\n<\/select><\/td><td><textarea readonly rows=30 style=width:100%; name=to id=tto>\" . $pto . \"<\/textarea><\/td><\/tr>
\n<tr><td colspan=3><input id=ende value='Encode or Decode' type=submit><\/input><\/td><\/tr>
\n<\/table>
\n<\/body>
\n<\/html>\";
\n
\n?>
\n<\/code><\/p>\n

The space character is one to watch. A client side HTML and Javascript form “encodeURIComponent”s any space to %20 but serverside PHP “urlencode”s a space to the “+” character. This “+” is a legitimate character in data-URIs and we find we need to assume a “urldecode” of passed in characters, if they do not contain …<\/p>\n