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

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

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

4 73
javascript html css https

4 ответа:

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

не 
<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>

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

118

nute & James Westgate правы, когда приходят на более поздний ответ.

Если мы посмотрим на miscelanous отраслевой внешний javascript включает в себя, успешные из них используют оба документа.местоположение.протокол принюхиваясь и элемент сценария инъекций ту использовать соответствующий протокол.

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

<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, если таковые имеются, в противном случае вы все равно можете получить предупреждение "mixed secure and unsecure"....

7

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

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

0

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

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

0