Protecting and Hiding your Bing Maps Key

Introduction

When utilizing Bing Maps for Enterprise in your answer/utility, you want a Fundamental Key (restricted free trial) or an Enterprise key to make use of the providers. For instance, you’d add a Bing Maps Key to the script URL loading the Bing Maps Internet Management like this:

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

Now your secret is open textual content in your web site supply code and individuals who look can discover and use your key. Engines like google will index your web page and, consequently, will even retailer your key. Is that this an issue? Probably not.

Defending

The Bing Maps secret is primarily used to find out the utilization and permit entry to Bing Maps options. To guard your Bing Maps key, so it might probably’t be misused on different web sites, there may be an possibility within the Bing Maps Dev Center to guard your key. This safety possibility means that you can specify a listing of referrers (web site URLs) and IP numbers who can use your key. When at the very least one referrer rule is lively, any requests that omit a referrer and any requests from non-approved referrers shall be blocked, stopping others from utilizing your key for requests. You may have as much as 300 referrer and IP safety guidelines per key.

Your secret is now protected however continues to be seen in your web site code. So how do I conceal my Bing Maps key?

A greatest apply is by no means to retailer any keys or certificates in supply code.

Hiding

To cover the Bing Maps key, you create a easy API endpoint that can solely return the Bing Maps key if the request comes from a trusted referral URL. The Bing Maps Samples web site is an efficient instance that makes use of this method.

On this instance we’re utilizing an Nameless HttpTrigger Azure Function written in C# that returns the Bing Maps key:

public static class GetBingMapsKey
{
    personal 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 consequence = Array.Discover(allowd, web site => referer.StartsWith(web site, StringComparison.OrdinalIgnoreCase));
        if (string.IsNullOrEmpty(consequence))
            return new UnauthorizedResult();

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

        return new OkObjectResult(key);
    }
}

The Bing Maps secret is saved server-side on this Azure Perform Utility settings subject. We’re utilizing the GetEnvironmentVariable() to get the important thing.

Subsequent, we have to load the Bing Maps script and get the important thing from the API client-side. Lastly, we use the next code snippet to load Bing Maps dynamically:

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

The browser will run this code and create at runtime within the DOM the identical line of <script> tag now we have seen at the start of this weblog publish to load Bing Maps and the Key. A further benefit is that the Bing Maps key will not be saved within the supply code anymore and that you should utilize IaC and construct pipelines to deploy the answer.

Observe: Solely hiding the Bing Maps key alone will not be sufficient as a safety measure. We suggest you continue to allow the safety possibility within the Bing Maps Dev Middle!