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

01K

Постоялец
Регистрация
27 Июн 2013
Сообщения
587
Реакции
105
Всем привет!
Есть сайт на 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 - ни в какую.

Собственно, как правильно решить данную проблему, не прописывать ведь полный путь начиная с Для просмотра ссылки Войди или Зарегистрируйся..... ?

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

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

01K

Постоялец
Регистрация
27 Июн 2013
Сообщения
587
Реакции
105
Не совсем понял:
Что касается ссылок на Ваш же сайт - вставляйте символические ссылки вида:
полная ссылка
http:\\mysite.com\image\image1.jpg

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

Так полную ссылку использовать или второй вариант?

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

romas_s

Гуру форума
Регистрация
9 Ноя 2012
Сообщения
252
Реакции
75
Для картинок в том же каталоге советуют добавлять два слэша:
2). Для картинок, находящихся уровнями выше:
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)
Откройте исходный код сайта 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:\\ протокол и почти все будет гуд. останется только прописать условные ссылки с татьях
 
Последнее редактирование:

vanillaa

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

Пендель

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

То есть если ссылка на странице Для просмотра ссылки Войди или Зарегистрируйся, то она откроется по https, иначе - http

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

garphild

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

dimakot

Создатель
Регистрация
5 Окт 2014
Сообщения
11
Реакции
0
// , devtools и принудительный редирект на сервере
 

dimakot

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

neonz

Писатель
Регистрация
19 Сен 2015
Сообщения
3
Реакции
0
Всем привет! Есть сайт на 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 файлов множество ссылок на свои картинки, шрифты...

Можно rewrite rules прописать на nginx, а можно и регуляркой mysql заменить все ссылки на картинки. И тот и другой вариант достаточно прост.
Вообще из бест-практис, когда денег жалко на cdn создаешь субдомен, раскладываешь там всё по папочкам и делаешь ссылки на этот поддомен. Картинки лучше раздваать nginx + скритом который их ресайзит под необходимый размер и кеширует все это на сервере.
 
Сверху