Topics

javascript question

Stein Goering
 

My problem is I keep expecting javascript to behave like a normal sane programming language.

 

Those of you at the last meeting will recall my issue with needing to submit a form with hidden fields containing sensitive info.  The worry was that someone could intercept the page and view the source code.   I was thinking I could prevent that possibility by waiting to populate those fields until just before the page was submitted.  The following code works :

 

<head>

  <title>Ajax test</title>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      vmMerchantID = '20ACEVISIT';

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

</head>

 

<body>

  <form action="https://acewareuniversity.com/wconnect/coursestatus.awp" method="POST" name="autoForm" id="autoForm">

  </form>

</body>

 

(Note that the target site is one of our test pages, being used here for demo purposes only.)  We're just pretending that vmMerchantID value is private data, but in production we don't want it to be visible so of course can't embed the value in the javascript code.  But I do have an AJAX routine on the server that can pull requested values out of an encrypted config file.  So this routine also works if I run it on its own:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

    });

  </script>

 

And I get this in the console:

 json result:20ACEVISIT

 

What I don't know is how to combine the functionality of those two routines so that I have the correct value assigned to vmMerchantID* at the point that this is executed:

$("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

* Note that in production there will actually be 3 or 4 such fields.

 

My procedural mind just wanted to put them in sequence but that does not result in vmMerchantID actually having a value when the on submit routine is run:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

 

Is there a way to accomplish what I want (i.e. populating those hidden fields using values obtained with getJSON calls?)

 

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

Stein Goering
 

OK, I had to sit on this a bit but finally figured it out.  Since getJSON executes asynchronously, I need to wait for its results before submitting the form.  I can accomplish that by issuing the submit() inside its callback function.  This works:

 

 <script type="text/javascript">

    $(document).ready(function ()

    {

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

        $("#autoForm").submit();

         });   

    });

  </script>

 

 

From: MadFox@groups.io On Behalf Of Stein Goering
Sent: Thursday, February 27, 2020 03:13 PM
To: MadFox@groups.io
Subject: [MadFox] javascript question

 

My problem is I keep expecting javascript to behave like a normal sane programming language.

 

Those of you at the last meeting will recall my issue with needing to submit a form with hidden fields containing sensitive info.  The worry was that someone could intercept the page and view the source code.   I was thinking I could prevent that possibility by waiting to populate those fields until just before the page was submitted.  The following code works :

 

<head>

  <title>Ajax test</title>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      vmMerchantID = '20ACEVISIT';

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

</head>

 

<body>

  <form action="https://acewareuniversity.com/wconnect/coursestatus.awp" method="POST" name="autoForm" id="autoForm">

  </form>

</body>

 

(Note that the target site is one of our test pages, being used here for demo purposes only.)  We're just pretending that vmMerchantID value is private data, but in production we don't want it to be visible so of course can't embed the value in the javascript code.  But I do have an AJAX routine on the server that can pull requested values out of an encrypted config file.  So this routine also works if I run it on its own:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

    });

  </script>

 

And I get this in the console:

 json result:20ACEVISIT

 

What I don't know is how to combine the functionality of those two routines so that I have the correct value assigned to vmMerchantID* at the point that this is executed:

$("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

 

* Note that in production there will actually be 3 or 4 such fields.

 

My procedural mind just wanted to put them in sequence but that does not result in vmMerchantID actually having a value when the on submit routine is run:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

 

Is there a way to accomplish what I want (i.e. populating those hidden fields using values obtained with getJSON calls?)

 

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

Cliff
 

so it is important to remember that all this stuff is async and involves promises. Not really a JS problem, and to me promises are a very sane way to handle async calls. We used to have to build pause loops with breakout event handlers in our code.

One construct that might help is to use async-await blocks - it just makes the code look more procedural (and for me, more readable - check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here is a very simple example:

// async fn resolving an object...
function myAsyncFn(var1, var2) {
  return new Promise((resolve, reject) => {
    setTimeout( () => {
      resolve({v1: var1, v2: var2, v3: var1 + var2});
    }, 3000 );
    // this should never fail, so there is no 'reject' code...
  });
}

async function main() { // wrapping this in async lets me use await...
  let var1 = "a start ";
  let var2 = "of something!";

  console.log("calling myAsynFn()...");
  const myResult = await myAsyncFn(var1, var2); // this will pause until myAsyncFn() returns something...

  // do something with myResult
  console.log("got result back: myResult.v1: ", myResult.v1,
            "\n                   myResult.v2: ", myResult.v2,
            "\n                   myResult.v3: ", myResult.v3);
}

module.exports.main = main; // make this available as a module for use/require, only main() is visible...

So this code looks exactly like the flow that you want and you don't have to worry about writing code to wait for the async return or forgetting that one of the calls is async or ending up with a bunch of nested promise.then() blocks. I mean, promise.then() works, but if you've got four or five http calls that must be sequential (can't use promise.all()), the code looks really bad. Async-await makes for a much clearer code block.

I like this construct, especially for http calls since your code can look like:

await httpCall1();
doSomeStuff;
await httpCall2();
doSomeMoreStuff;
  o
  o
  o

And to me this is much clearer to understand the program flow...

I guess that I would rewrite you code something like:

<script type="text/javascript">
  async function doMyForm() {
    // added value to form...
    $("#autoForm").submit(function (eventObj) {
      $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");
      return true;
    });

    var vmMerchantID = '';
    tResult = await $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr");

    vmMerchantID = tResult;
    console.log('json result:' + vmMerchantID);
    response = await $("#autoForm").submit();
    doMoreStuffIfYouNeedTo;
  }

  $(document).ready(() => doMyForm());
</script>


As an aside, since this is a man-in-the-middle issue, I worked through the web security workshop from egghead.io and I think this is a great course - first you are the bad guy, then you are the good guy. Without a lot of work, you can mitigate MITM if you can have the server just set a couple of headers. I know Stein has no control over the various client site servers, but best practices should have these in place anyway so there are no MITM problems. I will have all this stuff on my notebook for next meeting (and copied to a pen drive for those that may want it) if you are interested. Also got the rust stuff ported over and working.


--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 3/1/20 12:34 AM, Stein Goering wrote:

OK, I had to sit on this a bit but finally figured it out.  Since getJSON executes asynchronously, I need to wait for its results before submitting the form.  I can accomplish that by issuing the submit() inside its callback function.  This works:

 

 <script type="text/javascript">

    $(document).ready(function ()

    {

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

        $("#autoForm").submit();

         });   

    });

  </script>

 

 

From: MadFox@groups.io On Behalf Of Stein Goering
Sent: Thursday, February 27, 2020 03:13 PM
To: MadFox@groups.io
Subject: [MadFox] javascript question

 

My problem is I keep expecting javascript to behave like a normal sane programming language.

 

Those of you at the last meeting will recall my issue with needing to submit a form with hidden fields containing sensitive info.  The worry was that someone could intercept the page and view the source code.   I was thinking I could prevent that possibility by waiting to populate those fields until just before the page was submitted.  The following code works :

 

<head>

  <title>Ajax test</title>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      vmMerchantID = '20ACEVISIT';

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

</head>

 

<body>

  <form action="https://acewareuniversity.com/wconnect/coursestatus.awp" method="POST" name="autoForm" id="autoForm">

  </form>

</body>

 

(Note that the target site is one of our test pages, being used here for demo purposes only.)  We're just pretending that vmMerchantID value is private data, but in production we don't want it to be visible so of course can't embed the value in the javascript code.  But I do have an AJAX routine on the server that can pull requested values out of an encrypted config file.  So this routine also works if I run it on its own:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

    });

  </script>

 

And I get this in the console:

 json result:20ACEVISIT

 

What I don't know is how to combine the functionality of those two routines so that I have the correct value assigned to vmMerchantID* at the point that this is executed:

$("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

 

* Note that in production there will actually be 3 or 4 such fields.

 

My procedural mind just wanted to put them in sequence but that does not result in vmMerchantID actually having a value when the on submit routine is run:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

 

Is there a way to accomplish what I want (i.e. populating those hidden fields using values obtained with getJSON calls?)

 

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

dickhildreth
 

I found this article that compares (and describes) callbacks, Promises, async/await and RsJx.  I think it provides some interesting insights.


Dick

On Sun, Mar 1, 2020 at 1:15 PM Cliff <cliff@...> wrote:

so it is important to remember that all this stuff is async and involves promises. Not really a JS problem, and to me promises are a very sane way to handle async calls. We used to have to build pause loops with breakout event handlers in our code.

One construct that might help is to use async-await blocks - it just makes the code look more procedural (and for me, more readable - check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here is a very simple example:

// async fn resolving an object...
function myAsyncFn(var1, var2) {
  return new Promise((resolve, reject) => {
    setTimeout( () => {
      resolve({v1: var1, v2: var2, v3: var1 + var2});
    }, 3000 );
    // this should never fail, so there is no 'reject' code...
  });
}

async function main() { // wrapping this in async lets me use await...
  let var1 = "a start ";
  let var2 = "of something!";

  console.log("calling myAsynFn()...");
  const myResult = await myAsyncFn(var1, var2); // this will pause until myAsyncFn() returns something...

  // do something with myResult
  console.log("got result back: myResult.v1: ", myResult.v1,
            "\n                   myResult.v2: ", myResult.v2,
            "\n                   myResult.v3: ", myResult.v3);
}

module.exports.main = main; // make this available as a module for use/require, only main() is visible...

So this code looks exactly like the flow that you want and you don't have to worry about writing code to wait for the async return or forgetting that one of the calls is async or ending up with a bunch of nested promise.then() blocks. I mean, promise.then() works, but if you've got four or five http calls that must be sequential (can't use promise.all()), the code looks really bad. Async-await makes for a much clearer code block.

I like this construct, especially for http calls since your code can look like:

await httpCall1();
doSomeStuff;
await httpCall2();
doSomeMoreStuff;
  o
  o
  o

And to me this is much clearer to understand the program flow...

I guess that I would rewrite you code something like:

<script type="text/javascript">
  async function doMyForm() {
    // added value to form...
    $("#autoForm").submit(function (eventObj) {
      $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");
      return true;
    });

    var vmMerchantID = '';
    tResult = await $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr");

    vmMerchantID = tResult;
    console.log('json result:' + vmMerchantID);
    response = await $("#autoForm").submit();
    doMoreStuffIfYouNeedTo;
  }

  $(document).ready(() => doMyForm());
</script>


As an aside, since this is a man-in-the-middle issue, I worked through the web security workshop from egghead.io and I think this is a great course - first you are the bad guy, then you are the good guy. Without a lot of work, you can mitigate MITM if you can have the server just set a couple of headers. I know Stein has no control over the various client site servers, but best practices should have these in place anyway so there are no MITM problems. I will have all this stuff on my notebook for next meeting (and copied to a pen drive for those that may want it) if you are interested. Also got the rust stuff ported over and working.


--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 3/1/20 12:34 AM, Stein Goering wrote:

OK, I had to sit on this a bit but finally figured it out.  Since getJSON executes asynchronously, I need to wait for its results before submitting the form.  I can accomplish that by issuing the submit() inside its callback function.  This works:

 

 <script type="text/javascript">

    $(document).ready(function ()

    {

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

        $("#autoForm").submit();

         });   

    });

  </script>

 

 

From: MadFox@groups.io On Behalf Of Stein Goering
Sent: Thursday, February 27, 2020 03:13 PM
To: MadFox@groups.io
Subject: [MadFox] javascript question

 

My problem is I keep expecting javascript to behave like a normal sane programming language.

 

Those of you at the last meeting will recall my issue with needing to submit a form with hidden fields containing sensitive info.  The worry was that someone could intercept the page and view the source code.   I was thinking I could prevent that possibility by waiting to populate those fields until just before the page was submitted.  The following code works :

 

<head>

  <title>Ajax test</title>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      vmMerchantID = '20ACEVISIT';

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

</head>

 

<body>

  <form action="https://acewareuniversity.com/wconnect/coursestatus.awp" method="POST" name="autoForm" id="autoForm">

  </form>

</body>

 

(Note that the target site is one of our test pages, being used here for demo purposes only.)  We're just pretending that vmMerchantID value is private data, but in production we don't want it to be visible so of course can't embed the value in the javascript code.  But I do have an AJAX routine on the server that can pull requested values out of an encrypted config file.  So this routine also works if I run it on its own:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

    });

  </script>

 

And I get this in the console:

 json result:20ACEVISIT

 

What I don't know is how to combine the functionality of those two routines so that I have the correct value assigned to vmMerchantID* at the point that this is executed:

$("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

 

* Note that in production there will actually be 3 or 4 such fields.

 

My procedural mind just wanted to put them in sequence but that does not result in vmMerchantID actually having a value when the on submit routine is run:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

 

Is there a way to accomplish what I want (i.e. populating those hidden fields using values obtained with getJSON calls?)

 

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

Stein Goering
 

Thanks for both responses.  That article was actually helpful in understanding the solution Cliff proposed.

 

FWIW, while I do see the value of using promises in more complex scenarios, I'm not sure why I would introduce them into my situation, given that a simple callback does what I need.  So I'm sticking with what I've got.

 

From: MadFox@groups.io On Behalf Of dickhildreth
Sent: Sunday, March 01, 2020 03:46 PM
To: MadFox@groups.io
Subject: Re: [MadFox] javascript question

 

I found this article that compares (and describes) callbacks, Promises, async/await and RsJx.  I think it provides some interesting insights.

 

 

Dick

 

On Sun, Mar 1, 2020 at 1:15 PM Cliff <cliff@...> wrote:

so it is important to remember that all this stuff is async and involves promises. Not really a JS problem, and to me promises are a very sane way to handle async calls. We used to have to build pause loops with breakout event handlers in our code.

One construct that might help is to use async-await blocks - it just makes the code look more procedural (and for me, more readable - check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here is a very simple example:

// async fn resolving an object...
function myAsyncFn(var1, var2) {
  return new Promise((resolve, reject) => {
    setTimeout( () => {
      resolve({v1: var1, v2: var2, v3: var1 + var2});
    }, 3000 );
    // this should never fail, so there is no 'reject' code...
  });
}
 
async function main() { // wrapping this in async lets me use await...
  let var1 = "a start ";
  let var2 = "of something!";
 
  console.log("calling myAsynFn()...");
  const myResult = await myAsyncFn(var1, var2); // this will pause until myAsyncFn() returns something...
 
  // do something with myResult
  console.log("got result back: myResult.v1: ", myResult.v1,
            "\n                   myResult.v2: ", myResult.v2,
            "\n                   myResult.v3: ", myResult.v3);
}
 
module.exports.main = main; // make this available as a module for use/require, only main() is visible...

So this code looks exactly like the flow that you want and you don't have to worry about writing code to wait for the async return or forgetting that one of the calls is async or ending up with a bunch of nested promise.then() blocks. I mean, promise.then() works, but if you've got four or five http calls that must be sequential (can't use promise.all()), the code looks really bad. Async-await makes for a much clearer code block.

I like this construct, especially for http calls since your code can look like:

await httpCall1();
doSomeStuff;
await httpCall2();
doSomeMoreStuff;
  o
  o
  o

And to me this is much clearer to understand the program flow...

I guess that I would rewrite you code something like:

<script type="text/javascript">
  async function doMyForm() {
    // added value to form...
    $("#autoForm").submit(function (eventObj) {
      $("<input />").attr("type", "hidden").attr("name", "txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");
      return true;
    });
 
    var vmMerchantID = '';
    tResult = await $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr");
 
    vmMerchantID = tResult;
    console.log('json result:' + vmMerchantID);
    response = await $("#autoForm").submit();
    doMoreStuffIfYouNeedTo;
  }
 
  $(document).ready(() => doMyForm());
</script>

 

As an aside, since this is a man-in-the-middle issue, I worked through the web security workshop from egghead.io and I think this is a great course - first you are the bad guy, then you are the good guy. Without a lot of work, you can mitigate MITM if you can have the server just set a couple of headers. I know Stein has no control over the various client site servers, but best practices should have these in place anyway so there are no MITM problems. I will have all this stuff on my notebook for next meeting (and copied to a pen drive for those that may want it) if you are interested. Also got the rust stuff ported over and working.

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 /
cliff@...

On 3/1/20 12:34 AM, Stein Goering wrote:

OK, I had to sit on this a bit but finally figured it out.  Since getJSON executes asynchronously, I need to wait for its results before submitting the form.  I can accomplish that by issuing the submit() inside its callback function.  This works:

 

 <script type="text/javascript">

    $(document).ready(function ()

    {

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

        $("#autoForm").submit();

         });   

    });

  </script>

 

 

From: MadFox@groups.io On Behalf Of Stein Goering
Sent: Thursday, February 27, 2020 03:13 PM
To: MadFox@groups.io
Subject: [MadFox] javascript question

 

My problem is I keep expecting javascript to behave like a normal sane programming language.

 

Those of you at the last meeting will recall my issue with needing to submit a form with hidden fields containing sensitive info.  The worry was that someone could intercept the page and view the source code.   I was thinking I could prevent that possibility by waiting to populate those fields until just before the page was submitted.  The following code works :

 

<head>

  <title>Ajax test</title>

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      vmMerchantID = '20ACEVISIT';

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

</head>

 

<body>

  <form action="https://acewareuniversity.com/wconnect/coursestatus.awp" method="POST" name="autoForm" id="autoForm">

  </form>

</body>

 

(Note that the target site is one of our test pages, being used here for demo purposes only.)  We're just pretending that vmMerchantID value is private data, but in production we don't want it to be visible so of course can't embed the value in the javascript code.  But I do have an AJAX routine on the server that can pull requested values out of an encrypted config file.  So this routine also works if I run it on its own:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

    });

  </script>

 

And I get this in the console:

 json result:20ACEVISIT

 

What I don't know is how to combine the functionality of those two routines so that I have the correct value assigned to vmMerchantID* at the point that this is executed:

$("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

 

* Note that in production there will actually be 3 or 4 such fields.

 

My procedural mind just wanted to put them in sequence but that does not result in vmMerchantID actually having a value when the on submit routine is run:

 <script type="text/javascript">

    $(document).ready(function ()

    {

      var vmMerchantID = '';

      $.getJSON("/wconnect/awJSON.awp?target=:AWPATH\\awsys.ini;vmMerchantID;Main;decr"function (tResult)

      {

        vmMerchantID = tResult;

        console.log('json result:' + vmMerchantID);

      });

      $("#autoForm").submit(function (eventObj) 

      {

        $("<input />").attr("type""hidden").attr("name""txtCourse").attr("value", vmMerchantID).appendTo("#autoForm");

        return true;

      });

      ;

      $("#autoForm").submit();

    });

  </script>

 

Is there a way to accomplish what I want (i.e. populating those hidden fields using values obtained with getJSON calls?)

 

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc