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

Question

我有一个托管在 Azure Web 应用程序上的简单网站，它实际上只有一个 .html 文件、一个 .css 文件和一个 .js 文件。它使用 Bing API 获取数据，并使用 chartjs 在页面上绘制数据图表。

问题是我显然不想将 API 密钥存储在任何其他人可以找到的代码中，所以我不确定将它放在哪里。我尝试设置 Azure Key Vault 并将 API 密钥添加为秘密，这样我就可以执行 REST GET 并检索密钥，但我不确定如何设置权限以允许服务器访问 Web应用程序在（且仅在该服务器上）访问它。

我研究得越多，阅读其他类似问题越多，我越觉得这不是最好的解决方案（没有人能截取纯文本的回复吗？），但我还没有为这个问题找一个 "best practice"。欢迎任何关于如何使这项工作的替代解决方案或建议。

编辑：我对这个问题的思考越多，我就越意识到使用 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 Functions（你可以在 JavaScript 中提供实现）。在您的 JavaScript 客户端调用 Azure 函数以获取图表所需的数据。

An introduction to Azure Functions

Azure Functions is a solution for easily running small pieces of code, or "functions," in the cloud. You can write just the code you need for the problem at hand, without worrying about a whole application or the infrastructure to run it. Functions can make development even more productive, and you can use your development language of choice, such as C#, F#, Node.js, Java, or PHP. Pay only for the time your code runs and trust Azure to scale as needed. Azure Functions lets you develop serverless applications on Microsoft Azure.

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

Where to store private API key for access by plain Javascript Azure Web Application? No Web.config or C#

javascript

azure

bing-api