App does not load in Internet Explorer
We're building a web application that does not load in Internet Explorer (tested with several versions, mainly with Windows 7 + IE 10 fully patched).
Even the login page at https://mailapp.co does not load and displays the laconic
This page can't be displayed
•Make sure the web address https://mailapp.co is correct.
•Look for the page with your search engine.
•Refresh the page in a few minutes.
The web app, which runs Node.js v0.10.25, loads in all other major browsers (Firefox, Chrome, Safari and Opera).
We tested with Fiddler, and we get a proper HTTP request and answer a proper HTTP response with what seems a valid HTML5 page.
HTTP request is:
GET https://mailapp.co/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-US
User-Agent: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: mailapp.co
DNT: 1
Connection: Keep-Alive
Cookie: ec=7g2c35tl5wbxkszmjokf9pamgaip4c75; ic=hoglks876bjkfxx2ker7i381mnektmz9
(note that the cookie indicates that Internet Explorer was indeed able to communicate with the server, and could at least read response headers of previous requests)
The HTTP response sent (as seen by Fiddler) is:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Date: Mon, 03 Nov 2014 21:02:07 GMT
Server: https
Content-Type: text/html; charset=utf-8
Set-Cookie: ec=7g2c35tl5wbxkszmjokf9pamgaip4c75; expires=Mon, 03 Nov 2014 21:16:31 GMT; path=/
Set-Cookie: ic=hoglks876bjkfxx2ker7i381mnektmz9; expires=Mon, 03 Nov 2014 21:16:31 GMT; path=/
Connection: keep-alive
Content-Length: 3881
And the HTML page is:
<!DOCTYPE html><html><head><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="/_internal_/dynamic_resource/lib/stdlib/themes/bootstrap/bs-resources/3.2.0/css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="/resources/css/theme.css"/><link rel="stylesheet" type="text/css" href="/resources/css/tablesorter.css"/><link rel="stylesheet" type="text/css" href="/resources/css/jquery-ui-bootstrap/jquery-ui-1.9.2.custom.css"/><link rel="stylesheet" type="text/css" href="/resources/css/jquery.fileupload/jquery.fileupload-ui.css"/>
<!--[if lt IE 9]>
<script src="/resources/js/html5shiv.min.js"></script>
<![endif]--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="/resources/css/style.css?v=1415034398289"/>
<link rel="stylesheet" type="text/css" href="/resources/css/icons.css?v=1415034398289"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/resources/css/jquery-ui-bootstrap/jquery-ui-1.9.2.ie.css"/>
<![endif]--><title>PEPS</title><script type="text/javascript">var page_server = 4848982584983552; var page_lang = "en";</script></head><body id="Body"><div id="main" class="main o-selectable narrow">
<div id="notification_area" class="o-selectable"></div><div class="home-page">
<div class="home-tagline">
<h1><i class="fa fa-envelope"></i> PEPS</h1>
</div>
<div class="card">
<h3>Sign in to your mailbox</h3>
<div id="login" class="well"><div id="loginbox">
<iframe src="/_internal_/null" id="loginbox__iframe" name="loginbox__iframe" width="0" height="0" style="visibility:hidden;display:none;width:0px;height:0px;opacity:0;"></iframe>
<form target="loginbox__iframe" method="post" action="/_internal_/null" name="loginbox__form" id="loginbox__form" autocomplete="on" role="form">
<span id="loginbox_not_logged" style="">
<div class="form-group">
<input id="loginbox_username" type="text" autocomplete="on" name="loginbox_username" placeholder="username" class="form-control"/>
</div>
<div class="form-group">
<input id="loginbox_password" type="password" autocomplete="on" name="loginbox_password" placeholder="password" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</span>
</form>
<span id="loginbox_logged"></span>
<span id="loginbox_unlogged"></span>
</div></div>
</div>
</div></div><footer id="footer" class="footer">
<div class="container">
<span class="copyright">
</span>
</div>
</footer><script src="/_internal_/fcd3eed4b25df421e8c8878591719ea3/code/all.js" type="text/javascript"></script><script src="/resources/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script><script src="/resources/js/jquery.tokeninput.js" type="text/javascript"></script><script src="/resources/js/mail.js?v=1415034398289" type="text/javascript"></script><script src="/resources/js/bootstrap-contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$(function(){var event = _B;_Dd(_A("{"srv_id":"jksaoxkxzyrtlqqfrdabwt"}",{"TyArrow_res":{"TyName_ident":"void","TyName_args":{"nil":_C}},"TyArrow_params":{"tl":{"nil":_C},"hd":{"TyName_ident":"Dom.event","TyName_args":{"nil":_C}}}}))(_F(event))});
$('#loginbox__form')
.bind('submit',(function(event){_f(_A("{"srv_id":"efaailcmsbmngehlfjzkwu"}",{"TyArrow_res":{"TyName_ident":"void","TyName_args":{"nil":_C}},"TyArrow_params":{"tl":{"tl":{"nil":_C},"hd":{"TyConst":{"TyString":_C}}},"hd":{"TyConst":{"TyString":_C}}}}),"loginbox")(_F(event))}))
$(function(){var event = _B;_e({"TyConst":{"TyString":_C}},{"TyConst":{"TyString":_C}})("loginbox_username","username")(_F(event))});
$(function(){var event = _B;_g({"TyConst":{"TyString":_C}},{"TyConst":{"TyString":_C}})("loginbox_password","password")(_F(event))});
//]]>
</script>
</body></html>
Strangly enough, I blogged about an issue you're hitting recently in my IEInternals post on Web Compression.
You're using Content-Encoding: deflate and sending the 2-byte ZLIB header on the DEFLATE content. Internet Explorer can't handle that. Use either Content-Encoding: gzip or remove the 2-byte ZLIB header.