CloudFlare Proxy

If I make use of CloudFlare as a reverse proxy for the Manager server, I get this:

<!DOCTYPE html><html moznomarginboxes mozdisallowselectionprint><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Login - Manager</title><link rel="shortcut icon" href="/resources/favicon.ico"><link rel="apple-touch-icon" href="/resources/icon-iphone.png"><link rel="apple-touch-icon" sizes="72x72" href="/resources/icon-ipad.png"><link rel="apple-touch-icon" sizes="114x114" href="/resources/icon-iphone4.png"><link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.css?17.9.14.0" /><link rel="stylesheet" type="text/css" href="resources/theme.css?17.9.14.0" /><style>ul, ol { padding-left: 10px }.float-left { float: left !important; }.float-right { float: right !important; }.text-align-left { text-align: left !important; }.text-align-right { text-align: right !important; }div.content { background-color: #fff; padding: 30px; box-shadow: 0px 0px 5px #ccc; border: 1px solid #ccc; width: auto }a.file-close:hover { color: #999; }#sidenav div { padding: 0px; background-color: #fafafa; box-shadow: inset 1px 1px 0px #fff; }#sidenav img { opacity: 0.4; vertical-align: top; width: 16px; height: 16px }#sidenav .tab-active { background-color: #fff; border-right: none }#sidenav a.tab-link, #sidenav span.tab-link { line-height: 16px; display: block; white-space: nowrap; padding: 12px; font-size: 11px; font-weight: bold }#sidenav table { border: 1px solid #ccc; border-top: none; font-family: 'Lucida Grande',Verdana,sans-serif; border-spacing: 0px; width: 100% }#sidenav .tab-active table { border-right: 1px solid #fff }#sidenav a:hover { text-decoration: none }#sidenav a:hover img { opacity: 0.6 }#sidenav .tab-active img { opacity: 0.6 }#sidenav span.count { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; color: #666666; font-size: 10px; font-weight: bold; padding: 3px 6px; }#sidenav span.count-zero { border: 1px solid #EEEEEE; color: #DDDDDD }#sidenav span.tab-label { margin-left: 10px; }@media print { body { -webkit-print-color-adjust: exact !important; } }</style><link rel="stylesheet" type="text/css" href="resources/custom.css?17.9.14.0" /></head><body style="background: #eee url('resources/noise.png')"><noscript><div class="print-display-none" style="background-color: yellow; padding: 10px; text-align: center; font-weight: bold; border-bottom: 1px solid #ccc; font-size: 16px">Javascript Error</div></noscript><div class="print-reset" style="padding: 35px; padding-top: 35px"><div style="width: 600px; margin: 0 auto"><div style="margin-top: 50px; padding: 50px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); border: 1px solid #ccc"><form method="POST"><div class="page-header" style="margin: 0px; margin-bottom: 20px; padding-bottom: 20px;"><h3 style="margin: 0px">Login</h3></div><div class="form-group"><label>Username</label><input type="text" class="form-control" name="Username" tabindex="1" value="administrator" autofocus /></div><div class="form-group"><label>Password</label><input type="password" class="form-control" name="Password" tabindex="2" autofocus /></div><div class="form-group" style="margin-top: 20px"><input type="submit" class="btn btn-primary" style="font-weight: bold" tabindex="3" value="Login" /></div></form></div><script type="text/javascript">var help = false;function toggleHelp() {

help = !help;
document.cookie = 'help='+help.toString();

if (help)
{
    document.getElementById('help-btn').style.color = '#999';
    document.getElementById('btn-image-off').style.display = 'none';
    document.getElementById('btn-image-on').style.display = 'inline';
    document.getElementById('help-links').style.display = 'block';
    document.getElementById('help-placeholder').style.display = 'none';
}
else
{
    document.getElementById('help-btn').style.color = '#ccc';
    document.getElementById('btn-image-off').style.display = 'inline';
    document.getElementById('btn-image-on').style.display = 'none';
    document.getElementById('help-links').style.display = 'none';
    document.getElementById('help-placeholder').style.display = 'block';
}

}</script></div><style>.input-group .select2-container .select2-choice { border-bottom-left-radius: 0; border-top-left-radius: 0 }.select2-container .select2-choice { height: 30px; line-height: 30px }.select2-container .select2-choice .select2-chosen { font-size: 12px; color: #555 }.select2-container .select2-choice.select2-default .select2-chosen { color: #ccc }.select2-container, .select2-drop { font-size: 12px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }.select2-container .select2-choice { background-image: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset }.select2-container .select2-choice { border: 1px solid #ccc }.select2-container-active .select2-choice { border: 1px solid #5897FB }.select2-container .select2-choice .select2-arrow { background: none; border-left: none }table.input td input, table.input td select, table.input td .select2-container { margin-bottom: 0px }.alert { box-shadow: 1px 1px 0 #fff inset; }.panel-heading .label { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset; }.panel-default { min-width: 0px; }.tt-suggestions { font-size: 12px; }</style></div></body></html>

I assume something isn’t set right, that cloudflare isn’t rendering the HTML but displaying it. The browser shows an enclosing html HEAD and BODY in the source, which kinda makes sense. It’s like it’s seeing this at a text doc to display, and not a site.

This is weird, because HAproxy which sets behind this works fine…

So my setup:
Manager server → HAProxy (Add’s ssl) → CloudFlare (Add’s certified SSL and offloads some load from my server)

Any Ideas?

NOTE: This doesn’t happen on FireFox… So maybe a Chrome issue?

Have a look at HTTP response headers CloudFlare is returning. Perhaps Content-Type header is missing? It should be text/html

By the way, what are you trying to achieve by putting CloudFlare in front of Manager Server?

Hmmmmm, so, if I look at the response headers in Chrome from CloudFlare, I see:

cache-control:no-store
cf-ray:3a8011d52db5805e-CPT
date:Tue, 03 Oct 2017 12:57:52 GMT
server:cloudflare-nginx
status:200
strict-transport-security:max-age=2592000
x-content-type-options:nosniff

However, if I look at the raw server response (i.e. Manager at :8080 on my server) then:

HTTP/1.1 200 OK
Cache-Control: no-store
Server: Mono-HTTPAPI/1.0
Date: Tue, 03 Oct 2017 12:55:19 GMT
Transfer-Encoding: chunked
Keep-Alive: timeout=15,max=100

Does that help anything?

Also, a few reasons.

  1. I would like to keep my server IP from being exposed, and let Cloudflare deal with some of the security stuff (DDOS and so on).
  2. They Cache some things, so I want to leverage that to take a tiny bit off my ISP connection.

Since it is only really myself who accesses the server, the 2nd point is a little moot.

It seems like /login page was really not returning Content-Type. Try the latest version (17.10.15) where it’s fixed.

100% working. Thanks Lubos!