[Node.js]クライアントにJavascriptのソースコードを見られないようにする方法

Question

Node.jsでWebサービスを開発中の者です。

クライアントサイドのJavascriptのファイルをmain.jsとした場合、

<script src="./main.js"></script>

などとhtmlに書きますが、これだとクリック1つでクライアントにmain.jsの中身がバレてしまい、せっかく苦労して作成したコードもパクられてしまいます。

改行マーク等を取り除いて難読化 -> リコンパイルできるし、難読状態のまま使われてしまうケースもあるようです。

https://qiita.com/yomogenium/items/881a55417dc047756e78
このサイトによると、直接アクセスした場合ニセのコードを出力してソースコードを見られないようにすることができるようですが、PHPを例に挙げているため、Node.jsでどのように実装すればよいのかわかりません。

Javascriptはクライアントサイドで動く＝クライアントのデバイスにダウンロードされて動く、ので完全に防ぐことができないことは理解していますが、なにか良い方法をご存知の方がいらっしゃいましたら、ご教授いただければ幸いです。

また、Node.jsをお使いのみなさんがどのように対策しているかにも興味があります（Javascriptのクライアントサイドのコードはバレても仕方ないと割り切っているとか）。

忌憚なきご意見をいただければと思います。
よろしくお願いいたします。

Answer 1

Javascriptのクライアントサイドのコードはバレても仕方ないと割り切っているとか

それがいちばん現実的です。

Comments

[maisumakun]

「完全に防ぐことができない」というのは、「完全に/防ぐことができない」ということです。

気休め程度で実質的な効果のない対策へ労力を費やしても、見返りは見込めません。

[kobo_jp]

なるほど。結局そういうことなのですね。サーバーサイドにおけるコード（パスワード発行など）はサーバーに置くとして、それ以外はすっぱりあきらめたほうが良いということですね。すっきりしました。ありがとうございました。

Answer 2

PHPを例に挙げているため、Node.jsでどのように実装すればよいのかわかりません。

Webブラウザは「HTTPリクエスト」というWeb業界のお作法に則って
Webサーバに対してデータをくださいという要求を行います。

これはWeb（インターネット）の仕様書のRFCにバッチリ記載されています。
参考記事: ハイパーテキスト転送プロトコル -- HTTP/1.1 (RFC2616)

これに基づいて動作してないWebブラウザなんてありませんし
(個人で勝手に作ったブラウザなら知らんけど、ChromeでRFCを無視してたら速攻バレて袋叩きにされるでしょう)
これに準拠していないWebサーバなんてありません。
そこから掘り下げればなんとでもなります。

ってHTTP REQUEST_METHODが分からないってやばくね？
Webサーバ立ち上げた事一度もありませんレベルの告白なんだけど……

• HTTP リクエストメソッド - MDN
• ルーティング - Express.js
  Node.js初心者御用達のExpressではapp.post(path, fn)で実現できる

https://qiita.com/yomogenium/items/881a55417dc047756e78
このサイトによると、直接アクセスした場合ニセのコードを出力してソースコードを見られないようにすることができるようですが

なんだこれ
デベロッパーツールのnetworkタブ開きっぱなしで全部抜けるのでは？
ローカル持ち逃げからのコピペ実装を踏まえると何も質問文の要件を満たせてません。

丸パクリを牽制するなら
実行ドメインが想定してるサーバと合ってるか否かを確認して、
違ってたらAjaxで自社に通報する仕組みでも導入すれば良いんじゃ？

またQiita記事のような小細工レベルではなく
そこそこの技術力があってもさじを投げるレベルは可能です。

具体的な例だとお城プロジェクトのPCブラウザ版ですね。

このゲームはJavaScriptで動いていますが、
EmscriptenでLLVM越しに何かの言語からコンパイルして作っています。
我々Web系エンジニアがこの処理はちょっとマシンパワー使うかもしれないからRustでやろうかな？
レベルではなく、全てがまるっとEmscriptenで包んであって何やってるかわかりません。

デベロッパーツールを開いて通信内容を見張っていても
お行儀の良いテキストファイルではなく、がっつりバイナリデータを授受してるので
解析することも困難です。

---

丸ごと保管して環境エミュレートしてローカルで動かせばええやねと思っても、
相当時間が掛かること請け合いです。

しかもこのゲーム、2週間に1度程度のペースでアップデートされます。
こういう所に価値があるので

せっかく苦労して作成したコードもパクられてしまいます。

これは解消出来たと言っても良いのではないでしょうか？
パクるのに時間かかるし価値もコピー出来ない。

---

とまぁ、どの程度まで対策や難読化を頑張るかにもよりますが、
基本的にDLしたファイルを全て持ち逃げして
ローカルで環境エミュレートしながら逆コンパイルを含めると流石に質問文の要件を全て満たす事は不可能です。

せっかく苦労して作成したコードもパクられてしまいます。

そこでマネタイズするなら辛いでしょうね。

しかし世のほぼ全てのサービスは他のユーザーとのコミュニケーションだとか
インターネット越しに商品が購入出来るだとか
音楽や映画等のコンテンツを視聴するだとか

そういうパクれない所でユーザーをもてなす事でマネタイズをしています。
ユーザーの体験で勝負！
ユーザー体験をUXと呼び、UXを最大化することでマネタイズをします。

貴方が会社の社長・取締役の立場なら
HTML、CSS、JavaScriptはコピーされるかもしれない、
でも俺達が作ったサービスは真似が出来ないぞ、何故ならば○○だから！
こういう何かしらで丸パクリされても戦えるサービスを捻出しなければなりません。

例えば私に限らず少し技術力があれば誰でも可能ですが、
Twitterのソースコードを丸パクリして同じようなサービスをすぐにリリース出来ます。
でもコードを解析して付加価値付けてるわけでもないし、全てがTwitterの追従でしかない。
誰も使わないのは目に見えてますのでそんな気はおきません。
やる奴はタダのバカです。

社員の立場ならそういう事が出来ない社長・取締役が居ない会社は
そのうち立ちいかなくなるのでさっさと逃げましょう。
まぁ、流石に何か考えてると思うので数年頑張ってみては？

Comments

[kobo_jp]

ご返信、ありがとうございます。
Node.jsでもPHPでもWebサーバーを立てたことはありますし、貴殿のおっしゃることはもちろん理解の範疇なのですが、Node.jsでもっと簡単にできる手がないかと思っただけです。まあ、ニセのコードを吐き出してもChromeのデベロッパーツールなどで分かる人には分かってしまうという程度でしかないですね。

ともあれ、先に書いたとおり、無駄なことはやめることにしましたので。

ありがとうございました。

Answer 3

レンダリング部分と、論理部分が混じっているのですね。作成開始した時から計画していないと、一体成型になるのは良くありそうです。私もそうでした。
その構造だと、追加・変更が難しいので、レンダリングと論理の分離、更に表現機能毎に論理を分割と進んでいきました。APIがどうあるべきか理想的形の方向からとできてしまっている（けどバグっている）コードの間を段々埋める形で直しています。

Comments

[kobo_jp]

すみません。書き方が紛らわしかったかも知れません。レンダリング等サーバーサイドのコード部分については問題ないのです。クライアントが見ることのできるhtmlのソースコードJavascript部分(ex. /js/my.js)をクリックすれば誰でも見られてしまうよなあ、という話です。クライアントサイドのJavascriptコードはクライアントマシンにダウンロードされて実行されてしまうので、見られてしまうのは当たり前のことなのですが、なんとか隠す方法はないものかと虫の良いことを思った次第です。
失礼いたしました。

Answer 4

nodeは、サーバサイドで動作するjavascriptの処理系です。javascriptが言語の名前で、nodeは、それを処理するプログラム。IE, Firefox, Edge などそれぞれ別のプログラムです。

nodeで表現する論理を隠したいのであれば、論理を全てサーバサイドで実行して、結果のみをクライアントに返すようにします。結果をHTMLにしてクライアント側のHTMLのどこかに、innerHTMLとして挿入します。隠蔽効果に加えて、クライアントへの通信量の削減効果もあります。もちろん言語はjavscriptに限らずサーバサイドで実行できればどれでも同じことができます。

ボタンの名前、使用するデータフィールドの値、サーバーのアドレス等は露出してしまいますが、論理は完全に隠すことができます。

実際の例で、隠蔽具合が納得できる例は、amazon, google へのログイン部分です。
APIの名前をAPIにして、cmd=99 みたいにAPIの中身を推定しにくい形にすると更に論理の推測は難しくなります。露出するのは、以下の程度になります。

https://azjjioe0.amazon.com/myapi?cmd=099&data0="名前"&data1="姓"

Comments

[kobo_jp]

ご回答ありがとうございます。
そうですね。WebサーバーはNode.jsでも何回も立てているので基本原理がわかっていないわけではありません。APIキーなど絶対漏れてはいけない部分はサーバー内のdotenvなどに記述してしてわからないようにしています。ただ、今回たまたまクライアントサイドのJavascriptでかなり混んだもの（作成するのに苦労したもの）を作ってしまったためこれを隠せないかなと思った次第です。

>論理を全てサーバサイドで実行して、結果のみをクライアントに返すようにします。結果をHTMLにしてクライアント側のHTMLのどこかに、innerHTMLとして挿入します。
ちなみにこれも行っています。

ありがとうございました。