Webサイトで公開するテキストをどうしても読み取られたくない、コピペされたくない、そんな人におすすめの機能を追加しました。
Githubにアップしていますが、テキストの暗号化読み込みをPHPで実装しているため、GithubPagesでは、動作しません。
Cloneして、独自環境にてお試しください。
Githubリンク
https://github.com/yugeta/mynt_canvas_text機能説明
canvasを表示するために送るテキストを、難読化するために、「base64」「zlib(defrate)」の2パターンの文字エンコードを用意しました。 githubのsrcフォルダに入っている「load_text.php」で、エンコードをして、 「canvas.js」でデコードしています。テキストエンコードして読み込み
表示したいページのjavascriptに、以下の記述で、エンコードしたテキストが取得できます。async load(){
const encode_type = "base64" or "zlib"
const formData = new FormData()
formData.append("text_path", "読み込むテキストファイル")
formData.append("encode_type", encode_type)
const res = await fetch("load_text.php", {
method : "POST",
body : formData,
})
.then((res)=>{return res.text()})
this.canvas(res)
}
デコードしてcanvasで表示
canvas(text){
new Canvas({
text : text,
selector : `.demo`,
text_color : `red`,
padding : 20,
font_size : 16,
encode_type : encode_type,
})
}
前回紹介したデモコードに、テキスト読み込みをphpにして、
上記の赤字箇所を追加するだけで、phpからjavascriptに受け渡す文字列が難読かされて、
ほぼ読み取り不可になります。
厳密には、デコード処理をすれば文字列変換できてしまうので、完全セキュアにしたい場合は、
鍵などを用いて、シークレット文字列でのエンコード・デコードをすることでできますが、
簡易な難読かでよければ、base64ぐらいで速度も問題ないので、十分でしょう。
zlibは、それをもう少し複雑にエンコードする方式ぐらいに考えてください。
コード解説
今回の処理では、PHP->Javascriptというフローで行うため、 PHPで文字エンコード、Javascriptでエンコードされた文字をデコードするという処理で、以下のようなコードを書きました。base64
PHP
base64_encode($text);
Javascript
decodeURIComponent(escape(atob(data)))
base64の変換は、phpは比較的簡単ですが、javascriptは３段階のデコードをする必要があります。
ちなみに、文字エンコードはUTF-8限定なので、それ以外の場合は、少しコードが変わりますので、その辺はご了承ください。
zlib
PHP
$txt1 = urlencode($text);
$txt2 = gzdeflate($txt1, 9);
return base64_encode($txt2);
Javascript
await this.load_zlib()
const val = atob(data)
const chars = ((val)=>{
const arr = []
for(let i=0; i<val.length; i++){
arr.push(val[i].charCodeAt(0))
}
return new Uint8Array(arr)
})(val)
const inflate = new Zlib.RawInflate(chars).decompress()
const decoded = new TextDecoder().decode(inflate);
return decodeURIComponent(decoded);
zlibは、要するにzip圧縮するという事でbase64よりも文字列が小さくなるかな〜と思ったんですが、
テキストでデータを受け渡す必要があるため、最終的にそれをbase64変換してしまうので、あまり圧縮効果は出ませんでした。
より高度な難読化ぐらいに考えてもらえればいいです。
ちなみに、javascriptでawaitを使っているので、これを設置する関数には、asyncをセットしてください。
zlibライブラリが、ES記述のtype=module対応していなかったので、scriptタグとして読み込む必要があり、
読み込みを非同期で待つ必要があったので、上記のような書き方をしています。（他にも応用が効く書き方なので、初学者の人は覚えておくといいかも）
0 件のコメント:
コメントを投稿