Bing 지도 키 보호 및 숨기기

소개

솔루션/애플리케이션에서 Bing Maps for Enterprise를 사용하는 경우 서비스를 사용하려면 기본 키(제한된 무료 평가판) 또는 엔터프라이즈 키가 필요합니다. 예를 들어 다음과 같이 Bing 지도 웹 컨트롤을 로드하는 스크립트 URL에 Bing 지도 키를 추가합니다.

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

이제 키는 사이트 소스 코드의 공개 텍스트이며 보는 사람들이 키를 찾아 사용할 수 있습니다. 검색 엔진은 귀하의 페이지를 인덱싱하고 결과적으로 귀하의 키도 저장합니다. 이것이 문제입니까? 설마.

보호

Bing 지도 키는 주로 사용량을 확인하고 Bing 지도 기능에 대한 액세스를 허용하는 데 사용됩니다. Bing 지도 키를 보호하여 다른 웹사이트에서 오용되지 않도록 하려면 Bing Maps Dev Center에 키를 보호하는 옵션이 있습니다. 이 보안 옵션을 사용하면 키를 사용할 수 있는 리퍼러(웹사이트 URL) 및 IP 번호 목록을 지정할 수 있습니다. 하나 이상의 리퍼러 규칙이 활성화되면 리퍼러를 생략한 모든 요청과 승인되지 않은 리퍼러의 모든 요청이 차단되어 다른 사람이 요청에 귀하의 키를 사용하지 못하도록 합니다. 키당 최대 300개의 리퍼러 및 IP 보안 규칙을 가질 수 있습니다.



이제 키가 보호되지만 여전히 웹사이트 코드에 표시됩니다. Bing Maps 키를 숨기려면 어떻게 해야 합니까?

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

숨김

Bing Maps 키를 숨기려면 요청이 신뢰할 수 있는 참조 URL에서 오는 경우에만 Bing Maps 키를 반환하는 간단한 API 끝점을 만듭니다. Bing Maps Samples 사이트는 이 접근 방식을 사용하는 좋은 예입니다.

이 예에서는 Bing 지도 키를 반환하는 C#으로 작성된 익명 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);
    }
}

Bing Maps 키는 이 Azure 함수 애플리케이션 설정 필드의 서버 측에 저장됩니다. 키를 얻기 위해 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>

브라우저는 이 코드를 실행하고 Bing 지도 및 키를 로드하기 위해 이 블로그 게시물의 시작 부분에서 본 것과 동일한 줄<script> 태그를 DOM에서 런타임 시 생성합니다. 추가 이점은 Bing Maps 키가 더 이상 소스 코드에 저장되지 않으며 솔루션을 배포하기 위해 파이프라인을 사용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!