-1

I am hosting my website with Microsoft Azure. I have set up a few Application Settings (which should act as Environment Variables) for a secret key and ClientID for some GET requests I am doing. I have spent the last 3 hours googling trying to find a solution. According to Azure's Docs, I need to use process.env.KEY, but that is not working. When that is done I get this error in the console of my website jQuery.Deferred exception: process is not defined ReferenceError: process is not defined

Everything that I have so found is Node.js, but I do not use that. My website is purely HTML, CSS and the occational JavaScript script. Anyone that has any answers for me that can either put me on the correct path or helps me solve the issue completely?

Edit: This is the code for my script.js

$(document).ready(function() {
  //  $(window).scroll(function(){
  //    if(this.scrollY > 20){
  //      $(".menu").addClass("sticky");
  //    }
  //    else {
  //      $(".menu").removeClass("sticky");
  //    }
  //  });

  $('.menu-toggler').click(function() {
    $(this).toggleClass("active");
    $(".menu-menu").toggleClass("active");
  });

  // Check if streamer is live on twitch
  const Url = 'https://api.twitch.tv/helix/streams?user_login=pokimane';
  $.ajax({
    url: Url,
    type: "GET",
    success: function(result) {
      var json = JSON.stringify(result);
      if (json.includes('"type":')) {
        $(".twitch").addClass("live");
      };
    },
    error: function(error) {
      console.log(`Error ${error}`)
    },
    isLocal: true,
    jsonp: true,
    headers: {
      'Client-ID': process.env.CLIENT_ID,
      'Authorization': `Bearer ${process.env.CLIENT_AUTH}`,
      'accept': 'application/vnd.twitchtv.v5+json',
    }
  });
});
TheBrohman
  • 1
  • 1
  • Has your problem been solved? Is there any progress? – Jason Pan Sep 23 '20 at 09:47
  • @JasonPan I completely forgot about this as I stepped away from Azure after not having any further progress with this. Thank you for the assistance though, very much appreciated. – TheBrohman Nov 07 '20 at 07:09

1 Answers1

0

NEWEST

This api need add bear token to request.

According to your description, your project is only html+js, which is originally a static resource, hard coding will definitely cause security issues. But you will be much safer using rest api now.

Because you first need to obtain the bear token, you need to refer to the official documentation for details.

Microsoft identity platform and OAuth 2.0 authorization code flow

If you want to make minimal changes to the project, you may need to use ROPC flow. You can refer my another in another post.

enter image description here

PRIVIOUS

You can use rest api to get application settings.

The JavaScript script in Html does not support node usage. The syntax of process.env.CLIENT_ID is suitable for use in complete nodejs projects. It is recommended to use restapi to get the value of the application settings you want.

My custom settings in portal.

enter image description here

You can access this site. Web Apps - List Application Settings.

enter image description here

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • That's great, and not something I had stumbled upon as of yet. But how secure would this be? Because as far as I can tell, I would have to store the name of my App and those things, hardcoded into my application, to use them to access environmental variables for my website to use. And then with those things hardcoded into my website, people would just be able to grab the POST and such and through that grab my environmental variables. – TheBrohman Sep 16 '20 at 21:33
  • @TheBrohman I updated my answer, this should be the safest way. – Jason Pan Sep 17 '20 at 01:25
  • @TheBrohman If you pass the Microsoft authentication service and it is not secure, there should be no better solution. – Jason Pan Sep 17 '20 at 01:27
  • @TheBrohman Perhaps if you really want to keep the data secret, it is recommended that after obtaining the value of application settings, md5 encrypts and saves it in localstorage, and clears the value in localstorage after use. This is just an idea, I hope it can help you. – Jason Pan Sep 17 '20 at 01:30