The information you’re about to submit is not secure

Google Chrome just started rolling out a change for the last 2 days which prevents users from submitting forms due to “secure connection” errors.

The information you’re about to submit is not secure
Because the site is using a connection that’s not completely secure, your information will be visible to others.

The issue has been reported to Chromium project and you can follow updates at https://bugs.chromium.org/p/chromium/issues/detail?id=1158169.

Rollback

The change is being rolled back as the Chrome team saw the unexpectedly large impact it caused and scenarios they may have not considered. However it’s planned to be deployed once again in Chrome 88, expected to be release 21st of January.

Reproduce

You can reproduce the issue by going `chrome://flags` and enabling `Mixed forms interstitial`.

Background

This is part of the continuous efforts by the Chrome team to improve the internet’s at wide security, by blocking form submissions through unsecured channels.

Issue

The specific solution will depend on your application, but in general:

• Ensure all forms submit to a secure HTTPs endpoint
• Ensure there’s no follow up redirects going through HTTP.

It’s very common for applications to make a 302 redirect after login to the destination page, and its also common to configure applications behind a load balancer and/or Cloudflare. All these combined may cause your application to misinterpret it should be running with HTTPs enabled and all urls should be secured, a single step through the form submission going through HTTP can cause the error message.

Common Scenario:

• 200 POST /login (HTTPs) -> redirect to /home
• 302 GET /home (HTTP)
• Error: `The information you’re about to submit is not secure`

Work Arounds:

Applications:

Drupal/Symphony: Configure the reverse proxy settings, for Drupal update settings.php with the code below and adjust as needed

$settings['reverse_proxy'] = TRUE;
$settings['reverse_proxy_addresses'] = ['1.2.3.4']; //TO REPLACE
$settings['reverse_proxy_trusted_headers'] = \Symfony\Component\HttpFoundation\Request::HEADER_X_FORWARDED_ALL;

Django: add to settings.py

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

Feel free to share fixes to other applications in the comment section.

Web Server:

HaProxy: frontend configuration

http-response replace-value Location ^http://(.*)$ https://\1

HaProxy: backend configuraration

http-response set-header location %[res.hdr(location),regsub(http://,https://)] if { status 301 302 }

Nginx: add the code block below in your server {} block, in the location handling application code e.g. location ~ \.php$ {

proxy_set_header HTTP_X-Forwarded-Proto "https";
proxy_set_header HTTP_X-Forwarded-Port "443

or this if you’re using fastcgi

fastcgi_param HTTP_X-Forwarded-Proto "https";
fastcgi_param HTTP_X-Forwarded-Port "443";

Apache: add the line below

Header edit Location ^http://(.*)$ https://$1

IIS: remove the block below

<rule name="Add WWW" stopProcessing="true">
          <match url="^(.*)$"/>
          <conditions>
            <add input="{HTTP_HOST}" pattern="^(?!www\.)(.*)$"/>
          </conditions>
          <action type="Redirect" url="http://www.{C:0}{PATH_INFO}" redirectType="Permanent"/>
        </rule

Serverless/Cloudflare/Lambda@Edge

Ingenious solution by Mark from oldstlabs.com, use functions at the edge to intercept the requests before the web server and ensure all redirects (using Location header) use HTTPs. Good solution if you’re in a rush and may not be able to fix your applications in a timely manner.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
  let response = await fetch(request)
  let newHeaders = new Headers(response.headers)
  if (newHeaders.has("Location")) {
    let new_loc = newHeaders.get("Location").replace("http:", "https:")
    newHeaders.set("Location", new_loc)
  }
  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  })
}

All these solutions are summarized from the issue mention in the first paragraph. Don’t rush to copy paste code if you don’t understand it and you’re not able to test it properly before going live.

Future proof your applications:

The browsers will only become more strict as more people gain access to the internet and would otherwise be easily prayed upon, you should prepare your application by automatically testing it against newer browser versions. One way to do that would be to setup nightly end-to-end (E2E) tests using a test framework such as Cypress, and run the tests against multiple browser versions, Chrome offers Stable, Beta, Dev and Canary releases.

Shameless plug: manage your Mysql servers using Ansible, create databases and users, update grants, etc. Ensure all your configuration is properly code versioned and peer reviewed.