chrome bootstrap net::ERR_INSECURE_RESPONSE

Question

I currently have the following PHP file hosted for free through byethost:

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
try {
  if(array_key_exists('id',$_SESSION) && !empty($_SESSION['id'])) {
    header("Location: ../../search.php");
    exit();
  }
} catch (Exception $e) {
  echo 'Caught exception: ',  $e->getMessage(), "\n";
}
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
    <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
  </head>
  <body>
    <!-- modal -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Forgot Password</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form class="modal-body">
            <div class="form-group">
              <label class="control-label">Email Address</label>
              <input class="form-control" name="email" type="email" required="required" />
            </div>
          </form>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Email Password</button>
          </div>
        </div>
      </div>
    </div>

    <!-- main -->
    <div class="container">
      <div class="row justify-content-md-center justify-content-lg-center">
        <form action="/assets/php/login.php" class="col-md-8 col-lg-6 align-self-center" method="post" role="form" style="margin-top: 5em;">
          <fieldset>
            <legend class="text-center border border-primary border-left-0 border-right-0">Account Login</legend>
            <div class="alert alert-danger alert-dismissible fade show text-center d-none" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              Invalid login. Username and/or password is incorrect.
            </div>
            <div class="form-group">
              <label class="control-label">Email Address</label>
              <input class="form-control" name="email" type="email" required="required" />
            </div>
            <div class="form-group">
              <label class="control-label">Password</label>
              <input class="form-control" name="password" type="password" required="required" />
            </div>
            <div class="form-group">
              <input class="btn btn-lg btn-primary btn-block" type="submit" value="Log In" />
            </div>
          </fieldset>
          <a href="#" data-toggle="modal" data-target="#frmForgotPassword">Forgot Password?</a>
        </form>
      </div>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

I'm having an issue where, only on Chrome, my scripts and stylesheets will not load. I get the following error:

GET https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css net::ERR_INSECURE_RESPONSE
index.php:63 GET https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js net::ERR_INSECURE_RESPONSE
bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
index.php:6 GET https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css net::ERR_INSECURE_RESPONSE

What I don't understand is that I'm directly copying and pasting the CDNs from the twitter-bootstrap get started page, my PHP code executes as expected, and in every browser but Chrome it loads bootstrap, popper, and jQuery properly.

Why is it that, only in Chrome, it fails to load them?

Update - My current version of Chrome is 61.0.3163.91

Update #2 - Apparently, this is something specific to Chrome because whenever I plug in my code to a fiddle in codepen, the same thing happens.

Possible duplicate of [Failed to load resource: net::ERR\_INSECURE\_RESPONSE](https://stackoverflow.com/questions/23688565/failed-to-load-resource-neterr-insecure-response) — ProEvilz, Sep 21 '17 at 16:31
I am not using an iFrame nor am I experiencing the valid security certificate error on Internet Explorer. The url is not an HTTPS but an HTTP and I've also restarted my browser. So while it is the same error message, the details surrounding them are not the same nor did any of the solutions solve the issue. Not a duplicate. — David, Sep 21 '17 at 16:37

chrome bootstrap net::ERR_INSECURE_RESPONSE

0 Answers0