この章では、Web制作で知っておきたいセキュリティの入口を学びます。
セキュリティは専門性の高い分野ですが、Web制作でも最低限気をつけるべきことがあります。
ここでは、危ない実装に気づけること、専門家やサーバー担当者に相談すべき場面を判断できることを目指します。
HTTPSを使う理由
HTTPSは、ブラウザとサーバーの通信を暗号化する仕組みです。
お問い合わせフォームやログインがあるサイトでは、入力内容を安全に送るためにHTTPSが必要です。
現在では、フォームがないサイトでもHTTPSが基本です。
HTTPSになっていないサイトは、ブラウザで警告が出たり、ユーザーに不安を与えたりします。
mixed content
HTTPSのページ内でHTTPの画像、CSS、JavaScriptなどを読み込むと、mixed contentになることがあります。
<script src="http://example.com/script.js"></script>HTTPSのページでは、読み込む外部ファイルもHTTPSにそろえます。
mixed contentがあると、ブラウザにブロックされ、画像やスクリプトが動かないことがあります。
フォームで個人情報を扱う時
お問い合わせフォームでは、名前、メールアドレス、電話番号、相談内容などの個人情報を扱うことがあります。
Web制作では、次の点に注意します。
- HTTPSで送信する
- 必要以上の個人情報を入力させない
- 送信先や保存先を確認する
- 自動返信メールに個人情報を入れすぎない
- 管理画面や通知先の権限に注意する
フォームは見た目だけでなく、情報の扱いにも責任が関わります。
フロントエンドに秘密情報を置かない
HTML、CSS、JavaScriptは、基本的にブラウザから見えるものです。
そのため、秘密にしたい情報をフロントエンドに置いてはいけません。
避けるべき例:
const apiSecret = "secret_123456";このような値は、ブラウザのDevToolsやソースコードから見えてしまいます。
APIキー、パスワード、管理用トークンなどは、フロントエンドに直接書かないようにします。
APIキーの扱い
APIキーには、公開してよいものと、絶対に公開してはいけないものがあります。
たとえば、地図サービスやフォームサービスのキーでも、制限設定が必要な場合があります。
Web制作でAPIキーを扱う時は、次の点を確認します。
- ブラウザに見えてよいキーか
- ドメイン制限ができるか
- 利用量の制限があるか
- 課金が発生する可能性があるか
- 管理者が誰か
判断に迷う場合は、公式ドキュメントや担当者に確認します。
Cookieのざっくり理解
Cookieは、ブラウザに保存される小さな情報です。
ログイン状態、カート情報、アクセス解析、広告計測などに使われることがあります。
Web制作では、Cookieを使うサービスを導入する時に、プライバシーや同意表示が関係することがあります。
Cookieの詳細な仕様をすべて覚える必要はありませんが、ユーザーのブラウザに情報を保存する仕組みであることは理解しておきます。
localStorageのざっくり理解
localStorageは、ブラウザにデータを保存する仕組みです。
JavaScriptから使えます。
localStorage.setItem("theme", "dark");便利ですが、localStorageに秘密情報を保存してはいけません。
ブラウザからアクセスできるため、機密性の高い情報には向きません。
同一オリジンポリシー
同一オリジンポリシーは、別のサイトの情報を勝手に読み取れないようにするブラウザの安全機能です。
オリジンは、プロトコル、ドメイン、ポートの組み合わせです。
https://example.com
https://api.example.com
http://example.com似ているURLでも、オリジンが違えば別の場所として扱われます。
CORSの入口
CORSは、別オリジンへのリクエストを許可するための仕組みです。
Web制作では、JavaScriptから外部APIを呼び出した時にCORSエラーを見ることがあります。
CORSエラーは、フロントエンド側のコードだけで解決できないことがあります。
サーバー側で許可設定が必要な場合があるため、API提供元やサーバー担当者に確認します。
外部スクリプトを読み込む時の注意
Web制作では、外部のJavaScriptを読み込むことがあります。
たとえば、スライダー、アニメーション、フォーム、チャット、アクセス解析などです。
外部スクリプトを読み込む時は、次の点に注意します。
- 信頼できる提供元か
- 読み込みすぎて表示速度が落ちないか
- 個人情報を送信していないか
- 利用規約に問題がないか
- サイトの表示や操作を壊さないか
外部スクリプトは便利ですが、サイトの安全性や速度に影響します。
この章のまとめ
- Web制作でもHTTPSは基本
- HTTPSページ内でHTTPのファイルを読むとmixed contentになることがある
- フォームでは、個人情報の送信先や保存先に注意する
- APIキーや秘密情報をフロントエンドに直接書かない
- CookieやlocalStorageはブラウザに情報を保存する仕組み
- CORSエラーはサーバー側の許可設定が関係することがある
- 外部スクリプトは、信頼性、速度、個人情報の扱いを確認する