Як включити файли CSS та JS через HTTPS за потреби?

78

Я додаю зовнішній файл CSS та зовнішній файл JS до своїх колонтитулів. Завантажуючи сторінку HTTPS, деякі браузери скаржаться, що я завантажую незахищений вміст.

Чи є простий спосіб змусити браузер завантажувати зовнішній вміст через HTTPS, коли сама сторінка є HTTPS?

— Натан Х.
джерело

125

Використовуйте відносно протокольні шляхи.

Отже, ні

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

тоді він буде використовувати протокол батьківської сторінки.

— БалусC
джерело

4

Це проблема для браузера. Немає інших способів вирішити це надійно, ніж зробити це повністю на стороні сервера, використовуючи можливості розглянутої технології перегляду.

— BalusC,

1

Як додаткове зауваження, якщо ви подбаєте про правильні записи кешування в заголовках відповідей, браузери не завантажуватимуть їх для наступних запитів до закінчення терміну дії, включаючи IE.

— BalusC,

Я б сказав, що завжди використовуйте https://ресурси, якщо вони є. Вони завантажуватимуться на вашій сторінці чудово, незалежно від схеми

— Філ

@Phil: ні, якщо цільове середовище не підтримує HTTPS, як правило, під час розробки на localhost.

— BalusC

@BalusC "... коли доступно ..."

— Філ

7

nute та James Westgate мають рацію, коментуючи наступну відповідь.

Якщо ми подивимось на різноманітні галузеві зовнішні компоненти javascript, то для успішних використовуються як sniffing документа.location.protocol, так і введення елементів сценарію, щоб використовувати відповідний протокол.

Тож ви можете використовувати щось на зразок:

<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, якщо такий є, інакше ви все одно можете отримати попередження "змішане безпечне та незахищене" ....

— Ален БЕКЕР
джерело

Це лише те, що ви повинні враховувати, вирішуючи, яку технологію використовувати. Якщо ви не можете зробити це на стороні сервера, і вам потрібно перейти через хости, тоді у вас немає іншого варіанту.

— Джефф,

1

Якщо ви використовуєте відносні шляхи (а вміст знаходиться в тому самому домені), тоді вміст повинен використовувати той протокол, у якому сторінка була запитана.

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

— Джеймс Вестгейт
джерело

Ми переходимо через домен. Чи використовував би javascript для написання роботи з включенням? Якщо document.location.protocol тоді ...

— Nathan H

Спроба використання js, вставляючи розмітку в тег HEAD, можливо, простий document.write всередині тегу скрипта .. <HEAD> <SCRIPT> document.write ('<SCRIPT src =' + document.location.protocol ...

— James Westgate

1

Цей підхід застосовується кодом Google Analytics, він просто робить document.write з протоколом сторінки, що містить.

— Джефф,

"вам потрібно буде використовувати скрипт на стороні сервера" - чому? Кешування? Проблеми з XSS? Браузери?

— mlhDev

Здається, я мав на увазі шляхи відносних протоколів, коли відповідав на запитання, але не можу бути впевненим. Я знаю, що IE8 і нижче мають проблему кешування з відносними шляхами протоколу, які слід перевірити. Я б не виписував кожен ресурс за допомогою сценарію, якщо ви зацікавлені в продуктивності, це може спричинити всілякі проблеми з асинхронізацією та блокуванням.

— James Westgate

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>

Але шлях, який стосується протоколу, був би таким шляхом.

— gkempkens
джерело