Azure Bot - Directline token generation from html page hiding secret

Question

I was trying to do some work around with azure bot service using Direct Line Channel from html page. Script within html page is as follows:

index.html

 var directLine = new window.WebChat.createDirectLine({ secret: 'SECRET' });

  directLine.postActivity({
from: { id: 'myUserId', name: 'myUserName' }, // required (from.name is optional)
type: 'message',
text: 'hi'
}).subscribe(
     id => console.log("Posted activity, assigned ID ", id),
     error => console.log("Error posting activity", error)
);

directLine.activity$
.filter(activity => activity.type === 'message')
.subscribe(
     message => console.log("received message ", message)
  );

I found API "https://directline.botframework.com/v3/directline/tokens/generate" where secret can be exchanged with token but SECRET has to be added in Authorization header.

Is there a way to hide SECRET in html page without using MVC architecture? Or any other method to interact without exposing SECRET key.

Answer 1

No, there is no way to hide the secret. If it's in the web page, then it is accessible to anyone who inspects the source.

You don't necessarily have to opt for an MVC setup, however. All you need to do is create a service with APIs you can then access.

If you look over the latter half of this solution I previously provided, I demonstrate a simple setup that I run locally for development purposes. From the page hosting the Web Chat instance, I make a call to my custom /directline/token endpoint. The service, appended to my bot's index.js file gets a token and returns it back for use in Web Chat.

In production, I put the "token server" in its own file, and deploy it with the web app. It runs in the background on the server remaining inaccessible (as a file) but accessible via the APIs. Just lock down the API resources and you should be good to go.