Miten valvoa omaa verkkosivustoa odottamattomien muutosten varalta

Eräänä sunnuntai-iltapäivänä syyskuussa 2022 joku murtautui Fast Companyn sisällönhallintajärjestelmään (CMS) ja korvasi etusivun jokaisen otsikon hävyttömällä, rasistisella viestillä. Tiimi sulki sivuston ja sai sen takaisin pystyyn noin kaksi tuntia myöhemmin. Kaksi päivää myöhemmin sama hyökkääjä lähetti vastaavia viestejä Fast Companyn Apple News -seuraajille, ja sivusto päätyi olemaan poissa verkosta kahdeksan päivää.

Tämä on dramaattinen versio. Arkipäiväinen todellisuus on paljon hiljaisempi. Julkaisuajo (deploy) vie tuotantoon hinnoittelukomponentin, joka renderöi täysin tyhjän taulukon. CMS-toimittaja julkaisee luonnoksen, jonka hero-osiossa on paikkamerkkitekstiä. Joku palauttaa vahingossa viime vuoden tietosuojaselosteen korjatessaan pientä kirjoitusvirhettä. Kenenkään hakulaite ei hälytä, koska palvelin vastaa ja jokainen sivu latautuu teknisesti täydellisesti.

Työskentelen Page Deltasilla – työkalulla, jota useimmat tiimit käyttävät muiden yritysten verkkosivustojen seuraamiseen. Tässä artikkelissa käsitellään sen kohdistamista omaan sivustoosi: mitä sivuja kannattaa seurata, miten ohjeistaa tekoälysuodatin havaitsemaan virheet, miten käynnistää tarkistus jokaisen julkaisun jälkeen ja mihin työkalun rajat asettuvat.

Miksi muut työkalusi ohittavat tämän

Useimmilla sivustoilla on jo käytössään käytettävyyden valvontatyökalu (uptime monitor). Se kysyy tasan yhden kysymyksen: vastaako sivu? Ja töhritty (defaced) etusivu vastaa täysin moitteettomasti. Aivan kuten hinnoittelusivu, jonka taulukko on rikki. Käytettävyystarkistukset ovat erinomaisia kertomaan, että valot ovat sammuneet. Ne eivät kuitenkaan osaa kertoa, että joku on maalannut seinät uudelleen.

Palvelinpuolen työkaluilla on toisenlainen sokea piste. Tiedostojen eheyden valvontatyökalu (FIM) tarkkailee omia paikallisia tiedostojasi: se ei siis huomaa, kun kolmannen osapuolen skripti (chat-widgetti, tagien hallinta tai mainoskoodi) muuttaa sitä, mitä vierailijat näkevät. Se ei myöskään huomaa DNS-kaappausta, jossa verkkotunnuksesi ohjataan toiselle palvelimelle samalla kun omat palvelimesi pysyvät koskemattomina. Visualpingin opas verkkosivustojen töhrimisen valvontaan korostaa samaa asiaa, ja he ovat täysin oikeassa: havaitsemisen on arvioitava sitä, mitä sivu konkreettisesti näyttää vierailijalle.

Juuri sitä verkkosivuston muutosvalvonta tekee. Se noutaa sivun ulkoapäin aivan kuten vierailija tekisi ja vertaa sitä edelliseen tarkistukseen. Esitettäväksi kysymykseksi muodostuu: "muuttuiko tämä sivu tavalla, jota emme olleet suunnitelleet?"

Mitä sivuja kannattaa valvoa?

Koko sivustoa ei tarvitse valvoa. Aloita sivuista, joilla haitallinen muutos tuhoaa liikevaihtoa tai luottamusta nopeimmin ja joilla vierailija todennäköisesti huomaisi virheen ennen sinua.

Ensimmäiset neljä riviä ovat sivuseurantoja. Viimeinen on sivukartan valvonta, joka hälyttää, kun uusia URL-osoitteita ilmestyy sitemap.xml-tiedostoosi. Se auttaa tiettyyn hyökkäystyyppiin: sellaiseen, joka luo vähin äänin satoja roskapostisivuja verkkotunnuksellesi – edellyttäen, että julkaisujärjestelmäsi lisää kyseiset sivut sivukarttaan.

Ilmainen tilaus sisältää 10 valvottua URL-osoitetta, ja sivukartan valvonta lasketaan yhdeksi. Se kattaa etusivusi, hinnoittelusivusi, kolme keskeistä laskeutumissivua, kaksi lakisääteistä sivua ja sivukartan – jättäen vielä kaksi paikkaa vapaaksi.

Käyttöönotto

Käyttöönotto noudattaa samaa kaavaa kuin oppaamme verkkosivuston muutosten valvontaan, yhdellä merkittävällä erolla: tässä kuvaat sitä, mitä ei saa koskaan tapahtua, sen sijaan mitä toivot näkeväsi.

1. Lisää sivusi ohjeistuksen (brief) kera

Luo ilmainen tili, napsauta New monitor (Uusi valvonta) ja liitä URL-osoite. Kuvauskenttä toimii kehotteena, jonka kielimallimme (LLM) lukee päättäessään, onko muutos merkityksellinen: kirjoita se kuin ohjeeksi kollegalle, joka vahtii sivua puolestasi.

Omaa etusivua varten tämänkaltainen ohjeistus toimii erinomaisesti:

Oma etusivumme (example.com). Muutamme sitä harvoin julkaisuajojen ulkopuolella.
Ilmoita minulle kaikista muutoksista pääotsikkoon, hero-tekstiin, ensisijaiseen toimintakehotteeseen
tai hintoihin. Ilmoita jos sivulle ilmestyy tekstiä, joka ei liity tuotteeseemme, on loukkaavaa
tai on kielellä, jolla emme julkaise.
Älä huomioi vaihtuvia asiakaslogoja tai uusimpien blogikirjoitusten nostolaatikkoa.

Poissulkulauseke tekee enemmän työtä kuin miltä näyttää. Lähes jokaisella sivulla on komponentti, joka muuttuu itsekseen: jos et nimeä sitä erikseen, vietät ensimmäisen viikon vastaanottaen turhia hälytyksiä siitä.

2. Lähetä hälytykset kahteen eri kohteeseen

Avaa Channels (Kanavat) ja määritä ilmoituskohteet. Slack, Discord ja Microsoft Teams vaativat saapuvan webhook-URL-osoitteen. Sähköpostin osalta vastaanottajan on ensin vahvistettava vahvistusviesti, ja allekirjoitettu webhook voi syöttää dataa omiin sisäisiin järjestelmiisi. Napsauta jokaisen kohdalla Send test (Lähetä testi) varmistaaksesi, että viestit saapuvat perille.

Omaa sivustoa varten suosittelen liittämään kaksi erityyppistä kanavaa, esimerkiksi Slackin ja päivystäjän sähköpostialiaksen. Jokainen hälytys lähetetään kerran kanavaa kohti ilman automaattisia uudelleenyrityksiä: toinen kanava varmistaa, ettei tilapäinen häiriö Slackissa piilota murrettua etusivua.

3. Käynnistä tarkistus välittömästi jokaisen julkaisun jälkeen

Page Deltasissa et määritä kiinteää tarkistusväliä. Aikataulu on mukautuva: usein muuttuvat sivut tarkistetaan tiheämmin ja rauhalliset sivut harvemmin, ja maksulliset tilaukset saavat etusijan jonon ollessa varattu. Oma etusivusi on yleensä hyvin staattinen – mikä on täysin päinvastoin kuin mitä haluat heti sen jälkeen, kun siihen on tehty muutoksia.

Ratkaisu on laukaista tarkistus itse. Jokaisessa valvonnassa on Check now (Tarkista nyt) -painike, ja sama toiminto on käytettävissä API:n kautta, joten voit lisätä kutsun julkaisuputkesi loppuun:

curl -X POST \
  -H "Authorization: Bearer $PAGEDELTAS_TOKEN" \
  https://api.pagedeltas.com/api/monitors/$MONITOR_ID/check-now

Manuaaliset tarkistukset on rajoitettu yhteen minuutissa valvontaa kohti, mikä riittää mainiosti julkaisuajoihin. Luot avaimen kohdassa Settings > API keys (vaatii editor- tai admin-roolin). Se näytetään vain kerran, joten tallenna se suoraan CI-ympäristösi salaisuuksiin. Artikkelimme verkkosivuston muuttamisesta muutos-APIksi kattaa API:n muut toiminnot, jos haluat automatisoida myös valvontojen luomisen.

Mitä tehdä hälytyksen saapuessa

Kun järjestelmä on käynnissä, merkityksellinen muutos tuottaa yhden ilmoituksen, joka sisältää selkokielisen tiivistelmän sekä kuvakaappaukset ennen ja jälkeen. Jos käytät allekirjoitettua webhookia, viestirunko näyttää tältä (arvot ovat esimerkinomaisia):

{
  "event": "change.detected",
  "monitor_id": "01HW2X...",
  "monitor_url": "https://example.com/pricing",
  "monitor_name": "Hinnoittelusivumme",
  "change_id": "...",
  "detected_at": "2026-10-08T07:12:00Z",
  "summary": "Pro- ja Business-paketit eivät enää näy. Hinnoittelutaulukko näyttää nyt vain Free-tilauksen.",
  "before_screenshot_url": "https://.../before.png",
  "after_screenshot_url": "https://.../after.png",
  "dashboard_url": "https://app.pagedeltas.com/monitors/..."
}

Useimmat oman sivustosi hälytykset koskevat oman tiimisi tekemiä muutoksia. Se on normaalia ja hyödyllistä: nopea kuittaus viestiketjussa muodossa "se olimme me, julkaistu tänään" muuttaa kanavan jatkuvaksi lokiksi siitä, mitä meni tuotantoon ja milloin. Ratkaiseva hälytys on se, jota kukaan tiimissä ei tunnista.

Kun näin käy, kuvakaappaukset auttavat kahdella tavalla: ne näyttävät tarkalleen mitä vierailijat näkevät sillä hetkellä ja toimivat päivättynä todisteena tapahtuneesta, jota turvallisuustiimisi tai vakuutusyhtiösi saattaa myöhemmin pyytää. Historiaa säilytetään 14 päivää ilmaisversiossa ja pidempään maksullisissa tilauksissa (30 päivää Starterissa, jopa 730 Scale-tasolla) – lataa talteen kaikki tarvitsemasi aineisto.

Toisinaan ensimmäinen signaali ei tulekaan sisäisestä hälytyksestä, vaan asiakkaan julkaisemasta kuvakaappauksesta sosiaalisessa mediassa. Jos haluat kuulla myös niistä, sisartuotteemme KWatch.io lähettää ilmoituksia, kun brändisi nimi mainitaan Redditissä, X:ssä, LinkedInissä, Facebookissa ja Hacker Newsissä.

Mihin työkalun rajat asettuvat

On muutamia tilanteita, joita tämä kokoonpano ei havaitse, ja ne on hyvä tietää ennen kuin luotat siihen täysin.

Vertaamme jokaisen sivun pääasiallista leipätekstiä. Navigaatio, alatunnisteet ja mainokset suodatetaan pois ennen vertailua: alatunnisteeseen lisätty roskapostilinkki ei siis näy. Sama koskee puhtaasti visuaalisia muutoksia, kuten vaihdettua logokuvaa, kun tekstiin ei ole koskettu.

Tämä ei myöskään korvaa käytettävyyden valvontaa (uptime monitor). Jos sivustosi kaatuu, tarkistukset epäonnistuvat hälytysten lähettämisen sijaan, ja 10 peräkkäisen epäonnistumisen jälkeen valvonta keskeytyy automaattisesti ja ylläpitäjät saavat ilmoituksen. Se on aivan liian hidasta käyttökatkoon – pidä tavallinen uptime-työkalusi sitä varten.

Julkaisujen välillä muutos havaitaan seuraavassa aikataulutetussa tarkistuksessa ilman taattua kiinteää aikaväliä. Jos tarvitset kriittiselle sivulle taatun tarkistuksen muutaman minuutin välein, Visualping mahdollistaa tarkistustiheyden asettamisen sivukohtaisesti ja sopii siihen paremmin. Lisäksi näemme vain julkiset sivut: kaikki kirjautumisen takana oleva pysyy tavoittamattomissa.

Lopuksi: Page Deltas kertoo sinulle, että jokin muuttui. Se ei kerro, miten hyökkääjä pääsi sisään – se työ kuuluu edelleen erillisille tietoturvatyökaluillesi.

Aloita omasta etusivustasi

Lisää ensin etusivusi ja hinnoittelusivusi, mukauta yllä olevaa ohjeistusta omilla poissulkuohjeillasi ja lähetä testihälytys molempiin kanaviin. Lisää sitten check-now-kutsu julkaisuskriptiisi. Ilmainen tilaus kattaa 10 URL-osoitetta tai sivukarttaa tekoälysuodatuksella, kaikki viisi hälytyskanavaa ja API-yhteyden – ilman luottokorttia. Aloita valvonta ilmaiseksi.

Julien, tuotepäällikkö Page Deltasilla