RAGを用いたチャットボット開発講座第9章9.1節「RAG機能のセキュリティ対策とチャット形式のUIを作成する方法」

現在の見出し:9.1節：RAG機能のセキュリティ対策とチャット形式のUIを作成する方法

【PR】『Python』を学べる企業・個人向けのプログラミングコース

本節の概要

本節では、これまでに作成したチャットボットのセキュリティ面と、UIUIはユーザーがデバイスやアプリケーションを操作するための画面やボタン、メニューなどインターフェース全般のことです。面の改善方法について解説します。現在のセキュリティ面とUI面の課題は以下の通りです。

セキュリティの課題

フロントエンドフロントエンドはWebサイトやアプリのユーザーが直接操作する部分です。（ブラウザブラウザはインターネット上の情報を閲覧するためのソフトウェアです。）から直接ragchatのinit関数関数は一定の処理をまとめたプログラムの塊です。を叩かれる可能性がある
XSSの脆弱性：チャット欄に悪意あるHTMLHTMLはWebページを作成するためのマークアップ言語です。やスクリプトが含まれていた場合、それがブラウザ上で実行されてしまう危険性がある。
誰でも利用できてしまう状態

UIの課題

履歴が上書きされてしまう（過去のチャット内容が見えない）
時系列がわからない
ボタンクリックのみ（Enter送信なし）
送信中のボタン無効化はなし（多重送信の恐れ）

本節では上記の課題を解決する方法について解説します。

フロントと関数の間に中間の関数を導入する

現在の構造だと、フロントから直接ragchatフォルダの「__init.py__」ファイルに書かれている関数へエンドポイントを通してアクセスできる状況です。この問題を解決するために、以下の施策を実施します。

ragchat関数の前に「proxychat」関数を挟んで関数エンドポイントを隠す
ragchatにFunction Keyを必須化する

各内容について詳しく解説します

「proxychat」関数を作成する

はじめに、GitHubでAzureとデプロイデプロイは開発したアプリケーションやWebサイトを実際に稼働させることです。したプロジェクトプロジェクトは特定の目的や目標を達成するために行われる一連の開発作業です。フォルダを開き「Add file」→「Create new file」の順でクリックします。

左上の空欄に「proxychat/__init__.py」と入力します。すると上記のように指定したフォルダとファイルが作成されます。

「__init__.py」ファイルに以下のコードを入力してください。

import azure.functions as func
import os, json, requests

def main(req: func.HttpRequest) -> func.HttpResponse:
    try:
        body = req.get_json()
        question = body.get("question")
        if not question:
            return func.HttpResponse(json.dumps({"error":"質問が空です"}), status_code=400, mimetype="application/json")

        rag_url = os.environ["RAGCHAT_URL"]         
        rag_code = os.environ.get("RAGCHAT_CODE","")
        url = f"{rag_url}?code={rag_code}" if rag_code else rag_url

        resp = requests.post(url, json={"question": question}, timeout=30)
        return func.HttpResponse(resp.text, status_code=resp.status_code, mimetype="application/json")

    except Exception as e:
        return func.HttpResponse(json.dumps({"error": str(e)}), status_code=500, mimetype="application/json")

続いて先ほど作成した「proxychat」フォルダ内で「Create new file」をクリックし、今度は「function.json」フォルダを作成して以下のコードを入力します。

{
    "bindings": [
      { "authLevel": "anonymous", "type": "httpTrigger", "direction": "in", "name": "req", "methods": ["post"], "route": "proxychat" },
      { "type": "http", "direction": "out", "name": "$return" }
    ]
  }

これでファイル構成は完了です。

最後に、フロントの以下部分を修正します。

const response = await fetch("proxychatの関数エンドポイント", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ question: question })
});

これでproxychatからragchatへのアクセスが実現できます。