ログイン後ページの取得方法

Question

ASPサービス内で、「パスワード設定されたページ」の内容を他のページで表示させたいと考えています。
お知恵を拝借できれば幸いです。

<form action="include.html" method="POST">
    <input type="password" name="password" value="">
    <input type="hidden" name="****" value="****"> <!-- ASPサービスのユーザー情報がセットされていました -->
    <input type="hidden" name="****" value=""> <!-- 用途不明 -->
    <input type="submit" value="送信">
</form>

上記は読み込み対象の「include.html」のパスワード入力前の状態です。
ASPサービスの管理画面でパスワードを設定した結果、自動的に生成されたフォームなので改変はできません。
実際にはこのフォームではなく、パスワード入力後の内容を親ページに読み込ませたいです。

試したこと

var xhr = new XMLHttpRequest(),
	method = "GET",
	url = "include.html";
var wrapper = document.getElementById("wrapper"); // 親ページの表示先

xhr.responseType="document";
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
	if(xhr.readyState === 4 && xhr.status === 200) {
		var responceTxt = xhr.responseXML;
		var includeForm = responceTxt.querySelector('form');
		includeForm.getElementsByTagName('input')[0].setAttribute('value', 'hoge');
		// passwordのhogeをセット
		includeForm = includeForm.submit(); // undefinedになりました
		wrapper.innerHTML = includeForm.outerHTML;
	}
};
xhr.send();

上記のsubmitした行を削除すれば、パスワードをセットしたformは親ページに表示できているのですが
表示後にsubmitすると親ページが遷移してしまう為、行き詰まってしまいました。

そもそもxmlの状態でsubmitはできないのではと思い、改めてスクレイピングについて検索し
Chrome開発者ツールでパスワード入力後ページに渡されたCookieの値を確認する、という事も行ったのですが
個々の情報を結びつけどうやって形にしたらいいのか、根本的に間違っていないか、判らず
ご相談させていただきました。

追記: 親ページと子ページは同一ドメイン、パスワードは平文で記載してしまって問題ない状況です。

恐れ入りますがアドバイスの程宜しくお願い致します。

Answer 1

submitボタンを使った場合のデフォルト挙動がformのaction属性値に飛んでしまうので、
単に、submitが定義したタグにonclickハンドラを仕掛けてJavaScript的にfalseで処理させれば良いかと。

<input type="submit" value="送信" onclick="return false;">

当然、関数の戻り値をそのまま使わせるようなやり方で動的にする事も出来ます。
returnを付けるのがポイントですね。

<input type="submit" value="送信" onclick="return test();">

追記分

先ほどは失礼しました。上は不足した回答だったので追記します。

取得したhtmlタグのうち、submitを持つinputタグに対して、動的にonclickハンドラを付与するというアプローチです。
ハンドラ自体がfalseを返すと、動作サンプルではGoogleが開かないのを確認しています。

で、この実施タイミングですが、XHRでサーバ側から取得した状態のテキストはまだDOMとして機能していないと思いますので、普通の処理でformを画面にレンダリングされた後にJSを実行というのは可能ですか？
それならJavaScript側で拾って、属性を付与するのは幾分楽になるかと思います。
意図した動きでしょうか？

// ここはXHRで取得したものを一度ブラウザにレンダリングさせている前提
let submitButton = document.querySelector('form > input[type="submit"]');

// inputタグにイベントを仕掛ける処理
if (submitButton) {
  submitButton.onclick = () => {
    let result = false;
    console.log(result)
    return result;
  }
}

サンプル

https://jsfiddle.net/4gz6m9L1/1/

Comments

[neonemo]

あ、変更できないんですね。ちょっと直してきます。
⇒追記しました。

[t8pda]

ありがとうございます！
追記頂いていたことに気付かず、時間があいてしまい申し訳ありません。

ご指南頂いた内容を反映し、送信ボタンを手動でクリックしてみましたが
Consoleにfalseは返るものの、表示されたformはパスワード入力成功時の内容に変わりませんでした。
念の為、submitButton.click()も追記してみましたが同様の結果でした。

他に、追記前にご教示頂いた内容を参考に
パスワードセットの次の行で
includeForm.getElementsByTagName('input')[3].setAttribute('onclick', 'return false;');
としてみましたが、手動自動共にformに変化は起こりませんでした。

また、onclickに対する指示なので当然なのかもしれませんが
formをsubmitすると、いずれのパターンでも親ページが遷移するという結果になりました。

読み込み対象のinclude.htmlに直接アクセスした場合
formの表示された状態から入力成功後の内容表示状態まで、常にURLに変化がないのですが
この辺りに何かヒントはありますでしょうか？
それとも、ASPサービス側に制御された感のある特殊な挙動なのでしょうか？

不勉強で申し訳ありません。ご意見お聞かせいただければ幸いです。

[neonemo]

JSからformにアクセスできないとなると、ASP.NET独自の処理（例えば<script runat="server">や<asp:xxx>みたいなもの）にformが引きずられているのかもしれないですね。
その場合は、サーバ側（VB.NET、C#.NET等）で対処する必要があるかもしれません。
ASPでWebAPIを触ったことはありますが、画面はやった事ないのでちょっとお力になれなさそうです。
すみません。

[t8pda]

いえいえ、特殊な条件下の質問にも関わらず力になって頂きありがとうございました。
自分の手に負えない範疇に突入しているのだという事が判って良かったです
スタートから改めて進行方向を見直してみます！

この質問はここで閉じさせていただこうと思います。
ご協力ありがとうございました！

[neonemo]

丁寧な返信ありがとうございます。質問に答えていなかったですね。。

> 読み込み対象のinclude.htmlに直接アクセスした場合～ASPサービス側に制御された感のある特殊な挙動なのでしょうか？

これは、作り次第で変わると思いますが、基本的にASP（のコンポーネント等）の制御による内部的な通信とDOM操作などが行われていると思って良いと思います。

若干蛇足ですが、URL全体を見た時にクエリストリングといわれる部分が変わっているならサーバ通信が発生している可能性が高いですが、
フラグメントといわれる部分の場合は、クライアント処理だけの場合があります。
アクセスログでアクセスしたリソースを見ると分かりますが、フラグメント部分はログに残らず、通信が発生していない可能性があります。

こんなURLがあるとしたら
http://hogehoge.com/hello?hoge=fuga#piyo

【?】以降の【hoge=fuga】がクエリストリング
【#】以降の【piyo】がフラグメントになります。

失礼します。