トラブルシュート

リンク先が別ドメインに飛ぶ問題をAI生成HTMLで防ぐプロンプト

ChatGPTやClaudeにHTMLを生成させると、デモ用の外部URLやサードパーティフォームの`action`属性がそのまま含まれることがあります。プロンプトに数行の制約を加えるだけで、生成段階から外部リンクを排除でき、共有後の「別ドメインに飛ぶ」トラブルを大幅に減らせます。

よくある原因

AIモデルは学習データに含まれる外部サービスのURL(FormspreeやNetlify Formsなど)をそのままコードに埋め込むことがあります。ユーザーが「フォームを作って」とだけ指示すると、送信先として外部エンドポイントを使ったサンプルが生成されやすいです。

リンクテキストに「詳細はこちら」と書かれていても、`href`の値がAIの記憶から引き出した実在するブログ記事のURLになっている場合があります。これは特定のドキュメントやチュートリアルを参照しながら生成したときに起きやすく、共有相手が無関係な外部サイトへ誘導される原因になります。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

生成されたHTMLを受け取ったら、まずコードブロックをそのままコピーしてVSCodeに貼り付け、`Ctrl+F`で`http`を検索します。ヒット件数が0でも`//`始まりのプロトコル相対URLが含まれている場合があるため、`//`も別途検索してください。

フォームがある場合は`<form`タグを検索し、`action`属性の値を確認します。`action=""`か`action="#"`であれば外部送信は発生しません。`method="POST"`で外部URLが指定されている場合は`onsubmit="event.preventDefault();"`を追加してデモ用に無効化します。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

相手がAI生成HTMLのレビューをしている段階で「このボタンを押すと別のサイトに飛ぶ」と報告してきたら、クリックしたリンクのhref属性値をDevToolsで確認してもらいます。スマホのSafariなら長押しして「リンクのURLをコピー」で取得できます。

相手が非エンジニアの場合、「Chromeでページを開き、Ctrl+Uでソースを表示して、Ctrl+Fでhttpと検索した結果を画面共有してもらえますか」と依頼すると、こちらで原因箇所を直接特定できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

AIへのプロンプトに必ず以下の制約を含めるよう、コピペ用テンプレートとして保存しておきます。「外部ドメインへのリンクは一切使わないこと。`<a>`のhrefは`#`または相対パスのみ。`<form>`のactionは空にしてsubmitはJavaScriptで制御すること。CDNのscriptタグは使わずすべてインラインで記述すること。」

生成後は専用の検証コマンドを毎回実行します。`grep -cE 'href="https?://|action="https?://' output.html`の出力が0であることを確認してからアップロードするルールにすると、プロンプトを忘れた際のセーフネットになります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

プロンプトで制約を書いてもAIが無視することはありますか?

長いプロンプトでは後半の指示が省略されることがあります。制約はプロンプトの先頭か、「# 制約」見出しで目立たせると遵守率が上がります。生成後の`grep`確認は必ず行ってください。

CDNのBootstrapを使いたいのに外部リンク禁止にするとスタイルが崩れますか?

CDNのCSSは読み込みに問題ありませんが、BootstrapのCSSをインライン化する方法もあります。「Bootstrap CSSをHTMLの`<style>`タグ内にインラインで含めてください」とAIに指示すると単一ファイルで完結します。

生成されたHTMLのフォームがsubmitを無効化していても、入力データはどこかに送られていますか?

`event.preventDefault()`だけなら送信は完全にキャンセルされます。ただし外部の`<script>`タグが残っている場合、そのスクリプトが独自にXHRやfetchで送信する可能性があるため、外部スクリプトの除去も併せて行ってください。

関連記事

トラブルシュート

リンク先が別ドメインに飛ぶときの原因と直し方

WebデザイナーやノーコードユーザーがAI生成HTMLを共有したとき、リンクが別ドメインに飛ぶ原因を原因別に解説。ソース確認から修正・再公開までの手順を具体的にまとめます。

4分で読める
トラブルシュート

外部API呼び出しがCORSで失敗するときの原因と直し方

外部APIへのfetchがCORSエラーで弾かれて困っている開発者・制作者向け。ブラウザ側とサーバー側それぞれの原因と、プリフライトリクエストの仕組みを踏まえた具体的な修正手順を解説します。

5分で読める
「トラブルシュート」の記事をもっと見る →