あなたのビングマップキーを保護して、隠すこと

導入

使用する場合Bing Maps for Enterprise あなたのソリューション/アプリケーションでは、基本的なキー(制限無料トライアル)またはサービスを使用するエンタープライズキーが必要です.たとえば、Bing MapsキーをスクリプトURLに追加すると、次のようにBing Maps Webコントロールを読み込みます.

<script src="https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={your bing maps key}"></script>

現在、あなたのキーはあなたのサイトソースコードとあなたのキーを見つけることができて、使う人々の上で開いたテキストです.検索エンジンはあなたのページをインデックスし、結果として、あなたのキーを格納します.これは問題ですか.ではなく.

保護

ビングマップキーは主に使用を決定し、ビンビンマップ機能へのアクセスを許可するために使用されます.あなたのビングマップのキーを保護するため、それは他のウェブサイト上で誤用することはできませんので、オプションがありますBing Maps Dev Center キーを保護する.このセキュリティオプションを使用すると、あなたのキーを使用することができますレファレンス(ウェブサイトURL)とIP番号のリストを指定することができます.少なくとも1つの照会規則がアクティブになっているときは、照会を省略したリクエストと、承認されていないレフリーからのリクエストがブロックされ、リクエストのキーを使用するのを防ぎます.あなたは、キーにつき最高300の照会者とIPセキュリティ規則を持つことができます.

あなたのキーは保護されているが、まだあなたのウェブサイトのコードで表示されます.それで、どのように私は私のビングマップキーを隠しますか?

A best practice is never to store any keys or certificates in source code.

ハイディング

ビングマップキーを非表示にするには、単純なAPIエンドポイントを作成します.The Bing Maps Samples サイトはこのアプローチを使用する良い例です.
この例では、匿名のhttptriggerAzure Function ビンマップキーを返します.

public static class GetBingMapsKey
{
    private static readonly string[] allowd = { "https://samples.bingmapsportal.com/",
                                                "http://localhost"};

    [FunctionName("GetBingMapsKey")]
    public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req)
    {
        string referer = req.Headers["Referer"];
        if (string.IsNullOrEmpty(referer))
            return new UnauthorizedResult();

        string result = Array.Find(allowd, site => referer.StartsWith(site, StringComparison.OrdinalIgnoreCase));
        if (string.IsNullOrEmpty(result))
            return new UnauthorizedResult();

        // Get your Bing Maps key from https://www.bingmapsportal.com/
        string key = Environment.GetEnvironmentVariable("BING_MAPS_SUBSCRIPTION_KEY");

        return new OkObjectResult(key);
    }
}

このAzure関数アプリケーション設定フィールドのBing Mapキーがサーバー側に格納されます.私たちはGetEnvironmentVariable() 鍵を得る.

次に、Bing Mapsスクリプトを読み込み、APIクライアント側からキーを取得する必要があります.最後に、次のコードスニペットを使用して、Bingマップを動的にロードします.

<script>
    // Dynamic load the Bing Maps Key and Script
    // Get your own Bing Maps key at https://www.microsoft.com/maps
    (async () => {
        let script = document.createElement("script");
        let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
        script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
        document.body.appendChild(script);
    })();
</script>

ブラウザはこのコードを実行し、実行時にDOMで同じ行を作成します<script> 私たちはビンビンマップとキーをロードするには、このブログ記事の冒頭に見たタグ.追加の利点は、ビングマップキーがソースコードにもう格納されていないと、あなたが使用できることですIaC ソリューションを展開するパイプラインをビルドします.

Note: Only hiding the Bing Maps key alone is not enough as a security measure. We recommend you still enable the security option in the Bing Maps Dev Center!