「作りたいWebページのイメージを言葉で伝えるだけで、AIがコードを自動で生成してくれる」 そんな夢のようなツールが次々と登場し、Web制作は専門家だけのものではない、新しい時代に突入しました。特に、プログラミングが苦手な方にとって、これはまさに「AIでなんでも解決できるぜー」のように感じられるかもしれません。
しかし、その手軽さの裏に潜むリスクについて、私たちは少しだけ慎重になる必要があります。 AIが生成したコードを、中身をよく確認せずにそのままコピー&ペーストしてしまう…そのワンクリックが、思わぬトラブルの引き金になる可能性があります。
HTMLではありませんが、いまAIを使った事件も少しずつでてます。こちらを見てください。 AI任せは危険?数ヶ月で1万件個人情報漏洩発見の事例と、海外アプリで写真59GB流出事例から学ぶ、バイブコーディング危険性について
今回は、AIが生成したHTMLコードなどを安全に活用するために、誰でも実践できる「6つの安全確認チェックリスト」をご紹介します。さらに、この記事で紹介するチェック作業をAIに依頼できる、便利な参考プロンプトも作成しましたので、ぜひあわせてご活用ください。
このコラムでは、これでセキュリティが万全というものでもなく、いかなる時でも、セキュリティを考えることは必須だという意味で書いてます。
見た目は綺麗でも危険?HTMLに潜む「見えない罠」
HTMLコードのリスクと聞くと、多くの方が<script>
というタグを思い浮かべるかもしれません。
確かに、これは悪意のあるプログラムを直接実行させるための代表的なタグです。
しかし、攻撃者はもっと巧妙な手口を使います。例えば、
- 一見普通のボタンなのに、クリックすると個人情報を盗むプログラムが動く(イベントハンドラ)
- 見た目は社内向けのログイン画面そっくりで、入力したIDとパスワードが攻撃者に送信されてしまう(偽フォーム)
- ページの一部に、ウイルスを仕込んだ別のサイトが埋め込まれている(iframe)
このように、<script>
タグが一つもなくても、HTMLの仕組みを悪用すれば、様々な罠を仕掛けることができてしまうのです。だからこそ、コードを「使う側」が、最低限の安全確認を行う知識を持つことが不可欠になります。
自分でできる!HTMLコード安全利用チェックリスト
そこで活用していただきたいのが、このチェックリストです。目的は「デザインされた見た目を安全に表示すること」。
動的な機能が不要な静的なページでコードを利用する前に、ぜひ一度立ち止まって確認してみてください。
【最重要】はじめに
- このチェックリストは、あくまで簡易的な安全確認です。セキュリティを100%保証するものではありません。
- コードを貼り付ける前に、必ず元のページのバックアップを取ってください。
- チェック項目で一つでも「いいえ」があったり、内容がよく分からなかったりした場合は、そのコードの使用を中止し、専門家に相談してください。
チェック項目 | チェック内容 | なぜチェックするの?(危険性) | はい/いいえ |
1. <script> タグはありますか? | コード全体に <script> という文字がないか確認します。 | 最も直接的に、ウイルスのような悪意のあるプログラムを実行させるためのタグです。 | □ はい □ いいえ |
2. 「on」で始まる属性はありますか? | onclick= や onmouseover= など、「on 」から始まる属性がないか確認します。 | ボタンのクリックなどをきっかけに、隠されたプログラムが動く危険があります。 | □ はい □ いいえ |
3. リンク先に「javascript:」はありますか? | <a> タグのリンク先(href= )に javascript: という文字列がないか確認します。 | リンクをクリックしただけで、プログラムが実行されてしまう危険があります。 | □ はい □ いいえ |
4. 意図しないフォームはありますか? | <form> というタグがないか確認します。 | 入力した情報(個人情報やパスワード)が見知らぬ場所に送信される危険があります。<br>※静的表示が目的なら、<form> から</form> までを丸ごと削除するのが最も安全です。 | □ はい □ いいえ |
5. 意図しない埋め込みはありますか? | <iframe> や <object> , <embed> というタグがないか確認します。 | ページ内に、偽サイトなど見知らぬ危険なコンテンツが埋め込まれる危険があります。<br>※静的表示が目的なら、これらもタグごと削除するのが安全です。 | □ はい □ いいえ |
6. 外部ファイルの読み込み先は信頼できますか? | <img> タグのsrc= や<link> タグのhref= に、知らないWebサイトのURLが含まれていないか確認します。 | 意図しない画像が表示されたり、ごく稀に脆弱性の原因となったりします。 | □ はい □ いいえ |
【判定】 もし、すべてのチェック項目が「いいえ」であれば、静的な表示に使う上での大きなリスクは取り除かれていると考えてよいでしょう。一つでも「はい」があったり、判断に迷ったりした場合は、そのコードの利用は考え直していきましょう。
(参考)プロンプト
とはいえ、コード初めての人におすすめなのは、コードごとプロンプトで把握すれば、いいと思います。
以下簡単にコピーぺしていきましょう。
プロンプトの使い方
- 以下の「ここからコピー」から「ここまでコピー」までをすべてコピーします。
- ChatGPTなどのAIチャット画面に貼り付けます。
- プロンプトの最後にある「ここにチェックしたいHTMLコードを貼り付けてください。」の部分を、あなたが実際に確認したいHTMLコードに書き換えます。
- 送信すると、AIが分析結果をレポート形式で出力します。
【コピーして使う】HTMLセキュリティチェック用プロンプト
ここからコピー ↓ あなたは、Webセキュリティの専門家です。特に、HTMLコードに潜むクロスサイトスクリプティング(XSS)や情報漏洩のリスクを検出する能力に長けています。
これから私が提供するHTMLコードを分析し、以下の6つのセキュリティチェックリストに基づいて、安全性を評価してください。このコードは、主にWebページのデザインを静的に表示するために使用されることを想定しており、JavaScriptなどの動的な機能は不要という前提で評価をお願いします。
セキュリティチェックリスト
<script>
タグの存在: コード内に<script>
タグが含まれていないか。- 「on」で始まる属性の存在:
onclick
やonmouseover
など、on
から始まるイベントハンドラ属性が含まれていないか。 - リンク先の「javascript:」:
<a>
タグのhref
属性にjavascript:
スキームが使用されていないか。 - フォームの存在:
<form>
タグが含まれていないか。含まれている場合、action
属性の送信先はどこか。 - 埋め込みコンテンツの存在:
<iframe>
,<object>
,<embed>
タグが含まれていないか。 - 外部ファイルの読み込み先:
<img>
タグのsrc
属性や<link>
タグのhref
属性で、意図しない、または信頼性の低い外部ドメインのファイルを読み込んでいないか。
出力形式
分析結果を以下の形式で厳密に報告してください。
HTMLコード セキュリティチェック結果
1. チェック結果サマリー
- 項目1.
<script>
タグ: [OK] または [警告] - 項目2. 「on」で始まる属性: [OK] または [警告]
- 項目3. リンク先の「javascript:」: [OK] または [警告]
- 項目4. フォーム: [OK] または [警告]
- 項目5. 埋め込みコンテンツ: [OK] または [警告]
- 項目6. 外部ファイルの読み込み先: [OK] または [警告]
2. 検出されたリスクの詳細 (警告があった項目について、該当するコードの箇所と、なぜそれがリスクとなり得るのかを具体的に説明してください。リスクがなければ「特に検出されたリスクはありません。」と記述してください。)
3. 総合評価 ([安全性が高い] [注意が必要] [使用非推奨] の3段階で評価し、その理由を簡潔に述べてください。)
4. 【重要】注意事項 (最後に、この分析はAIによる簡易的なものであり、セキュリティを100%保証するものではないこと、特に外部ドメインの信頼性評価などAIには判断できない領域があること、最終的な判断と責任は使用者が負うべきであることを必ず明記してください。)
それでは、以下のHTMLコードを分析してください。
HTML
ここにチェックしたいHTMLコードを貼り付けてください。
↑ ここまでコピー
ツールを「思考停止」の道具にしないために
AIによる業務の自動化は、私たちの働き方を劇的に変えますよね。AppTalentHubの業務はすべてAI無しでは無理です。
ただし、思考停止に陥るのは問題です。考えないDXというチャンネルは運用してますが(笑)、要所要所では、考える必要があるよねということで作ってます。
便利なツールを正しく理解し、賢く、そして何よりも「安全に」使いこなす。
そのために、今回ご紹介したチェックリストが、皆さまのビジネスを守るためのひとつのきっかけになれば幸いです。
サイトの運営は、一度作って終わりではありません。コードやプラグインのアップデートといった日々のメンテナンスと同様に、こうしたセキュリティへの意識も、これからの時代のIT担当者にとって不可欠なスキルと言えるでしょう。