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

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

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

Ответ 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>

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

Ответ 2

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

Если мы посмотрим на неправильный отраслевой внешний javascript, включенные в него, успешные используют как document.location.protocol sniffing, так и script element injection tu используют соответствующий протокол.

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

<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, если он есть, в противном случае вы все равно можете получить предупреждение "смешанное безопасное и небезопасное"....

Ответ 3

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

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

Ответ 4

В противовес экранированному отклику (который также будет работать) вы можете пропустить эту часть и использовать правильный способ добавления узлов в дерево 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>

Но путь к общему протоколу был бы способом.