1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

https - пути в css и решения для корректных адресов

Тема в разделе "Web Coding", создана пользователем 01K, 23 ноя 2017.

Модераторы: latteo
  1. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    552
    Симпатии:
    86
    Всем привет!
    Есть сайт на Jooml'е + cdn от NoNumber, который грузил статику с суб-домена.
    Присутствует множество лэндингов со своими шаблонами. В частности на псевдо-CDN загружено много CSS файлов, в которых указаны пути для картинок вида:
    Код:
    background-image: url(../img/05-block/00-bg.jpg);
    Всё работало нормально, до момента перехода на https.
    Соответственно, много ошибок:
    Код:
    Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure image
    или вообще 404 (Not Found)
    
    Что я выяснил:
    1). Для картинок в том же каталоге советуют добавлять два слэша:
    Код:
    background-image: url(//img/05-block/00-bg.jpg);
    2). Для картинок, находящихся уровнями выше:
    Код:
    background-image: url(//../img/05-block/00-bg.jpg);
    Если в Firefox это ещё работало, то в Chrome и тем более IE - ни в какую.

    Собственно, как правильно решить данную проблему, не прописывать ведь полный путь начиная с https://..... ?

    + на сайте много сторонних JS библиотек, внутри их CSS/JS файлов множество ссылок на свои картинки, шрифты...
     
  2. romas_s

    romas_s

    Регистр.:
    9 ноя 2012
    Сообщения:
    252
    Симпатии:
    75
    если будете вставлять любой контент с http:\\ на сайте https:\\ доже через \\- будет отображаться предупреждение что данная страничка может нанести вред вашему ПК.

    Что касается ссылок на Ваш же сайт - вставляйте символические ссылки вида:
    полная ссылка
    http:\\mysite.com\image\image1.jpg

    нужно вставлять \image\image1.jpg

    + данного метода - нет привязки к домену и к используемому протоколу

    background-image: url(//img/05-block/00-bg.jpg);
    правильно - background-image: url(../img/05-block/00-bg.jpg);

    background-image: url(//../img/05-block/00-bg.jpg);
    правильно будет background-image: url(../../img/05-block/00-bg.jpg);
     
    01K нравится это.
  3. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    552
    Симпатии:
    86
    Не совсем понял:
    Так полную ссылку использовать или второй вариант?

    Правильно ли так указывать "прямой" путь:
    Код:
    src="templates/landing-page-template/02-block/header.png"
    ?
    Если добавляю слэш в начало пути, то кидает предупреждение:
    Код:
    src="/templates/landing-page-template/02-block/header.png"
     
  4. romas_s

    romas_s

    Регистр.:
    9 ноя 2012
    Сообщения:
    252
    Симпатии:
    75
    Скорее всего совет какого то дилетанта.
    Откройте исходный код сайта Ctrl+U
    через поиск вбейте http:\\ - найдите ссылки который имеют такой вид. - нужно их изменить по примеру ниже.
    Данная ошибка говорит о том что некоторые ссылки используют http:\\ протокол.
    Возможно в basedir CMS прописан корень сайта с использованием http:\\ протокола
    картинка templates/landing-page-template/02-block/header.png
    если css файл находится в папке templates/landing-page-template/css/template.css
    background-image: url(../templates/landing-page-template/02-block/header.png);
    /*
    ../ - значит что поднимаемся на папку выше и ищем там папку 02-block и далее ищем файл header.png
    ../../ - на 2 уровня выше
    если картинка в той же папке что и файл, в котором прописываем url картинки, то:
    background-image: url(templates/landing-page-template/02-block/header.png);
    */

    Полные ссылки (http:\\mysite.com\.....) НЕ ИСПОЛЬЗОВАТЬ, только относительные ссылки!!

    Если используете CMS Joomla - то в общих настройках нужно выбрать https:\\ протокол и почти все будет гуд. останется только прописать условные ссылки с татьях
     
    Последнее редактирование: 24 ноя 2017
  5. vanillaa

    vanillaa Создатель

    Регистр.:
    13 ноя 2017
    Сообщения:
    11
    Симпатии:
    4
    Правильно будет без слеша в начале
     
  6. Пендель

    Пендель Создатель

    Регистр.:
    16 апр 2014
    Сообщения:
    11
    Симпатии:
    3
    Когда URL пишешь с // - браузер грузить этот адрес по тому протоколу, через который открыта данная страница

    То есть если ссылка на странице https://site.com/index.html, то она откроется по https, иначе - http

    И предупреждение от этого не зависит!
     
  7. garphild

    garphild Постоялец

    Регистр.:
    19 май 2009
    Сообщения:
    55
    Симпатии:
    31
    Была такая проблема. Решал так:
    Открыл девтулс в хроме во вкладку нетворк.
    Ctrl+F5 и потопал смотреть что грузится по http.
    Нашел две фишки. 1- картинка в бекграунде явно указана в http, 2 - внешний скрипт статистики с liveinternet был через http.
    Поэтому неплохо посмотреть для начала что именно вызывает Mixed Content
    Два слеша в начале не стоит делать. По https все должно работать также как и по http - т.е. относительные пути в норм. Поэтому смотри в девтулс.
    Также "В частности на псевдо-CDN загружено много CSS файлов, в которых указаны пути для картинок вида:" тоже нужно смотреть на предмет http и https. Именно сам псевдо-CDN
     
  8. dimakot

    dimakot Создатель

    Регистр.:
    5 окт 2014
    Сообщения:
    11
    Симпатии:
    0
    // , devtools и принудительный редирект на сервере
     
  9. dimakot

    dimakot Создатель

    Регистр.:
    5 окт 2014
    Сообщения:
    11
    Симпатии:
    0
    ISP это хороший вариант, но для хостинга, а если счастливый обладатель vds(vps) - там бывают сложности.