Am trecut blogul pe https

Poate unii dintre voi ați observat că de câteva zile, când intrați pe SunLog, vă apare sus, în bara de adrese, url-ul https://sunlog.ro, cu https în față, și cu un lacăt de o frumoasă culoare verde. Acest lucru înseamnă că blogul are un certificat digital iar conexiunea dintre el și browserul vostru este criptată.

trecerea la https

De ce ai nevoie de un certificat digital pentru site?

În mod normal, atunci când intrați pe pagina unui site, are loc un transfer de date între site-ul respectiv și browserul vostru, care se realizează „în clar”. Orice hacker sau virus care se interpune între browser și site are acces la aceste date și poate apoi să se folosească de identitatea voastră pe site-ul respectiv. Din acest motiv majoritatea site-urilor mari, serioase, cum sunt: Google, Facebook sau site-urile diferitelor bănci, unde utilizatorii au conturi sau pot realiza tranzacții financiare online, prezintă acest lacăt verde, semn că fluxul de date dintre voi și ele este criptat iar șansele ca cineva să vă spargă contul sunt mult mai mici. Totodată, certificatul digital de la baza acelui lacăt verde, fiind emis de o autoritate cunoscută, garantează în mod rezonabil identitatea site-ului în cauză, asigurându-vă că nu sunteți victima unei fraude de tip scam.

Totuși, de ce aș avea nevoie de un astfel de certificat pe un blog unde voi nu aveți cont și nu realizați tranzacții financiare? Ok, nu era absolut necesar să îl instalez. Dar un plus de siguranță nu strică niciodată, nu? În afară de asta, Google recomandă tuturor webmasterilor să folosească conexiuni criptate iar acum doi ani declarat chiar că prezența certificatului digital va fi considerat un semnal de ranking, adică te va ajuta să apari mai sus în rezultatele căutărilor (beneficii SEO).

trecerea la https

Cum se instalează un certificat digital pe site?

Un ghid complet în această direcție depășește cadrul articolului de față și cunoștințele mele, implicând o mulțime de detalii tehnice care să acopere toate cazurile posibile. În continuare însă vă voi spune cum am făcut eu pe acest blog.

Primul lucru pe care trebuie să-l faci în mod normal este să cumperi un certificat digital, pe care după aceea să-l activezi. Prețul unui certificat începe cam de la 5-10$ pe an și poate ajunge la sute de dolari, în funcție de ce alegi. Totuși, există și cel puțin doi furnizori de certificate gratuite, apăruți recent, în ultimii ani. Nu știu cum se face activarea efectivă, pentru că nu am studiat: toată partea asta mie mi-a făcut-o băiatul de la firma care îmi găzduiește de ani de zile blogul și care oferă certificate gratuite tuturor clienților lui, este o opțiune ce se poate activa din cPanel. Pe mine doar m-a întrebat dacă vreau să am https la blog și apoi mi l-a activat.

Corectarea imaginilor din articole

Mai departe însă începe distracția. Odată certificatul activ, blogul putea fi accesat cu https în față dar încă nu aveam acel lacăt verde iar browserul mă avertiza asupra faptului că blogul are conținut mixt. Ce înseamnă asta? Ca să fie prezent lacătul verde, trebuie ca toate resursele pe care le folosește site-ul (imagini, scripturi etc) să aibă adrese cu https și deci să fie la rândul lor criptate. Evident, dacă tu ai avut înainte un blog pe http, vei avea o mulțime de resurse în varianta http, pe care va trebui să le modifici.

De exemplu, toate imaginile din articole aveau adrese cu http în față. Ca să le modific, puteam căuta un plugin sau puteam încerca să modific direct baza de date. Deoarece prima opțiune e riscantă, neștiind ce face cu exactitate eventualul plugin pe care l-aș fi instalat, am optat pentru a doua. Am intrat în panoul de control al contului de găzduire, am accesat baza de date, i-am făcut inițial un backup pentru siguranță și apoi am rulat următoarele două comenzi, luate de pe css-tricks:

UPDATE wp_posts SET post_content = (Replace (post_content,'src="http://','src="//')) WHERE Instr(post_content,'jpeg') > 0 OR Instr(post_content,'jpg') > 0 OR Instr(post_content,'gif') > 0 OR Instr(post_content,'png') > 0;

UPDATE wp_posts SET post_content = (Replace (post_content,"src='http://","src='//")) WHERE Instr(post_content,'jpeg') > 0 OR Instr(post_content,'jpg') > 0 OR Instr(post_content,'gif') > 0 OR Instr(post_content,'png') > 0;

Acestea au ca rezultat înlocuirea codului HTML de forma <img src=”http://imagine”> din articole cu codul <img src=”//imagine”>, care face ca imaginea să fie încărcată folosind același protocol (http sau https) cu cel de pe pagina unde se inserează imaginea. Adică, renunțând să prefixăm adresa imaginii, se va folosi http dacă ne aflăm pe o pagină care începe cu http și https dacă ne aflăm pe o pagină care începe cu https.

Am mai adăugat două comenzi de la mine, pentru a modifica și linkurile spre imagini în același mod. Asta nu era necesar dar am vrut ca și atunci când cineva dă click pe o imagine pentru a o vedea mărită, imaginea să se deschidă într-o pagină cu https:

UPDATE wp_posts SET post_content = (Replace (post_content,'a href="http://sunlog.ro/wp-content/uploads','a href="//sunlog.ro/wp-content/uploads')) WHERE Instr(post_content,'jpeg') > 0 OR Instr(post_content,'jpg') > 0 OR Instr(post_content,'gif') > 0 OR Instr(post_content,'png') > 0;

UPDATE wp_posts SET post_content = (Replace (post_content,"a href='http://sunlog.ro/wp-content/uploads","a href='//sunlog.ro/wp-content/uploads")) WHERE Instr(post_content,'jpeg') > 0 OR Instr(post_content,'jpg') > 0 OR Instr(post_content,'gif') > 0 OR Instr(post_content,'png') > 0;

Până aici e clar, da? 😀 Ok, dacă nu vă pricepeți la WordPress, HTML și MySQL, iar ceea ce ați citit mai sus vi se pare scris în cea mai vorbită limbă din lume – adică limba chineză, că doar nu credeați că-i engleza, nu? – atunci mai bine apelați la ajutorul unei persoane competente, decât să stricați ceva pe acolo. Dar dacă vă pricepeți, cele patru comenzi elimină “http” de la începutul imaginilor (img) și a linkurilor spre imagini (href), indiferent că acestea sunt scrise cu ghilimele sau apostrof. În cazul meu, toate au fost scrise cu ghilimele, deci comenzile 2 și 4 au modificat zero articole.

Resursele de pe homepage

Odată corectate imaginile din articole, am trecut la verificarea resurselor de pe pagina principală (homepage). De fapt ordinea a fost invers, am început cu homepage și am continuat cu articolele, dar nu contează, sunt capitole separate și le puteți aborda în ce ordine vreți. Pe homepage a trebuit să renunț la contorul de trafic de la extreme tracking, cu părere de rău, pentru că era gratuit și îmi plăcea. Din păcate însă, nu avea variantă https așa că n-am avut ce-i face. Tot cu părere de rău am renunțat la imaginea cu poziția mea în ZeList. Nu de alta, dar mă peria destul de frumos:

sunlog in zelist

În cazul în care vă întrebați cum puteți depista resursele ce folosesc http și trebuie eliminate sau corectate, o metodă simplă e folosirea instrumentelor pentru dezvoltatori din browser. Activați-le apăsând tasta F12, mergeți la panoul Security și reîncărcați pagina: o să obțineți în stânga o listă cu toate resursele și o bulină verde sau un x roșu, în funcție de cum afectează ele securitatea paginii. În cazul în care totul este ok, o să obțineți o panoramă asemănătoare cu cea din a doua imagine.

În afară de acțiunile descrise mai sus, este posibil să fie necesară inspectarea atentă a fișierelor din tema blogului și eventualele module (pluginuri), pentru că și ele pot conține resurse nesigure. În cazul meu a trebuit să modific adresele fonturile definite în fișierul style.css, adăugând https în loc de http în fața lor.

Redirecționarea http –> https

După modificările de mai sus, blogul era deja în regulă: avertismentul de conținut mixt dispăruse iar lacătul verde strălucea minunat în bătaia razelor de soare ce cădeau pe monitor. Dar blogul putea fi accesat în continuare și pe vechea adresă, cea cu http. Nu că ar fi fost obligatoriu, dar dacă tot m-am apucat de-o treabă, s-o duc la bun sfârșit, nu? Ultimul pas a fost să mă asigur că fișierul .htaccess din directorul public_html de pe server conține următoarele trei linii (nota bene: dacă prima linie există deja în acel fișier, lucru foarte probabil, adăugați liniile 2 și 3 imediat sub ea):

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

care fac ca cititorii intrați pe orice pagină cu http să fie automat redirecționați pe aceeași pagină a blogului dar cu https în față. Aceste linii sunt valabile pentru servere de tip Apache. Dacă site-ul vostru se află pe un server de tip Nginx, găsiți instrucțiunile necesare pe blogul Yoast.

Rezultate și concluzii

Odată mutarea făcută, totul era proaspăt și verde. 🙂 Iar astăzi, la circa trei zile după modificări, deja apar cu https în Google. Singura problemă pe care am remarcat-o este că mi-a dispărut contorul de reacții pe Facebook la articolele mai vechi. Le-am scris celor de la Jetpack, care mi-au răspuns că n-au ce face, având în vedere că Facebook face distincția dintre adrese cu https și adrese cu http, iar cum eu am trecut de la http la https, contorul pentru noile adrese (cu https) a devenit zero. Așadar nu mai am afișat numărul de aprecieri, comentarii și distribuiri ale articolelor mai vechi, dar contorul funcționează bine pentru noile articole, de după trecerea la https.

Cât privește eventualele beneficii SEO sau de altă natură, o să vedem pe măsură ce trece timpul.

Comments
  1. Mie mi se pare a fi prea multa bataie de cap, asa ca la un moment dat am renuntat la idee.

  2. Ethos

    Este și nu e. Odată activat, ai de umblat puțin la widgeturi, la temă și la baza de date. După aceea e gata, nu mai ai de făcut nimic. La final zic că merită.

  3. la cat ma pricep eu, sigur stric ceva. mai astept pana sa fac pasul asta, chiar daca stiu ca mi-ar fi benefic. Sa-ti fie de bine!

  4. Ethos

    Mersi! Dar și dacă nu te pricepi, ai prieteni. Știu eu pe cineva care s-ar simți ok să te ajute! 😆

  5. Te-ai complicat.

    Pe de o parte, nu toţi au acces la baza de date ca să ruleze comenzi SQL.

    Pe de altă parte, după ce ai instalat certificatul, nu trebuie decât să adaugi în .htaccess reguli care să înlocuiască “http://” cu “https://”. Dacă nu ştii sau nu ai acces să modifici .htaccess, atunci există un plugin care face totul pentru tine: Really Simple SSL.

    Practic, întreg articolul tău se poate rezuma la:

    1. Obţine certificat.
    2. Instalează certificat.
    3. Instalează Really Simple SSL.

    Just my $0.02.

  6. Ethos

    Păi nu am știut de ce zici tu. Dar:

    Pe de o parte, dacă nu ai acces la baza de date, probabil mai bine nu te gândești la instalarea certificatului. Eu cred că e o chestie de bază să ai acces la componentele blogului tău, dacă-i al tău, iar dacă nu, înseamnă că ai o problemă mai mare decât certificatul digital, nu?

    Pe de alta, dacă ai fi citit cu atenție, ai fi văzut că am acces la htaccess, unde am și inserat niște reguli, dar la ultimul pas, după ce tot restul a fost rezolvat, ca să fie cât mai clean.

    În sfârșit, .htaccess nu m-ar fi putut ajuta cu nimic în cazul resurselor ce nu pot fi livrate prin TLS și deci la care a trebuit să renunț. Resurse ca imaginea de pe ZeList sau contorul de trafic. Deci acolo trebuia oricum lucru manul. Și e posibil să mai fie astfel de resurse, în funcție de tema și modulele fiecăruia.

    Iar ca să instalez un plugin ar fi însemnat să-i studiez minuțios codul. Am căutat câteva, la unele scria că nu sunt actualizate de peste 2 ani, n-am vrut să mă risc. În timp ce comenzile date în phpMyAdmin am înțeles exact ce fac. Retrospectiv, mi se pare mult mai sigur și chiar simplu cum am făcut eu. 🙂

    Dar dacă zici că pluginul ăla simplifică totul la modul descris de tine, e bine de reținut. Poate o să-l probez data viitoare, pe un alt blog, dacă voi avea ocazia.

    Apropo, tu nu-ți instalezi? Certificatul meu e furnizat de cPanel Inc, care-i gratuit dacă firma de găzduire are licență la cPanel, ceea ce mai mult ca sigur se aplică și la tine. Sau poți pune Let’s Encrypt / StartEncrypt, care iarăși sunt gratuite. Cu mențiunea că Let’s Encrypt nu e suportat pe Windows XP decât de Firefox.

  7. Ca SEO nu ajuta la nimic. Eu n-am avut niciun boost. In rest, e bine. Macar se uniformizeaza toata lumea 🙂

  8. Ethos

    Stai puțin că greșești aici. Nu poți generaliza plecând de la un singur caz, respectiv al tău. Mai ales când Google însuși a spus că ține cont de https și când teste realizate pe un milion de site-uri confirmă acest lucru.

  9. Hollo

    Cand Google a facut anuntul ca va tine cont de certificatele SSL, firmele care vindeau astfel de certificate au avut vanzari record (ma refer aici la certificatele clasice cu preturi intre 0 si 20-30 USD). Din pacate, Google s-a referit la certificatele SSL cu EV (Extended Validation) care au costuri de pana la 2-3000 USD pe an, acele certificare cu Green Bar (vezi site-urile bancilor) care pe langa faptul ca cripteaza transferul de date dintre server si end-user, verifica autenticitatea business-ului :). S-a mers pe un principiu simplu dar eficient: oricine poate face un site si plati 1$ hosting avand un site de o calitate slaba, aproape oricine va face un site, va plati hosting 1$ si va instala un SSL de 0-30$, insa aproape nimeni, nu va face un site, va avea hosting de 1$ si va plati 2000$ pe an pentru a avea un site slab dpdv calitate. asa ca da, SSL-ul este un factor de ranking, ca daca dai 2000$ pe an pe un SSL green bar, sansele ca site-ul tau sa fie unul serios (la fel si business-ul) sunt destul de mari.

  10. Ethos

    Mersi de precizare. M-am gândit și eu la asta, dar articolul celor de la Google nu e foarte specific în direcția asta. De exemplu, în el se indică un site (Qualys Lab tool) unde să ne testăm configurația și nivelul de securitate, iar mie acolo îmi iese gradul A-. Din cum e formulat articolul Google, reiese că oricine e încurajat să-și pună un certificat SSL, nu neapărat scump, ci pentru a cripta transmisia de date. Poate că Google acordă un bonus diferențiat, mai mare la certificatele scumpe și mai mic la cele simple/ieftine?

    Și dacă tot ești aici, ce părere ai de redirecționarea de pe http spre https, d.p.d.v. SEO? Se justifică sau e mai bine să n-o fi făcut, lăsând oamenii care au intrat pe adresa cu http să navigheze în continuare pe http?

Lasă un răspuns