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

[01K]

Всем привет!
Есть сайт на 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]

если будете вставлять любой контент с 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]

Не совсем понял:

Что касается ссылок на Ваш же сайт - вставляйте символические ссылки вида:
полная ссылка
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]

Для картинок в том же каталоге советуют добавлять два слэша:

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]

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

Правильно будет без слеша в начале

 

[Пендель]

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

Когда URL пишешь с // - браузер грузить этот адрес по тому протоколу, через который открыта данная страница

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

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

 

[garphild]

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

 

[dimakot]

// , devtools и принудительный редирект на сервере

 

[dimakot]

ISP это хороший вариант, но для хостинга, а если счастливый обладатель vds(vps) - там бывают сложности.

 

[neonz]

Всем привет! Есть сайт на 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 + скритом который их ресайзит под необходимый размер и кеширует все это на сервере.