Question

我有一个简单的网站，它托管在Azure Web App上，它只是一个.html文件，一个.css文件和一个.js文件。它使用Bing API获取数据和chartjs来绘制页面上的数据。

问题是我显然不想将API密钥存储在任何其他人都可以找到的代码中，因此我不确定将其放在何处。我尝试设置Azure Key Vault并添加API密钥作为秘密，因此我可以执行REST GET并检索密钥，但我不确定如何设置权限以允许服务器Web应用程序是on（并且只有那个服务器）来访问它。

我研究的越多，阅读其他类似的问题越多，我觉得这不是最好的解决方案（没有人能用纯文本拦截回复吗？），但我＆＃39 ;还没找到最佳实践＆＃34;对于这个问题。欢迎任何有关如何使这项工作的替代解决方案或建议。

编辑：我越是想到这一点，我就意识到使用Key Vault的工作越多越好。此应用程序没有服务器端，因此API密钥的请求将来自任何IP。我想我会为此添加一个完整的服务器端应用程序。只是为了让你了解我到目前为止所发生的事情，这里有一些伪代码。

----------index.html----------
<head>
    <script src = "./chart.js"></script>
</head>

<body>
    <canvas id="mainChart" width="400" height="400"></canvas>
    <script src="./app.js"></script>
</body>


----------app.js----------

var BING_API_KEY = "myprivatebingapikey";
var CLIENT_ID = "bingapikeyclientid";

function getData() {
    return new Promise(resolve => {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "https://api.cognitive.microsoft.com/bing/v7.0/myquery", true);
        xhttp.setRequestHeader("Ocp-Apim-Subscription-Key", BING_API_KEY);
        xhttp.setRequestHeader("Accept", "application/json");
        xhttp.setRequestHeader("X-MSEdge-ClientID", CLIENT_ID);
        xhttp.onreadystatechange = function() { 
             if (xhttp.readyState == 4 && xhttp.status == 200) {
                var response = JSON.parse(xhttp.responseText);
                if (!response.value || response.value.length <= 0) {
                    throw Error;
                }
                resolve(parseData(response.value));
            }
        }
        xhttp.send(null);
    });
 }

function parseData(data) {
    // put the data into global variables
}

function graphData() {
    await getData();
    var chart = new Chart(document.getElementById('mainChart'), 
        data: { // all the data from the global variables },
        labels: { // labels from global variables },
        options: { // predefined options }
}

graphData();

代码并不完美，但它只是为了让您了解它是如何设置的。

Answer 1

看起来你已经意识到你需要某种服务器端代码来保密你的秘密秘密。即使您将密钥存储在一个不会提供帮助的Key Vault中，任何人都可以打开一个Web调试器（F12）并以纯文本形式查看该秘密。

我建议使用类似HTTP触发器的Azure功能。这将使您能够构建一个非常轻量级的服务器端Web服务。将所有getData()代码放入Azure函数（您可以使用JavaScript提供实现）以及您的秘密。在JavaScript客户端调用Azure Function以获取图表所需的数据。

An introduction to Azure Functions

Azure Functions是一种轻松运行小块代码的解决方案，或＆＃34;功能，＆＃34;在云端。您只需编写所需的代码即可手头的问题，不用担心整个应用程序或运行它的基础设施。功能可以进一步发展高效，您可以使用您选择的开发语言如C＃，F＃，Node.js，Java或PHP。只支付代码运行的时间并信任Azure根据需要进行扩展。 Azure Functions允许您进行开发 Microsoft Azure上的无服务器应用程序。

在哪里存储私有API密钥以供普通Javascript Azure Web应用程序访问？没有Web.config或C＃

1 个答案: