フレーム分割する場合のセキュリティについて考える　～セキュリティ研究室～: ゼロからはじめるシステム開発

<< 2024年04月 >>
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

2023年09月27日

フレーム分割する場合のセキュリティについて考える　～セキュリティ研究室～

　こんにちは！
　ナビゲータのEVEです。

　現在、中小企業診断士の勉強が軌道にのらないため、そちらを優先的にやっています。そんな中小企業診断士の勉強ですが、今週中には軌道にのせる予定で、プログラム開発は、その軌道にのった後、ということは来週から再開します。

[画面分割]
　現在中止中のプログラム開発ですが、1つ決めたことがあります。それは、管理者画面については、EVEシステムもPrototype EVE同様3画面のフレーム分割で製造することにしました。ただ、従来、Prototype EVEでは、FRAMEタグを利用していたのですが、現在は非推奨です。セキュリティ的に問題があるというのです。そこで、後継のタグとして推奨されているのが、IFRAMEタグ・・・。ただ、IFRAMEタグを利用すれば、すぐにセキュリティが得られるかというとそういう分けではなく、実装すべき機能があります。

[IFRAMEのセキュリティ]
　それでは、どんなセキュリティがあるのでしょうか？どんなセキュリティがあるのか、ChatGPTに聞いてみました。

　iframeのセキュリティを向上させるためには、以下の方法やベストプラクティスを考慮することが重要です。

❶X-Frame-Options ヘッダーの使用
　サーバーサイドで X-Frame-Options ヘッダーを設定することで、特定のドメインからのiframe埋め込みを制限できます。DENY オプションは、すべてのドメインからのiframeを拒否し、SAMEORIGIN オプションは同一オリジンのみを許可します。

X-Frame-Options: SAMEORIGIN(DENY)

❷Content Security Policy (CSP)
　CSPを使用して、どのドメインからのコンテンツを読み込むことが許可されているかを指定できます。これにより、不正な埋め込みやスクリプトの実行を防ぐことができます。

Content-Security-Policy: frame-ancestors 'self' example.com

❸iframeの属性を検討:
　sandbox 属性を使用して、iframe内で実行できる操作を制限できます。また、allow-scripts や allow-same-origin などの属性を使用して、特定の動作を許可または制限できます。

❹セキュアな通信
　iframe内のコンテンツを提供する際、HTTPSを使用して通信を暗号化しましょう。これにより、データの盗聴や改ざんを防ぎます。
❺クリックジャッキング対策
　クリックジャッキング攻撃を防ぐために、iframeに不透明な要素を重ねて表示させ、ユーザーが誤ってクリックできないようにすることを検討してください。
❻フレーム内コンテンツの信頼性確保
　iframe内で表示するコンテンツは信頼性のあるソースから提供されるべきです。信頼性のないコンテンツをiframeに埋め込むことはセキュリティリスクとなります。
❼セキュリティアップデート
　使用しているブラウジングコンポーネントやフレームワークについて、最新のセキュリティアップデートを確認し、適用することが重要です。

　これらの方法を組み合わせて、iframeのセキュリティを強化できます。セキュリティに関する最新のベストプラクティスやセキュリティアップデートを追跡し、常に最良のセキュリティプラクティスを採用することが重要です。

[実装の検討]
　❶から順をおって見てみましょう！
　❶は、情報処理安全確保支援士の試験では、クリックジャッキング攻撃の問題でよく見る防御方法です。実は、情報処理安全確保支援士のテキストには、以下の内容で書かれています。

DENYオプション：すべてのドメインからのiframeを拒否
SAMEORIGIN オプション：同一オリジンのみを許可
ALLOW-FROM uri：ページは指定されたオリジンuriのフレーム内でのみ表示

私が以前勉強したときは、ALLOW-FROMがあったのですが、現在これは廃止され、新しいバージョンのブラウザはサポートもしていないそうです。そのため、ChatGPTは、ALLOW-FROMはないと断言しています。現在からセキュリティを勉強する人は、DENYとSAMEORIGINを知っていれば問題ないでしょう！
　そんな、X-Frame-Optionsについて、情報処理安全確保支援士のテキストでは、具体的な設定方法は記述していません。では、どのように設定したらいいのか、ChatGPTに聞いたところ、以下のような回答がありました。設定箇所は、HTMLソースではなく、apache.conf、httpd.confまたは.htaccessに設定します。
　記述方式は、下記の通りとなります。


<VirtualHost *:80>
    # 他の設定...

    Header always append X-Frame-Options SAMEORIGIN(DENY)
</VirtualHost>

　ここまで分かれば、すぐにでも設定できそうです。ただ、気を付ける点は、Apacheを再起動しないと設定が有効になりません。本番機などに設定する場合、お客様のことを考え再起動を後回しにしてしまうということが考えられます。再起動を忘れないでください。

　続きまして、❷のContent Security Policy (CSP)なのですが、どのように設定したらいいでしょうか？実は、この設定方法初めて見ます。
　ChatGPTに聞いたところ、設定箇所は、X-Frame-Options同様に、apache.conf、httpd.confまたは.htaccessに設定します。
　記述方式は、下記の通りとなります。


<VirtualHost *:80>
 # 他の設定...

    Header always set Content-Security-Policy "frame-ancestors 'self' example.com"
</VirtualHost>

この設定も、記述したからすぐに有効になるのではなく、Apacheを再起動しないと有効になりません。本番機に設定する方は気を付けてください。

　つづきまして、❸なのですが、これは、htmlのソースに記述します。これも実は初めて見る記述です。記述は、上記の通りなのですが、これ以外にもスペースで区切ることによりいろいろな設定ができるようです。以下に一覧で記述します。

■allow-scripts
　allow-scripts を設定すると、iframe内でスクリプトが実行できるようになります。これにより、JavaScriptコードがiframe内で実行できます。
　ただし、外部のJavaScriptリソース（外部スクリプトファイル）の読み込みは無効になり、iframe内でのJavaScriptは同じオリジン内のリソースに制限されます。
　この設定を使用する場合、注意が必要で、信頼できないサイトからのiframeを許可しないようにすることが重要です。外部のスクリプトがiframe内で実行できると、セキュリティリスクが高まります。
■allow-same-origin
　allow-same-origin を設定すると、iframe内のコンテンツは同じオリジン（同じドメインとプロトコル）からのみアクセスできます。他のオリジンからのアクセスはブロックされます。
　この設定は、iframe内のコンテンツが親ウィンドウと同じオリジンであることを確実にするために使用されます。これにより、同一オリジンポリシー（Same-Origin Policy）によるセキュリティ制約が強化され、外部からのアクセスや攻撃を防ぎます。
　ただし、同一オリジン内であっても、allow-same-origin を設定することで、iframe内のコンテンツは親ウィンドウ内のコンテキストと同じように操作できます。注意が必要です。
　これらの属性を組み合わせて使用することで、iframe内のコンテンツのスクリプト実行を制御し、同一オリジンポリシーに従ったセキュリティを強化できます。ただし、これらの属性を使用する際には、セキュリティ上のリスクに対する十分な注意が必要です。
■allow-forms
　埋め込まれた文書からのフォーム送信を有効にします。
■allow-modals
　埋め込まれた文書からモーダルウィンドウを開くことを可能にします。
■allow-orientation-lock
　埋め込まれた文書が、スクリーンの方向をロック可能にします。
■allow-pointer-lock
　埋め込まれた文書が Pointer Lock API を使用可能にします。
■allow-popups
　埋め込まれた文書からのポップアップを有効にします。
■allow-popups-to-escape-sandbox
　sandbox 属性が付与された文書が、新しいウィンドウを開いた時、サンドボックスが継承されないようにします。
■allow-presentation
　埋め込まれた文書がプレゼンテーションセッションを開始できるようにします。
■allow-top-navigation
　埋め込まれた文書から別のブラウジング・コンテキストを指しているリンクを有効にします。
■allow-top-navigation-by-user-activation
　埋め込まれた文書が最上位のブラウジング・コンテキストに移動できるようにします。ただし、ユーザーの操作によって開始されたものに限ります。
■allow-downloads-without-user-activation
　　ユーザーによる操作のないダウンロードを許可

以上です。
　セキュリティだけのことを、考えた場合、allow-same-originの設定は必須で、それ以外は任意に設定することになりそうです。
　なお、allow-scripts、allow-same-originはChatGPTから、allow-downloads-without-user-activationは、Qiita引用させて戴せていますが、それ以外については、W3 Watch Referenceからの引用となります。

　❹のセキュアな通信については、2つの考え方があります。

①セキュア属性を指定する
②通信時にhttpsを強制する

　①については、情報処理安全確保支援士のテキストに記述がありますが、具体的な設定方法がありません。また、ChatGPTに聞いてみましょう。
　設定の方法は、クライアントとサーバーサイト両方またはいずれかで設定します。クライアントは、JavaScriptを使用する方法で、サーバーは、サーバーサイトプログラムを利用する方法です。当サイトでは、PHPを利用していますので、サーバーサイトプログラムについては、PHPについてChatGPTに聞いてみました。
　以下は、JavaScriptでセキュア属性を付けた場合のプログラムです。


<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptでCookieを設定</title>
</head>
<body>
    <script>
        // Cookieを設定するJavaScriptコード
        document.cookie = "mycookie=myvalue; secure";
    </script>
</body>
</html>

　以上のやり方は、ページ読みこみ時にセキュア属性が設定されます。なお、これ以外の方法もありますが、このブログでは割愛させて頂きます。
　続きましては、PHPでセキュア属性を実現する方法です。

<?php
// セキュアなCookieを設定する
setcookie("mycookie", "myvalue", 0, "/", "", true, true);
?>

　なお、以上の設定は、http通信とhttps通信が混在しているサイトで有効です。そのため、以上の設定をする場合、クッキーIDと値をクライアント、サーバーサイトで設定する必要があります。
　調べて初めて分かりましたが、暗号化されているとはいえ、クッキーIDと値が固定になる、または、知られるのはセキュリティ的に問題があると考えます。できれば、HSTS (HTTP Strict Transport Security) を利用したほうがいいようです。
　続きまして、HTTPSを強制する方法です。この方法は、Apache、サーバーサイトアプリケーション(当サイトではPHP)両方で設定する必要があるようです。以下は、Apacheのapache.confまたはhttpd.confへ記述した場合の例となります。


<VirtualHost *:80>
    # 他の設定...

    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</VirtualHost>

　続きまして、サーバーサイトプロログラム、PHPへの記述です。多分フレームワークから製造した場合、各プログラムで必ず読み込まなければいけないプログラムはありませんか？もしありましたら、同プログラムに記述し実行してください。


<?php
// 現在のプロトコルがHTTPSでない場合、HTTPSにリダイレクト
if ($_SERVER['HTTPS'] !== 'on') {
    $redirect_url = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    header("Location: $redirect_url");
    exit();
}
?>

　❺のクリックジャッキングへの対策ですが、ここに書かれている内容そのものがクリックジャッキングです。ようは、やられる前にやれということでしょうか？これについては、設定方法が思い浮かばないので、宿題とさせていただきます。
　❻については、❶～❹の設定することにより、信頼できるサイト、または信頼できるコンテンツが指定することができるので、あえて改めて何かする必要はないと思われます。
　❼は、定期的に気をつけた方がいいですね？どんなソフトを使っているのか把握し、そして、同ソフトの更新の有無を定期的に確認するという作業が必要になります。

[あとがき]
　実は、調べる前、X-Frame-Options ヘッダーの使用ぐらいしか考えていなかったのですが、現在いろいろな方法があるのですね？情報処理安全確保支援士のテキストでは、X-Frame-Optionsヘッダーしか紹介されていません。これから、いろいろ新機能などを導入していきますが、まず最初にChatGPT様にお伺いを立ててからシステム開発するべきだということを強く感じました。
　以上の設定をすべて実行すれば、最高なセキュリティが得られるかもしれないと思った方がいるかもしれません。設定は、可能なようなのですが、注意が必要です。ChatGPTは以下のような注意を促しています。

　上記の❶から❹のセキュリティ設定を実施することは、ウェブサイトのセキュリティを向上させるために一般的な手順です。これらの設定はウェブアプリケーションやウェブサイトのセキュリティを強化し、特にクロスサイトスクリプティング（XSS）攻撃やクリックジャッキング攻撃などのセキュリティリスクに対処するのに役立ちます。
　ただし、これらのセキュリティ設定を適切に実装する際に注意すべき点がいくつかあります。

①設定のテスト
　セキュリティ設定を変更する前に、これらの変更がサイトの正常な動作に影響を及ぼさないかどうかをテストしてください。特に、CSP（Content Security Policy）の設定は、誤った設定がウェブサイトの機能に問題を引き起こす可能性があるため、注意が必要です。
②CORS (Cross-Origin Resource Sharing)
　 ❶と❷の設定によって、特定のドメインからのコンテンツ読み込みを制限することができます。ただし、必要な外部ドメインからのコンテンツを正しく許可するために、CORSポリシーを適切に設定する必要があります。
③HTTPSの適切な設定
　❹でセキュアな通信を強制する際には、ウェブサイト全体がHTTPSで提供されていることを確認してください。また、SSL/TLS証明書の適切な設定も行う必要があります。
④ブラウザ互換性
　各ブラウザがこれらのセキュリティヘッダーをサポートする方法や動作が異なることがあるため、互換性を確認してください。特に古いブラウザやバージョンが問題となる場合、適切なポリフィルやフォールバックオプションを検討することが重要です。

　以上の注意点を考慮し、適切なテストと監視を行いながら、これらのセキュリティ設定を実装することで、ウェブサイトのセキュリティを強化できます。セキュリティは継続的なプロセスであるため、定期的な評価とアップデートが不可欠です。

　新たに、CORSが出てきました。これを導入する目的を、詳しく解説すると以下の通りとなります。以下は、ChatGPTからの回答です。

　CORS（Cross-Origin Resource Sharing）は、ウェブアプリケーションにおいて、異なるオリジン（ドメイン、プロトコル、ポート番号の組み合わせ）からのリクエストに対するセキュリティ制御を提供する仕組みです。CORSを実装することで、以下のことが実現されます：

❶セキュリティ制御
　CORSは、クロスオリジンのリクエストを制御するためのセキュリティメカニズムです。同一オリジンのリクエストと比較して、クロスオリジンリクエストにはセキュリティ上のリスクが伴う可能性があります。CORSにより、不正なドメインからのリクエストを防ぎ、クロスオリジンのセキュリティを向上させることができます。
❷同一オリジンポリシーの緩和
　ウェブセキュリティの観点から、通常、異なるオリジンからのリクエストはブラウザによって制限されます。しかし、CORSを使用することで、特定のオリジンからのリクエストを許可し、同一オリジンポリシーを緩和できます。
❸クロスオリジンリクエストの許可
　クロスオリジンのリクエストを正当なものとして許可する場合、サーバーからのレスポンスヘッダーにCORSヘッダーを含めることで、ブラウザによってクロスオリジンリクエストが許可されます。これにより、異なるオリジンのウェブサイトからデータやリソースを取得することができます。
❹特定のオリジンの制限
　CORSを使用して、特定のオリジンからのリクエストを許可または制限できます。これにより、信頼性のあるオリジンのみがアクセスを許可され、他のオリジンからのアクセスを拒否することができます。
❺クロスオリジンスクリプトの実行制限
　クロスオリジンスクリプトの実行を制限できます。CORSポリシーに違反する場合、ブラウザはスクリプトの実行をブロックします。

　CORSは、ウェブアプリケーションのセキュリティを向上させ、クロスオリジンのリソース共有をコントロールするための重要なツールです。適切に構成されたCORSポリシーは、不正なリソースアクセスやクロスサイトスクリプティング（XSS）攻撃からウェブアプリケーションを守るのに役立ちます。

　どうも、これも設定しないといけないようです。
　具体的には、どうやって設定するのでしょうか？引き続きChatGPTに聞いてみました。設定場所は、apache.conf、httpd.confまたは.htaccessに設定します。なお、.htaccessへ設定する場合は、<IfModule mod_headers.c>は不要です。


<IfModule mod_headers.c>
    # クロスオリジンのリクエストを許可する
    Header set Access-Control-Allow-Origin "*"

    # 必要に応じて他のCORSヘッダーを設定する
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Credentials true
</IfModule>

　今回、長々と調べましたが、理由は、時間の節約です。今日は非常に時間が取られましたが、後日はこのサイトに書かれている情報を見るだけでpro2grammer.comのセキュリティを確保することが可能になります。
　現場にいる人もこのサイトを参考に、是非、ChatGPTを活用し、セキュリティの高いシステムを製造してください。

　では、また！

■sandbox 属性(W3 Watch Reference)
https://reference.hyper-text.org/html5/attribute/sandbox/

■【HTML】iframeのsandbox属性について(Qiita)
https://qiita.com/mzmz__02/items/f1187e86c175de5aec0b

タグ：iframeタグ sandbox X-Frame-Options CSP クリックジャッキング HSTS ChatGPT クロスサイトスクリプティング XSS CORS