TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
		<meta name="theme-color" content="#4b75ff">
		<link rel="stylesheet" href="../script/semantic/semantic.min.css">
		<script src="../script/jquery.min.js"></script>
		<script src="../script/ao_module.js"></script>
		<script src="../script/semantic/semantic.min.js"></script>
		
		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
		<title>Browser</title>
		<style>
			body{
				overflow: hidden;
			}
			#urlbar{
				padding-top: 0.2em;
				padding-bottom: 0.2em;
				padding-left: 1.2em;
				padding-right: 0.3em;
				line-height: 1em;
			}

			.menuitem{
				margin-top: 0.2em;
				padding:0.2em !important;
				border: 0px !important;
			}

			.menuitem button{
				background-color: white !important;
			}

			.rightMenuItem{
				margin-top: 0.3em;
				padding:0.1em !important;
				border: 0px !important;
			}

			.rightMenuItem button{
				background-color: white !important;
			}

			#starBtn{
				padding-right: 0.9em;
				cursor: pointer !important;
				background-color: white !important;
			}

			#starBtn:hover{
				opacity: 0.7;
			}

			#xframe{
				width: 100%;
				height: calc(100% - 43px);
				border: 0px solid transparent;
			}

			#notvdiWarning{
				position: fixed;
				bottom: 0px;
				left: 0px;
				width: 100%;
				padding: 0.4em;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="ui top small attached menu" style="background-color: #eceef2; padding-left: 12px; padding-right: 12px;">
			<div class="ui menuitem">
				<button class="ui circular tiny icon button" onclick="undoPage();">
					<i class="arrow left icon"></i>
				</button>
			</div>
			<div class="ui menuitem">
				<button class="ui circular tiny icon button" onclick="redoPage();">
					<i class="arrow right icon"></i>
				</button>
			</div>
			<div class="ui menuitem">
				<button class="ui circular tiny icon button" onclick="refreshPage();">
					<i class="green refresh icon"></i>
				</button>
			</div>
			<div id="urlbar" class="ui tiny action fluid input">
				<input id="urlText" type="text" value="about:blank" onkeydown="handleURLKeydown(event);">
				<button id="starBtn" class="ui icon basic circular tiny button">
					<i class="star icon"></i>
				</button>
			</div>
			<div class="right menu">
				<div class="ui rightMenuItem">
					<button class="ui tiny icon button">
						<i class="blue bookmark icon"></i>
					</button>
				</div>
				<div class="ui rightMenuItem">
					<button class="ui tiny icon button" onclick="loadWebsite('about:blank');">
						<i class="home icon"></i>
					</button>
				</div>
				<div class="ui rightMenuItem">
					<button class="ui tiny icon button">
						<i class="grey download icon"></i>
					</button>
				</div>
			</div>
		  </div>
		  <iframe id="xframe" src="./blank.html" allow="fullscreen" referrerpolicy="no-referrer">

		  </iframe>
		  <div id="notvdiWarning">
			<div class="ui yellow message">
				<i class="close icon"></i>
				<div class="header">
					<i class="remove icon"></i>Not Recommended Way of Usage
				</div>
				<p>Please use your native browser windows instead of this iframe browser for maximum website compatibility.</p>
			</div>
		  </div>
		<script>
			let historyStack = [];
			let historyPopStack = [];
			let currentURL = "about:blank";

			//Check if currently under vdi mode
			if (ao_module_virtualDesktop == false){
				$("#notvdiWarning").show();
			}

			$('.message .close').on('click', function() {
				$(this).closest('.message').transition('fade');
			});


			//Perform window resize element size calculation
			$(window).on("resize", function(){
				updateResizeElements();
			});
			function updateResizeElements(){
				let buttonWidths = 0;
				$(".menuitem").each(function(){
					buttonWidths+= $(this).width();
				});

				let urlbarWidth = window.innerWidth - buttonWidths - 20;
				$("#urlbar").css("width", urlbarWidth + "px");
			}
			updateResizeElements();


			function handleURLKeydown(e){
				if (e.keyCode == 13){
					let url = $("#urlText").val();
					loadWebsite(url);
				}
			}

			function refreshPage(){
				loadWebsite(currentURL);
			}

			function undoPage(){
				//Push current page into the history pop stack
				if (historyStack.length == 0){
					return;
				}
				let currentBackupURL = currentURL;
				historyPopStack.push(currentBackupURL);
				let targetReturnURL = historyStack.pop();
				loadWebsite(targetReturnURL, false);
			}

			function redoPage(){
				if (historyPopStack.length == 0){
					return;
				}
				restorePage = historyPopStack.pop();
				historyStack.push(currentURL);
				loadWebsite(restorePage, false);
			}

			function loadWebsite(targetURL, writeRestoreRecord = true){
				if (writeRestoreRecord && currentURL != targetURL){
					historyPopStack = [];
				}
				
				//Handle special case
				if (targetURL == "about:blank"){
					$("#xframe").attr("src", "blank.html");
					$("#urlText").val(targetURL);
					if (writeRestoreRecord && currentURL != targetURL){
						historyStack.push(JSON.parse(JSON.stringify(currentURL)));
					}
					currentURL = targetURL;
					return;
				}

				//Filter the URL if required
				if (targetURL.substr(0,4) != "http"){
					if (location.protocol !== "https:"){
						//This page is currently loaded in http mode. Add http:// to it
						targetURL = "http://" + targetURL;
					}else{
						targetURL = "https://" + targetURL;
					}
				}

				$("#urlText").val(targetURL);
				if (writeRestoreRecord && currentURL != targetURL){
					historyStack.push(JSON.parse(JSON.stringify(currentURL)));
				}
				currentURL = targetURL;
				

				//Check if the website allow iframe
				checkIfAllowIframing(targetURL, function(allowIframe, redirectTarget){
					if (allowIframe == null){
						$("#xframe").attr("src", "notfound.html#" + targetURL);
					}else{
						if (allowIframe == true){
							$("#xframe").removeAttr("srcdoc");
							$("#xframe").attr("src", targetURL);
						}else{
							proxyWebContent(targetURL, function(content){
								$("#xframe").attr("src", "");
								$("#xframe").attr("srcdoc", content);
							
							});
							//alert("Target website do not allow embedding");
						}

						if (redirectTarget != undefined && redirectTarget != ""){
							$("#urlText").val(redirectTarget);
						}
					}
				
				});
			}


			function proxyWebContent(url, callback){
				ao_module_agirun("Browser/functions/proxy.js", {
					url: url,
				}, function(data){
					callback(data);
				});
			}

			//Check if a website can be directly embedded as iframe, can return true / false /null (site not exists)
			function checkIfAllowIframing(url, callback){
				ao_module_agirun("Browser/functions/getHeader.js", {
					url: url
				}, function(data){
					let xFrameOptions = JSON.parse(data);
					let header = xFrameOptions.header.toLowerCase().trim();
					let location = xFrameOptions.location;
					if (header == "null"){
						//Site not exists
						callback(null);
					}
					
					
					if (xFrameOptions.header == "sameorigin" || xFrameOptions.header == "deny"){
						//This webpage do not allow iframeing
						callback(false, location);
					}else{
						//This webpage allow iframing. Show it
						callback(true, location);
					}
				}, undefined, 5000)
			}
		</script>
	</body>
</html>