良い例（安心）
カード番号の桁数チェックだけを画面で行い、決済は信頼できるサービスに任せる。大事な情報は画面に置かず、裏側に渡す。
JavaScriptの取り扱い注意ガイド
このページは、画面の中で動く「JavaScript」を安全に使うためのポイントを、初心者の俺がふわ～っとまとめたものです。 なるべく専門用語は避けたつもりですが、分からないときはググってね～♪
JavaScript導入例
悪い例（危険）
カード番号や個人情報をJavaScriptで画面に表示してサーバーに送る
JavaScriptで気をつけたいこと
ブラウザで動くから書き換えられる
JavaScriptはパソコンやスマホの中で動くので、悪い人にいじられてしまう可能性があります。入力した直後に盗まれることがある
カード番号などを入力した瞬間に、こっそり送られてしまう手口があります。画面に悪い仕組みが仕込まれることがある
ページにこっそり悪いコードが入れられ、入力を盗まれる事件が起きています。
安心して使うための基本ルール
決済の本処理は裏側で
カード情報など大事なことは、画面ではなく「サーバー側」で行うようにしましょう。JavaScriptは補助役にする
入力チェックや見た目の動きなど、軽い役割にとどめます。外部の部品は最新に
使っている部品はこまめに更新して、古いままにしないようにします。定期的に点検する
おかしな動きがないか、定期的にチェックして安心安全を保ちましょう。
パニックを起こすJSくん
「ちょっ…待って！ぼくはボタン押されたら反応するだけのフロント係だよ！？ なんで取引データベース 調理 までーっ！？」
やってはいけないこと／やってよいこと
やってはいけないこと
カード番号をJavaScriptで保存・送信
入力した数字をそのまま扱うのは避けましょう。怪しい部品を読み込む
出どころが不明なスクリプトや古い部品は使わないようにします。～ 俺の個人的な感想 ～
WordPressなどを使えば、手軽に管理運営できますが、どの機能が何なのか、どういう構造なのか、 把握せずに使用していることが多いように感じます。個人商店や専門外の会社は、自前サーバーや自前で決済とかしなくても、手数料や使用料を支払って、専門の会社に任せた方が・・・入力内容をそのまま画面に出す
入力した文字をそのまま表示すると、悪用されることがあります。
やってよいこと
入力チェックだけを画面側で
桁数や必須の有無など、軽い確認にとどめます。見た目の改善や案内
ボタンの状態や説明の表示など、ユーザーが安心できる工夫に使います。信頼できる決済サービスを使う
専用の決済サービスに任せて、画面では必要な部品だけを呼び出します。
公開前チェックリスト
決済情報を画面側で扱っていない
JavaScriptでカード番号などを触っていないか確認しましたか？JavaScriptでは軽いチェック（桁数、形式、必須入力など）だけを行う。実際の認証やカード番号の妥当性チェックはサーバーで処理
怪しい追加がない
見知らぬコードや余計な読み込みが紛れ込んでいませんか？入力の表示は安全
入力した文字をそのまま表示していませんか？裏側に渡す流れが明確
大事な処理はきちんとサーバー側に任せていますか？
まとめ
JavaScriptは「接客係」として、見た目や操作をわかりやすくするのが得意です。決済などの大事な処理は「調理係」である裏側に任せましょう。役割を分けることで、安心して使えるサービスになります。
大事なことをざっくりまとめると・・・
JavaScriptは見た目や入力チェックに使い、大事な情報は裏側のサーバーに任せる。これが鉄則です。