I have a simple website that's hosted on an Azure Web App that's literally just one .html file, one .css file, and one .js file. It uses the Bing API to get data and chartjs to graph that data on the page.
The issue is I obviously don't want to store the API key in the code anywhere anyone else can find it, so I'm not sure where to put it. I tried setting up an Azure Key Vault and adding the API Key as a secret, so I could just do a REST GET and retrieve the key, but I'm not sure how to setup permissions to allow the server the Web app is on (and only that server) to access it.
The more I research do and reading other similar questions the more I feel like this isn't the best solution out there (couldn't anyone just intercept the response in plain text?), but I'm yet to find a "best practice" for this problem. Any alternative solutions or advice on how to make this work are welcome.
EDIT: The more I'm thinking about this the more I realize using the Key Vault won't work. There is no server side to this application, so the request for the API key will come from any IP. I'm thinking I'm going to have add a whole server side application for this to work. Just to give you an idea of what I've got going on so far here's some pseudo code.
----------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();
The code isn't perfect, but it's just to give you an idea about how it's set up.
