0

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.

This is the source of the external site, which I got from my browser.

<!DOCTYPE html>


<html><head>
    <title>Omitted | Login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   <script type="text/javascript">
			var areActiveModsSelected = false;
			var areInactiveModsSelected = false;
			function SetActiveSelection()
			{
				var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
				areActiveModsSelected = !areActiveModsSelected;
			    SetSelection(checkboxes, areActiveModsSelected);
			}
			function SetInactiveSelection()
			{
				var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
				areInactiveModsSelected = !areInactiveModsSelected;
			    SetSelection(checkboxes, areInactiveModsSelected);
			}
			function SetSelection(checkboxes, isSelected)
			{
			    for(var i=0, n=checkboxes.length;i<n;i++)
				{
			        checkboxes[i].checked = isSelected;
			    }
			}
			function checkSavegame()
			{
			    var e = document.getElementById("savegame");
             if (e != null) {
			        var savegame = e.options[e.selectedIndex].text;
			        var isEmpty = isEmptySavegame(savegame);
			        document.getElementById("mapSelector").disabled = !isEmpty;
			        document.getElementById("difficultySelector").disabled = !isEmpty;
			    }
			}
			function isEmptySavegame(value)
			{
			    var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
			return ret != null;
			}
		    window.onload = function()
			{
			    checkSavegame();
			}
	   </script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/monitor.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="js/all.js"></script>
</head>
<body>
    <div class="white-bg clearfix">
    <header class="main-header" role="banner" data-module="sticky">
    <div class="header-bar clearfix">    <div class = "row column">    <div class = "top-bar-right">    <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li>	   </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><a href="#"><img src="img/icons/flag-en.png" alt="lang"></a><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><a href="?lang=en"><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></a></li><li><a href="?lang=de"><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></a></li><li><a href="?lang=fr"><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></a></li></ul></li></ul>    </div>
    </div>
    </div>
<div class="top-bar">        <div class="row column">            <div class="top-bar-left">                <a href="index.html?lang=en" class="logo float-left">                    <img src="img/logo.png"></a>            </div>            <div class="top-bar-right">                <ul class="menu float-left">    <li><a href="index.html?lang=en"><span>HOME</span></a></li>
    <li><a href="savegames.html?lang=en"><span>SAVEGAMES</span></a></li>
    <li><a href="mods.html?lang=en"><span>MODS</span></a></li>
    <li><a href="journal.html?lang=en"><span>JOURNAL</span></a></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
	<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit"  name="login"  type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">

    <div class="social-header clearfix">

        <div class="title-wrap clearfix" style="line-height: 62px;">

            <i class="icon icon-twitter"></i><span>Twitter</span>
        </div>
        <a href="https://twitter.com/url" target="_newTwitter" class="button follow-btn" style="line-height: 62px;">Follow</a>
    </div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT <a href="url">hi</a>: Come and meet us at E3 at booth West Hall <a href="blank">#4512</a> to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at <a href="url">#blank</a> ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">

<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT <a href="url">@url</a>: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>

</div>
</div>
</div>
</section>
  <div class="partners clearfix text-center">   <div class="row">    <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" />    </div>   </div>  </div>  <footer class="main-footer clearfix">
  <div class="row">
    <div class="medium-8 columns">
<div class="copyright"><a href="https://giants-software.com" target="_newGiantsSoftware"><img class="copyright__logo" src="img/logos/footer-logo.png"></a><div>&copy; 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div>    </div>
    <div class="medium-4 small-12 columns">
    <ul class="menu menu-footer float-right">
<li><a href="https://www.farming-simulator.com">7.0.5.0</a></li>
    </ul>
    </div>
  </div>
  </footer>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>

I tried this, but it simply redirects to the page without filling any of the fields.

<DOCTYPE html>
  <html>
  <head>
    <title>TEST</title>
    <script>
      window.onload = function() {
       document.getElementById('loginForm').submit();
     };
    </script>
  </head>
  <body>
    <form id="loginForm" action="URL of site" method="POST">
      <input type=hidden name="username" value="moo"/>
      <input type=hidden name="password" value="boo"/>
    </form>
</body>
</html>

What is wrong with my code, and how can I achieve my goal? Thank you.

3
  • 1
    You can post a form to the site matching what they have and see if they check the referer or you can look into a tool like selenium if it is for you only. If not, there is not much you can do because JavaScript can not interact with other domains because of the same origin policy. May 29, 2018 at 17:10
  • I'm not sure this is possible due to security reasons
    – Sacha
    May 29, 2018 at 17:11
  • this may be possible only if the 3rd party api allow to receive some data, and use data to fill the form fields. From your your side you can only send data to 3rd party api. Rest depends on them how they are flexible with handling data. May 29, 2018 at 17:23

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.