Pomimo zakupu i zainstalowania certyfikatu po wejściu na stronę przy użyciu adresu https://… obserwujesz przynajmniej jeden z poniższych problemów:
- wyświetla się przekreślona kłódka przy pasku adresu
- przeglądarka informuje że połączenie HTTPS nie jest bezpieczne
- zawartość strony się nie wyświetla lub wyraźnie brakuje na niej pewnych elementów
Spowodowane jest to nie przystosowaną budową kodu Twojej strony WWW do działania z wykorzystaniem bezpiecznych połączeń HTTPS.
Rozwiązanie
Wszelkie materiały publikowane na Twojej stronie muszą uwzględniać aktualny wybrany protokół (HTTP lub HTTPS). Jeżeli strona wykorzystuje https to nie możesz w kodzie strony zamieszczać odwołań do kodu bez HTTPS:
Błędne ładowanie CSS/JS pod HTTPS:
<link rel="stylesheet" type="text/css" href="http://nazwa-moje-domeny.pl/styl.css">
<script src="http://nazwa-moje-domeny.pl/jquery-1.9.1.min.js" ></script>
Błędne ładowanie obrazków pod HTTPS:
<img src="http://nazwa-moje-domeny.pl/grafika.jpg" />
Błąd polega na odwoływanie się do elementów z użyciem http://... zamiast https://... W efekcie połączenia nie są w pełni szyfrowane, ponieważ w części requestów do serwera zapytania idą nie szyfrowane.
Rozwiązanie nr 1 (adres bezwzględny)
Jeżeli posiadasz certyfikat możesz odwoływać się bezpośrednio do HTTPS i w tedy zawsze elementy dołączane do strony będą wykorzystywać połączenia szyfrowane. Wadą tego rozwiązania jest to, że jeśli wygaśnie Twój certyfikat lub zdecydujesz się go nie przedłużać, ponownie będziesz zmuszony do przebudowania strony i zamienić wszystkie odwołania z HTTPS na HTTP
Prawidłowo ładowanie CSS/JS zarówno pod HTTPS jak i HTTP:
<link rel="stylesheet" type="text/css" href="https://nazwa-moje-domeny.pl/styl.css">
<script src="https://nazwa-moje-domeny.pl/jquery-1.9.1.min.js" ></script>
Prawidłowo ładowanie styli obrazków:
<img src="https://nazwa-moje-domeny.pl/grafika.jpg" />
Rozwiązanie nr 2 (adres relatywny - zalecane)
Najlepszym rozwiązaniem jednak jest nie linkowanie bezpośrednio do protokołu - czyli zrezygnować z podawania w kodzie strony odwołania do naszej domeny i protokołu i zastąpić je odwołaniami relatywnymi, dzięki temu strona będzie działała prawidłowo zarówno pod HTTP jak i HTTPS. Odwołanie relatywne to takie, w którym nie podajemy adresu domeny - ten jest pobierany bezpośrednio przez przeglądarkę z aktualnego adresu w pasku przeglądarki.
Budowa adres relatywnego wygląda następująco: adres w pasku przeglądarki + adres w linkowanym elemencie.
Przykładowo jeśli w oknie przeglądarki jest adres
http://nazwa-mojej-domeny.pl/folder/
zaś element img wygląda następująco:
<img src="grafika.jpg" />
Przeglądarka będzie pobierała grafika.jpg z adresu
http://nazwa-mojej-domeny.pl/folder/grafika.jpg
Jeżeli zaś element img będzie wyglądał następująco (ukośnik na początku adresu grafiki):
<img src="/grafika.jpg" />
Wymusimy wczytanie grafiki z adresu:
http://nazwa-mojej-domeny.pl/grafik.jpg
Analogicznie przeglądając stronę pod HTTPS przeglądarka automatycznie wczyta wybrane elementy z wykorzystaniem SSL czyli:
https://nazwa-mojej-domeny.pl/grafik.jpg
Prawidłowe ładowanie CSS/JS:
<link rel="stylesheet" type="text/css" href="czerwony.css">
<link rel="stylesheet" type="text/css" href="/css/styl.css">
<script src="/js/jquery-1.9.1.min.js" ></script>
Więcej o budowie adres bezwzględnego znajdziesz na stronie wikipedia: https://pl.wikipedia.org/wiki/Adres_bezwzględny