Как включить файлы CSS и JS через HTTPS при необходимости?

Question

Я добавляю внешний CSS-файл и внешний JS-файл в мои верхние и нижние колонтитулы. При загрузке страницы HTTPS некоторые браузеры жалуются, что я загружаю незащищенный контент.

Существует ли простой способ заставить браузер загружать внешний контент через HTTPS, если сама страница - HTTPS?

Answer 1

Использовать относительные к протоколу пути.

Таким образом, не

<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/script.js"></script>

но так

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

тогда он будет использовать протокол родительской страницы.

Answer 2

Нут и Джеймс Вестгейт правы, когда комментируют более поздний ответ.

Если мы посмотрим на неверное включение внешнего javascript промышленного класса, то в успешных будут использоваться как document.location.protocol sniffing, так и элемент scriptдля инъекций используйте правильный протокол.

Таким образом, вы можете использовать что-то вроде:

<script type="text/javascript">
  var protocol = (
      ("https:" == document.location.protocol) 
      ? "https" 
      : "http"
  );
  document.write(
      unescape(
          "%3Cscript"
              + " src='"
                  + protocol 
                  + "://"
                  + "your.domain.tld"
                  + "/your/script.js"
              + "'"
              + " type='text/javascript'
          + "%3E"
          + "%3C/script%3E"
      ) // this HAS to be escaped, otherwise it would 
        // close the actual (not injected) <script> element
  );
</script>

То же самое можно сделать для внешних включений CSS.

И, кстати:будьте осторожны, используйте только относительный путь url () в вашем CSS, если он есть, иначе вы все равно можете получить предупреждение «смешанный безопасный и ненадежный» ....

Answer 3

В отличие от экранированного ответа (который также будет работать), вы можете пропустить эту часть и использовать правильный способ добавления узлов в ваше dom-дерево:

<script type="text/javascript" language="javascript">
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", document.location.protocol + '//www.mydomain.com/script.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
</script>

Но путь к протоколу - это путь.

Answer 4

Если вы используете относительные пути (и контент находится в том же домене), то контент должен использовать тот протокол, в котором запрашивалась страница.

Однако, если вы переходите через домен к CDN или сайту ресурсов, или если вам нужно использовать абсолютные пути, вам нужно будет использовать серверный скрипт для изменения ссылок или всегда использовать https://