Pythonでシーザー暗号 Part 3
Try the Caesar cipher in Python Part 3

ニコニコ動画にアップした動画のまとめ記事です。

This is a summary blog post about a video I uploaded to NicoNico.

細かい部分は動画を参考にしてください。

Please refer to the video for details.

今回はちょっと面白いことをしてみましょう。

Let's do something interesting this time.

Wiresharkというソフトウェアをダウンロードします。

Download the software called Wireshark.

WiresharkとはネットワークトラフィックをGUIやCLI等で解析できるソフトウェアです。

Wireshark is software that can analyze network traffic using GUI or CLI.

ダウンロードしたらインストールしてみましょう。

Download and install it.

基本的にはデフォルトの設定のままでインストールすることをお勧めします。

Essentially, I recommend that Wireshark be installed with the default settings.

Npcapのインストール画面が表示されますので、必ず[Support loopback traffic]にチェックを入れましょう。

When the Npcap installation screen appears, be sure to check [Support loopback traffic].

それか、全てのチェックを入れたほうが無難かもしれません。

Or it might be better to check all of them.

こうしないと、Windowsではループバックトラフィックを解析できません。

Otherwise, Windows cannot analyze loopback traffic.

インストールが無事完了したらWiresharkとtsharkをコマンドラインで使えるように、Wiresharkがインストールされたフォルダのパスを通します。

After the installation is successful, pass the path to the folder where Wireshark is installed so that Wireshark and tshark can be used on the command line.

Wiresharkは管理者権限で動かす必要があるので、先にPowerShellを管理者権限で立ち上げてから画面に[wireshark]と打ち込みます。

Wireshark must be run with administrator privileges, so start PowerShell with administrator privileges and type [wireshark] on the screen.

ソフトウェアが立ち上がるので、[Npcap Loopback Adapter]をダブルクリックします。

When the software starts, double-click [Npcap Loopback Adapter].

試しに、アプリ側で何か入力して送信してみましょう。

As a trial, let's enter something in the application and send it.

Protocolの欄をクリックすると、HTTP通信等がまとまって上位に表示されるようになるので便利です。

When you click Protocol column, it is convenient that HTTP communication etc. are displayed at the top.

POST通信の項目をクリックしてみましょう。

Let's click the POST communication item.

すると、POST通信で送られた送信内容がバイトと文字列で表示されているのが分かります。

You can see the bytes and strings that were sent in POST communications.

これではせっかく暗号化したつもりでも、平文そのものをサーバーに送ってから暗号化しているので通信内容が筒抜けです。

Even if you think you have encrypted it, you can still see the contents of the communication because the plaintext is encrypted after it is sent to the server.

そこで、Javascriptを使って平文から暗号文を動的に生成し、その暗号文自体をサーバーに送信するようにしてみましょう。

So let's use Javascript to dynamically generate a ciphertext from the plaintext and send the ciphertext itself to the server.

では、staticフォルダを作成して、Javascriptを作成しましょう。

Now create a static folder to create Javascript.

static/
    js/
        encrypto.js
templates/
    index.html
caesar_cipher.py

入力されたのが有効な文字であるかの関数を自作する必要がありますが、基本的にはPythonで書いたスクリプトの内容と変わりません。

You'll have to write your own function to make sure that what you type is a valid character, but it's basically the same as a script written in Python.

encrypto.js

function isValid(str) {
    if (typeof (str) !== 'string') {
        return false;
    }
    for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 127) {
            return false;
        }
    }
    return true;
}

もちろん、全体的にJavascriptのシンタックスに書き換える必要があります。

Of course, you'll need to rewrite the whole thing to Javascript syntax.

後は、文字がinputタグに入力されたら、関数を発動して、別の表示専用のinputタグに暗号文を表示させるだけです。

Then, once the character is entered into the input tag, you simply invoke the function to display the ciphertext in another display-only input tag.

HTMLファイルを開き、JSスクリプトファイルへのパスを書き足して、入力用と表示用のinputタグを分けます。

Open the HTML file and add the path to the JS script file to separate the input tags for input and display.

サブミットボタンが押されたら、表示用のinputタグの値、つまり暗号文がサーバーへ送られます。

When the submit button is pressed, the value of the input tag for display, or ciphertext, is sent to the server.

index.html

<input type="text" name="cipherText" id="cipherText" style="width:100%;" readonly />

Pythonスクリプトにも若干の変更を加えます。

Make some changes to the Python script as well.

ポート番号を書くのがめんどくさいので、portを80番に指定して、ブラウザの検索窓にlocalhostと入力するだけでサーバーへアクセスできるようにします。

Because it's cumbersome to write a port number, specify port as 80 so that you can access the server simply by typing localhost in your browser's search window.

ではWiresharkで通信内容を見てみましょう。

Now let's look at the communication in Wireshark.

暗号文が送られているのが分かります。

You can see that the ciphertext is being sent.

しかし、ここでまた一つの問題が発生します。

But here comes another problem.

それはブラウザのソース表示機能を使うと、Javascriptの内容が筒抜けなので、秘密鍵も簡単に入手することが可能です。

Using the browser's source display function, you can easily obtain the secret key because the contents of Javascript are leaked.

encrypto.js

fuction encrypto(plaintext) {
    var privatekey = 3
    .............................
    .............................
    .............................
}

では次回はこの問題を解決していきましょう。

Let's solve this problem next time.

以上です。お疲れ様です。

That's all. Thank you for your hard work.