tultalk has asked for the wisdom of the Perl Monks concerning the following question:

Hi: Testing accessing global variable in perl module from javascript in HTML page. I don't understand why it is seeing this as cross origin since both the requesting doc and the per module are in same program (namespace?) All the examples I found on search dealt with getting info from different sites. Errors. Firebug: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# insteadLearn More jquery-1.9.1.min.js:1 Object { 0: HTMLDocument → login_failed.htm, context: HTMLDocument → login_failed.htm, length: 1 } login_failed.htm:20:1 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://1.2.3.4/cserver/clientresptime?cid=CID5181430.AID1488339190.TID1770&url=http%3A%2F%2Fjala-mi.org/login_failed.htm%2F&resptime=198&starttime=1488420133137. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Perl Module: 

our $attempts = $session->param('attempts');<-Global variable

# exported functions
    @EXPORT = qw(.....<--Global variable in list of exports
    $attempts


HTML Doc javascript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login Failed Form</title>
<meta name="robots" content="noindex, nofollow">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
var attempts = //#manageusers::attempts; <----
 $(document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;
});
console.log(attempts);
</script>

[download]
............ <-----Doesn't work with $manageusers::attempts either HTML Doc where number of logins is supposed to appear. 
<p><h3><b>You have only <em id="logins"></em> login attempts left.</b>
+</h3></p>

[download]

Replies are listed 'Best First'.
Re: Cross-Origin Request Blocked
by Corion (Patriarch) on Mar 02, 2017 at 14:16 UTC 
    Reason: CORS header ‘Access-Control-Allow-Origin’ missing

    [download]

    You don't show us where/how you output the HTTP headers from your program.

    Most likely, a first step in diagnosing is to see what headers your browser receives from the script and a second step would be to add the appropriate missing headers to the output.

[reply]
[d/l]

      Hi: Thanks for bringing the header to my attention. I fixed and no more cross error. However Firebug reports these still: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# insteadLearn More jquery-1.9.1.min.js:1 I had tried //@ and //# and # and none worked. SyntaxError: missing ; before statementLearn More Can't see this.

      This is code from test page: 
      
<!DOCTYPE html>
<html>
  <head><meta http-equiv="Content-Type" content="text/html; charset=wi
+ndows-1252">
    <title>Login Success Form</title>
    <meta name="robots" content="noindex, nofollow">

<base href="http://www.jala-mi.org/">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login Failed Form</title>
<meta name="robots" content="noindex, nofollow">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


<script type="text/javascript">

var attempts = $manageusers::attempts;

 $(document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;
  
});

console.log(attempts);


</script>

<style type="text/css">
#loginWrap {
  width: 195px;
  margin: 0 0 0 0;
  margin: 15px 0 0 0;*/
  background: #FFF url(../graphics/bkgndfff.jpg) repeat-x;
}
#sublogin {
  border: 1px solid #0D4A80;
  background: #FFF;
  margin: 0 0 0 0;
  padding: 1px;
}
#sublogin span {
  display: block;
  color: #FFF;
  font-size: 12px;
  padding: 3px 2px 2px 3px;
  height: 20px;
  height: 15px;
    background: #0D4A80;
}
#sublogin label {
  font-size: 90%;
}
#subloginLogin {
  background: #EDF5E3;
  padding: 1px 3px 8px 5px;
}
  #login, #password {
    width: 108px;
  }
  #subloginLogin ul {
    list-style-type: none;
    margin: 5px 0 0 0;
    padding: 0;
  }

/*#logins{ 
/*  display: block;*/
  font-color: #ff0000;
  font-size: 12px;
  padding: 3px 2px 2px 3px;
  height: 20px;
  height: 15px;
/*  background: #FFF;*/
}*/
</style>

<style type="text/css">
  body {
  background: #FFF url(../graphics/bkgndfff.jpg) repeat-x;
  margin: 0;
  font-size: 76%;
  font-family: verdana, arial, helvetica, sans-serif;
  text-align: center;
}

</style>
</head>
<body background="../graphics/bkgnd.gif">
<div id="loginWrap">
<div id="sublogin" style="height:232px;">
<h3 id="sublogin"><span>Login Failed</span></h3>
<p></p>
<br>
<h3><b>Click Back to attempt the login again.</b></h3>
<p></p>
<p><h3><b>You have only <em id="logins"></em> login attempts left.</b>
+</h3></p
<div><input type="button" value="Back" style="background-color:#0D4A80
+; color:#ffffff"
onclick="history.go(-1);">
<p></p>
</div>
</div>
</div>
</body>
</html>

      [download]
[reply]
[d/l]

        I'm not sure where Perl comes into play in your question. Maybe you can show us the Perl code you use to create the output that Firefox complains about.

        If this is a question about Javascript, this website is not really the place for that. Maybe Stackoverflow or somewhere else is a better place for finding answers to such questions.

[reply]

      Hi Took you suggestion on dealing with the dynamically created form. While investigating this issue module code to create form: 

      sub CreateLoginUserFailedForm {
        my ($message) = @_;
    print "Content-type: text/html \n\n";
        print qq|
$htmlInvalidLoginheader
$htmlheader2
<!--$htmlheader3-->

<!-- Dynamically created form from manage_users.cgi line 779-->

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


<script type="text/javascript">

var attempts = $manageusers::attempts;

 $(document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;
  
});

console.log(attempts);


</script>

      [download]

      Here is the same code after rendering to the browser: The var attempts is getting the count number from the global variable and increments each time the login fails. Take note of this: 1926 1926document as opposed to $(document The code 

       $(document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;

      [download]

      Fails to execute 

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><
+head><title>Invalid Login Data Feedback Form</title>
<base href="http://www.jala-mi.org/"><meta http-equiv="Content-Type" c
+ontent="text/html;charset=iso-8859-1">
<!--<link rel="StyleSheet" href="/css/jala.css" type="text/css">-->

<!-- Dynamically created form from manage_users.cgi line 779-->

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


<script type="text/javascript">

var attempts = 1;

 1926 1926document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;
  
});

console.log(attempts);


</script>

      [download]
[reply]
[d/l]
[select]

        You're using double quotes, which interpolate Perl variables:

               print qq|
$htmlInvalidLoginheader
$htmlheader2
...
 $(document).ready(function () {
 document.getElementById('logins').innerHTML= attempts;
  
});

        [download]

        I recommend that as a first step you split up the printing into the two parts - one part where you want Perl variables interpolated, and the other part where you output verbatim strings. Use single quotes for the second part. See also perlop.

        In the middle run, you should look at using one of the many templating systems instead.

[reply]
[d/l]

        1926 1926document as opposed to $(document
        http://perldoc.perl.org/perlvar.html 

        $(

        [download]
        The real gid of this process. If you are on a machine that supports membership in multiple groups simultaneously, gives a space separated list of groups you are in. The first number is the one returned by getgid() , and the subsequent ones by getgroups() , one of which may be the same as the first number.

[reply]
[d/l]

Back to Seekers of Perl Wisdom