Creating XmlHttpsRequest with custom Twilio Parameters

Question

We're passing data to Studio's REST Api via xmlhttprequest. It works well while I'm only passing To, From and Body. However, I want to pass custom parameters to the api like "location" & "surveyentity" and consume it within the studio as flow.data.location and flow.data.surveyentity

Our reason of using XMLHttpRequest is that, this is how our previous developers set up our app. I understand that Twilio only has server-side SDKs and they don't recommend putting it on the front like Vue, but we're unfortunate I think. We are currently using Vue with XMLHttpRequest.

async sendSmsSurvey(to, location, surveyEntity, checkedID) {
            if (location == 7 && surveyEntity == 'Google'){ 
              var url = "https://studio.twilio.com/v2/Flows/xxx/Executions";
              var phone = "xxx"; 
            }
            if (location == 8 && surveyEntity == 'Google'){
              var url = "https://studio.twilio.com/v2/Flows/xxx/Executions";
              var phone = "xxx";
            }

            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);

            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Authorization", "Basic QUxxYyYWZiZjZhZxxxx=="); 
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && surveyEntity == "Google" || surveyEntity == "EmojisGoogleRedirect" || surveyEntity == "EmojisGoogleLink") { 
                  console.log(xhr.status);
                  console.log(xhr.responseText);
                  if (xhr.status == 200 || xhr.status == 201) {
                    //
                  } else {
                    //
                  }
              } //end xhr.readyState
            }; //end xhr.onreadystatechange

            var data = "To="+to+"&From="+phone; // I wanted to add the custom parameters here like "location" and "surveyentity".
            xhr.send(data);

          },

Answer 1

Twilio developer evangelist here.

I understand that you are unfortunate with the way your previous developers set this up, but I must recommend that you work on moving this API request from your front-end to the back-end so that you stop exposing your Account SID and Auth Token in your application. With those two details, a malicious user can take over and abuse your Twilio account.

In the meantime, I can guide you to add the custom parameters here, but I strongly recommend using the back-end.

To add custom parameters when you trigger a Studio Flow from the API, you need to pass a Parameters parameter which has a JSON object of the custom parameters. The best way to do this is to use the URLSearchParams object to serialize your data.

You currently have:

var data = "To="+to+"&From="+phone;

To start with you can improve this by using URLSearchParams to serialize the data:

const urlSearchParams = new URLSearcParams();
urlSearchParams.append("To", to);
urlSearchParams.append("From", from);
const data = urlSearchParams.toString();

You need to add your custom parameters to an object which you then JSON stringify and add as a parameter called Parameters.

const urlSearchParams = new URLSearcParams();
urlSearchParams.append("To", to);
urlSearchParams.append("From", from);

const parameters = {
  surveyEntity: surveyEntity,
  location: location
};
urlSearchParams.append("Parameters", JSON.stringify(parameters));

const data = urlSearchParams.toString();

As I close, one more appeal. Please move this from your client side to your server side and stop exposing your credentials.