INSTUDERINGSMATERIAL

HEMPROV

 

 👩‍🎓

Webbserverprogrammering 1

Att plugga inför hemprovet

  • Ett hemprov sker på längre tid än ett vanligt, men det kräver också att du skriver mer utförligt.
  • Du har tillgång till alla möjliga källor. Google, dina exit tickets, dina egna anteckningar o.s.v
  • Varje moment i detta instuderingsmaterial visar vilka delar du ska kunna förklara se under "Att kunna". I slutet av varje moment finns en fördjupning. Där sovrar du ur innehållet så att du själv kan presentera momentet på ditt eget sätt. Du behöver alltså inte ha full koll på alla länkar.
  • Hemprovet kommer inte vara poängstyrd utan utifrån kriterierna E - översiktligt C-utförligt A- utförligt och nyanserat
  • På ett hemprov krävs ett godkänt svar på några meningar, inte bara en meing, eftersom du har tillgång till dina källor
  • Urkund kommer att göras vid inlämning
  • Du förbereder dig bäst genom att gå igenom alla delar och försöker förklara på ditt eget sätt. Skriv gärna ner dina förklaringar och klargöranden, rita bilder.

1. Front-end v.s Back-end

Att kunna

  • Förklara skillnaden mellan front-end och back-end inom webbutveckling
  • Förklara skillnaden mellan statiska och dynamiska webbplatser
  • Olika "stackar" för backendteknologier. D.v.s kunna namnge andra än Node.js/Express/MongoDB som vi använt. Eller andra programmeringsspråk som används för back-end.

WEBBLÄSARE

DATABAS

FRONT-END

BACK-END

HTTP Server

APP

FILER

V.S

FRONT-END STACK

BACK-END STACK

WEBBSERVER

FILER

FILER

WEBB-LÄSARE

DATABAS

HÄMTA DATA

SKAPA

WEBBPLATS

TEMPLATE

WEBB-LÄSARE

STATISKA V.S DYNAMISKA WEBBPLATSER

👉 Webbapplikation = Dynamisk sida  + Funktionalitet

RENDERING PÅ SERVERSIDAN

Fördjupning

Svenska

Engelska

2. Samspelet mellan klient och server och HTTP-protokollet

Att kunna

  • Skillnaden mellan klient och server
  • Redogöra för klient-server modellen och hur en webbsida efterfrågas (förfrågan/svar)
  • Redogöra översiktligt för HTTP-protokollet
  • De olika metoderna i HTTP och vad de innebär
  • De olika delarna i en url-adress (protokoll, domännamn, resurs)

HUR EN WEBBSIDA EFTERFRÅGAS

👉 Klient-server modellen (enkla versionen)

KLIENT

SERVER

👩‍💻

FÖRFRÅGAN (REQUEST)

SVAR (RESPONSE)

HTTP

  • HTTP = HyperText Transfer Protocol används när webbläsaren skicka och tar emot information
  • En förfrågan kallas för request och webbserverns svar för respons
  • HTTP har olika metoder som GET, POST, PUT, DELETE
  • GET används för att be om att data från webbservern
  • POST används för att skicka data till webbservern

KLIENT

SERVER

👩‍💻

FÖRFRÅGAN (REQUEST)

SVAR (RESPONSE)

HUR EN WEBBSIDA EFTERFRÅGAS

KLIENT

SERVER

👩‍💻

KLIENT

KLIENT

HTTP REQUEST

HTTP RESPONSE

https://www.google.com/maps

Protokoll

(http eller https)

Domännamn

 

Resurs

DNS

DNS uppslag

https://216.58.211.206:443

TCP/IP socket anslutning

HTTP metod + dataförfrågan + HTTP version

HTTP  request header (olika inställningar)

HTTP response body (endast om man skickar data med POST)

HTTP metod + dataförfrågan + HTTP version

HTTP  response header

HTTP response body

3

1

2

4

Fördjupning

Svenska

Engelska

3. API:er

Att kunna

  • Förklara översiktiligt vad ett API är
  • Att man kan hämta data från öppna API:er, ex Spotify, FetchMemes
  • JSON är ett vanligt dataformat att få svar från ett API
  • Att en metod inom backend är att man endast upprätthåller ett API för att sedan konsumeras på front-end sidan

API

  • API = Application Programming Interface
  • Används när man vill publicera vissa funktioner i en applikation till internet. Man väljer vilka som ska vara åtkomliga och hur man anropar dem
  • Ett stängt API är bara den som gjort api:et som kan använda sig av de funktionerna
  • Det finns gott om öppna API:er på nätet
  • Ett öppet API kan skyddas av en s.k. API-Key eller andra begränsningar

API

ETT API, FLERA KONSUMENTER

WEBB-LÄSARE

MOBIL-APP

MOBIL-APP

APP

APP

Vad är JSON?

  • JSON = JavaScript Object Notation
  • Används för att skicka data mellan klienten och servern
  • Är språkoberonde men använder samma syntax som Javascript
  • Kan användas som ett vanligt objekt i Javascript (JSON.Parse())
  • Är ett filformat men har likheter med MongoDB och andra NoSQL-databaser

FILER

DATABAS

HÄMTA DATA

SKAPA

WEBBPLATS

TEMPLATE

WEBB-LÄSARE

DYNAMISKA V.S API-DRIVNA WEBBPLATSER

DATABAS

HÄMTA DATA

WEBB-LÄSARE

TEMPLATE

SKAPA

WEBBPLATS

SKAPA ETT API

KONSUMERA ETT API

RENDERING PÅ SERVERSIDAN

RENDERING PÅ KLIENTSIDAN

Fördjupning

Svenska

Engelska

4. REST API 

Att kunna

  • Förklara översiktiligt vad ett REST API 
  • Vad är syftet med REST API:er?
  • Vad har HTTP och CRUD med REST API att göra?

REST API

REpresentational State Transfer

CRUD

  • Inom datavetenskap har vi fyra grundläggande funktioner för att uppnå datapersistens*. Dessa är: CREATE, READ, UPDATE, DELETE = CRUD

*beständighet. Möjlighet att spara data även och datorn/programmet stängs av. Databaser är en teknik att uppnå detta.

Vad är ett REST API?

  • Ett sätt att bygga api:er som bygger på funktioner i HTTP-protokollet och CRUD
  • Ej bundet till något programmeringsspråk
URI Metod Beskrivning
/posts GET Hämtar alla inlägg
/posts POST Lägger till nytt inlägg
/posts/{id} GET Hämtar specifikt inlägg
/posts/{id} PUT Ersätter ett inlägg med annat
/posts/{id} DELETE Tar bort specifikt inlägg

Utgår från en s.k endpoint (ex https://api.instagram.com/v1 )

Scenario: Vi vill sätta upp routes för en webbapplikation som ska vara en blog. 

Users

Posts

Images

Comments

Likes

e.t.c...

Olika resurser på en blog

Posts

http://www.exampeblog.com/addNewPost

ENDPOINT

URL

/getPost

/updatePost

/deletePost

/getPostByUser

/deletePostByUser

INTE BRA 👎

👉 Endpoints ska endast innehålla resursnamn som posts, users, comments etc och använda HTTP-metoder för beteende 

REST API

en mappning, regler hur ett API ska sättas upp

/getPost

/updatePost

/deletePost

/addNewPost

GET        /posts/7

PUT       /posts/7

DELETE /posts/7

POST         /posts

id för ett inlägg

/getPostByUser

/deletePostByUser

GET /users/7/posts

DELETE /users/7/posts/9

CREATE

READ

UPDATE

DELETE

HTTP-metoder

Använda CRUD

Fördjupning

Svenska

Engelska

5. Databaser

Att kunna

  • Vad är en databas? 
  • Förstå begreppet och innebörden av CRUD
  • Kunna beskriva huvudsakliga skillnaden mellan en relationsdatabas och en icke-relationsdatabas (dokumentdatabas)
  • Kunna översiktligt beskriva en relationsdatabas som SQL
  • Kunna översiktligt beskriva en NoSQL-databas som MongoDB

Vad är en databas?

  • En  organiserad samling av data (data = information) på ett sådant sätt att det är lätt att söka efter och hämta enskilda bitar information, samt även ändra informationen.
  • Är persistent, d.v.s försvinner inte när man avslutar programmet eller stänger av datorn.
  • Om man vill skapa en databas vill man gör en modell som beskriver verkligheten. Till exempel göra en beskrivning hur en webbutik ser ut och fungerar (produkter, priser, kunder, lagerstatus...). Eller i vårt fall en blog (användare, inlägg, kommenterar, bilder..).

CRUD

  • Inom datavetenskap har vi fyra grundläggande funktioner för att uppnå datapersistens*. Dessa är: CREATE, READ, UPDATE, DELETE = CRUD

*beständighet. Möjlighet att spara data även och datorn/programmet stängs av. Databaser är en teknik att uppnå detta.

Olika databaser

  • Det finns flera olika databaser. En vanlig uppdelning är mellan relationsdatabaser (SQL) och icke-relationsdatabaser (NoSQL).
  • En relationsdatabas som SQL eller mySQL är uppbyggt av tabeller
  • En icke-relationsdatabas som MongoDB är uppbyggt av dokument. 
  • I stacken Node.js + Express är MongoDB vanligast och den databas vi ska använda mest i kursen.

Databasen

Introduktion till MongoDB

Databas

NoSQL

DATABAS innehåller en eller flera "collections" såsom users, posts, etc.

SQL

"Tabell"

"Rader"

COLLECTION

innehåller ett flertal  "document" 

DOCUMENT

innehåller "key-value pairs"

 

SQL

"Tabell"

"Rader"

Relationsdatabasen SQL

Vad är en relationsdatabas?

En relationsdatabas är en databas där information ("data") är organiserad i relationer (även kallade tabeller) bestående av raderoch kolumner (fält). En unik nyckel identifierar varje rad.

Vad är SQL?

  • Structured Query Language
  • SQL är ett språk för att lagra, manipulera och hämta data från en relationsdatabas
  • SQL är standarden för relationsdatabaser. Men andra som MySQL, Oracle, MS Access använder SQL som språk

Exempel från phpmyadmin 

Hur olika tabeller relaterar till varandra

När PHP och MySQL används ihop

En tabell från en databas i MySQL

Lite inblick i SQL-kommandon

Fördjupning

Svenska

Engelska

6. Tekniska miljön Node.js/Express/MongoDB

Att kunna

  • Översiktligt vad Node.js är 
  • Översiktligt vad NPM är
  • Synkron vs asynkron programmering och hur detta kan uppnås i Javascript (d.v.s async/await)
  • Översiktligt om ramverket Express
  • Vad routing innebär
  • Vad programmet Postman kan användas till
  • Vad en miljövariabel är
  • ÖVersiktiligt vad Mongoose är
  • Vad en templatemotor 

Introduktion till Node.js + NPM

EcmaScript versioner

Största uppdateringen

Första release

NODE.JS ÄR EN RUNTIME MILJÖ FÖR JAVASCRIPT SOM BYGGER PÅ GOOGLES OPEN-SOURCE V8 JAVASCRIPT MOTOR

JS i browser v.s med Node.js

  • Single-threaded, event-driven och icke-blockerande I/O-modell  🤔 👍 
  • Javascript på både klient- och serversidan 👍 
  • NPM - gigantiskt bibliotek med open-source moduler som förenklar din kodning 👍
  • Paypal, Uber, Linkedin och Netflix är några exempel på företag som använder Node.js.
  • Bra community 👍

ANVÄNDNING

FÖRDELAR

  • Köra Javascript på servern!
  • ...och applikationer för back-end (främst NoSQL som databas)
  • Datastreaming (typ Youtube)
  • Chattapplikationer i realtid

MINDRE BRA

  • Applikationer med CPU-intensiva processer på server-sidan

https://www.npmjs.com/

  • Viktigt del när man jobbar med Node.js
  • Npm innehåller paket med färdig kod som man kan återanvända i sitt projekt
  • Hundratusentals paket och det kommer dagligen upp nya
  • Open Source

NPM

Node.js ”pakethanteringsystem”

VI KOMMER ATT ANVÄNDA FLERA PAKET FRÅN NPM SÅSOM RAMVERKET EXPRESS m.fl

Asynkron JavaScript

Synkron programmering

console.log("Statement 1"):

console.log("Statement 2"):

console.log("Statement 3"):

Kod läses rad för rad, uppifrån och ner. När en funktion är klar, kör nästa.

En del rutiner tar tid. Exempel HTTP-requests eller hämta från databas. Hur hantera detta?

Problemet 

En kö av instruktioner/funktioner

sånt som blockar!

Single-threaded

Javascript/Node.js är 

Statement 1

Statement 2

Statement 3

Statement 4

HTTP REQUEST

🕰

HÄMTA FRÅN DB

🕰

BLOCKERANDE 👎

Asynkront!

Vår räddning...  

Statement 1

Statement 2

Statement 3

CALLBACK

HTTP REQUEST

🕰

ICKE-BLOCKERANDE 👍 

HTTP REQUEST

Starta exekveringen nu, men avsluta senare

"BAKGRUNDEN"

Asynkron Javascript

Single-thread

Här ska vår kod köras.

Bara en tråd.

👨‍💻

👩‍🎤

🕵️‍♀️

🧙‍♂️

Läsa stor fil

Login

Streama

Requesta ngt

"Bakgrunden"

Här ska tidskrävande proccesser köras!

Obs! Förenklad version 🙀

när klar

När är async bra?

När saker måste ske i viss ordning

  1. Hämta data
  2. Göra något med datan
  3. Uppdatera gränsnittet

Typ det vi vill göra 👩‍💻

Leder till snårig kod. Kallas Callback Hell.

Don't go there😈

Asynkrona metoder

  1. callbacks
  2. promises
  3. async functions

Till vår räddning 🤩

Kan ff användas i mindre omfattning...

Introduktion till ramverket 

Vad är ett ramverk?

eng. framework

Enkelt uttryckt är det en kombination av färdigskriven kod och regler för struktur för program. Det bygger på det befintliga programspråket och syftet med ett ramverk är att det ska gå snabbare att utveckla och underhålla kod för applikationer.  

Vad är Express?

Express är ett ramverk för att skapa webbapplikationer på server-sidan (backend) på plattformen Node.js.

 

Det vi kommer använda från ramverket Express är att skapa en http-server, hantering hur olika routes sätts upp för att svara mot en speciell request metod såsom GET, POST, PUT, DELETE, för att skapa ett enkelt API. Vi ska även använda något som kallas för middleware.

https://expressjs.com/

Varför ska vi använda Express?

  • Mest populära webbapplikationsramverket för Node.js
  • Express vanlig i stacken MEAN (MongoDB, Express, Angular (eller React)*, Node.js
  • Mer flexbilet och frihet än andra ramverk 
  • Bra community

* är ett frontend ramverk som är för omfattande att gå in på i denna kurs

Med routing anger vi att vissa sökvägar för vår webbapplikation ska trigga igång specifika koddelar.

 

Vad är routing?

Exempelvis en viss route i vår webbapplikation ska ansvara för att när:

  • http://exampleblog.com/posts efterfrågas, så ska användaren kunna se alla inlägg
  • http:/exampleblog.com/posts/new efterfrågas, så ska användaren kunna skapa ett nytt inlägg

Skapa routes i Express


/*   7 RESTful routes */

app.get("/dogs", function (request, response) {
  response.send("Alla hundar visas");
});

app.get("/dogs/new", function (request, response) {
  response.send("Visa formulär för att skapa ny hund");
});

app.post("/dogs", function (request, response) {
  response.send("Skapa ny hund");
});

Skapa routes i Express

/*   7 RESTful routes fortsättning */

app.get("/dogs/:id", function (request, response) {
  response.send("Visa specifik hund");
});

app.get("/dogs/:id/edit", function (request, response) {
  response.send("Visa formulär för att uppdatera specifik hund");
});

app.put("/dogs/:id", function (request, response) {
  response.send("Uppdatera specifik hund");
});

app.delete("/dogs/:id", function (request, response) {
  response.send("Ta bort spcifik hund");
});

Testa ett API med programmet POSTMAN

Postman är som en webbläsare där bara datat som skickas visas. Det är bra för att verifiera att alla endpoints och HTTP-metoder verkligen skickar data eller tar met data.

https://www.postman.com/downloads/

Miljövariabler

Vi behöver hantera variabler som är beroende på vilken utvecklingsmiljö programmet körs på, eller inställningar på servern. 

Dessa variabler som exempelvis port, databasuppkoppling, databasnamn, användarnam, lösenord, m. fl., kallas för miljövariabler (eng. environment variables) och behöver hanteras separat och vara åtskilda från applikationen (exempelvis i egen fil)

D.v.s en vacker dag vill vi drifta vår applikation från att köra lokalt till live på internet :-)

Mongoose

Mongoose är ett bibliotek som sköter databashantering för MongoDB på Node.js

Det är Mongoose funktioner vi kommer använda för databasuppkoppling, skapa modell för våra inlägg, samt CRUD-funktionerna för databashantering

https://mongoosejs.com/

Som templatemotor ska vi använda JavaScript templating (EJS) vilken hjälper oss att rendera HTML-sidor med dynamisk information från JavaScript. D.v.s med en templatemotor kan vi generera delar av HTML-koden och skriva ut innehåll från variabler i JavaScript, så att sidornas innehåll blir dynamiskt.

Templatemotor

https://ejs.co/

Det finns även andra templatemotorer som Pug (https://pugjs.org/) och Handlebars (https://handlebarsjs.com/)

Fördjupning

Svenska

Engelska

7. Authentisering och Säkerhet

Att kunna

  • Sessions
  • Cookies
  • Att det finns olika authentiseringstrategier: Session-baserad och Token-baserad
  • Kryptering av lösenord
  • Sårbarheter: Brute Force Attacks, Cross-site-scripting (XSS), SQL/NoSQL Injektioner
  • HTTPS

HTTP Sessioner

HTTP är ett protokoll som är s.k "stateless". Klienten måste upprätthålla en ny anslutning till servern vid ny förfrågan och därmed finns det inget sätt att hålla reda på status, inloggningstid etc från den klient som är ansluten. D.v.s för varje gång man ansluter till servern måste man tala om för servern vem man är :-). Den "minns" inte det!

Problemet 

Istället för att varje gång ange användarnamn, lösenord eller annan information vid besök på en sida så kan webbläsaren spara den informationen.  Authentiseringsuppgifterna ges alltså till servern när man authentiserar sig. Servern skickar tillbaka informationen om att man är authentiserad (session-id) till webbläsaren. För varje ny anslutning till servern skickas den informationen från webbläsaren så att servern nu vet vem man är :-)

Lösning

Text

Idén kring sessioner

Hur kan man tekniskt använda sig an HTTP sessioner?

Jo, med Cookies 🍪

En cookie är data (text) som kan skickas mellan server och klient över HTTP protokollet och kan lagras i webbläsaren. 

Klient (webbläsare)

Server

Cookie

HTTP-protokollet har två delar. Header och Body.

Skapa en cookie

Läsa en cookie

Cookies skickas över HTTP och sparas i webbläsaren

Authentisering med HTTP Sessioner (m.h.a cookies)

Detta är autentiseringsstrategin bakom Passport-Local och att vi använder paketet client-sessions. D.v.s det vi använder oss av på bloggen.

Authentiseringsstrategi: Använda tokens

  • Behöver inte sessioner utan användarinformationen sparas i en s.k access token som utgår efter viss tid.
  • JSON Web Token (JWT) har en bred användning och är en öppen standard https://jwt.io/
  • Säkrast att spara denna token i HTTPonly cookie (är även möjligt i webbläsarens egna lagring: Local storage)

En JWT token har olika delar i avkodningen

Du behöver inte förstå de olika delarna, bara ett en token uppdelad i olika delar för säkersskäl!

Hur JSON Web Token (JWT) authentisering fungerar

FÖRDJUPNING: Du behöver inte kunna detta exakt till hemprovet.

Hotbild: Brute Force Attacks

En brute-force-attack är en metod för att systematiskt gissa ett lösenord genom att testa alla möjliga tecken i alla möjliga positioner. Angriparen försöker inte vara listig och endast testa vanliga lösenord som ”password”, skippa komplexa lösenord eller endast testa vanliga sätt för att göra lösenord unika (som ”secret01”, ”secret02” osv). Utan angriparen testar allt – därav namnet brute-force-attack. Kan angriparen genomföra den här typen av attack utan att några motåtgärder sätts in, så kommer angriparen till slut få fram lösenordet.

Skydda sig mot Brute Force Attacker

  1. Begränsa antalet inloggningsförsök
  2. Spärra kontot när ett misslyckad försök skett
  3. Använda Captcha "jag är ingen robot"
  4. Kryptera lösenorden i databasen 

Webbplatsägarens ansvar

  1. Välja långa och svårgissade lösenord
  2. Byt lösenordet regelbundet

Enskilde användarens ansvar

Kryptering av lösenord

SPARA ALDRIG OKRYPTERADE LÖSENORD I DATABASEN

En hashfunktion är så kallad envägskryptering, vilket betyder att det inte går att återskapa originaldatat från den krypterade (eller hashade) strängen. Det finns många olika hasfunktioner, mer eller mindre avancerade och tar olika lång tid att kryptera. md5, sha256, scrypt, argon2. Den som är vanlig och rekommenderas nu är bcrypt. 

Problemet med att enbart hasha lösenordet är att en eventuell hacker då kan skapa en databas som innehåller hashvärden av alla ord i en ordlista, och om inte det skulle räcka för att knäcka lösenord, så kan en hacker generera alla kombinationer upp till n tecken [a-zA-Z0-9] samt diverse icke alfanumeriska tecken. Därför bör man lägga till ett salt som är samma för alla användare. Saltet bör vara långt, gärna över 20 tecken och ha samma krav som ett vanligt lösenord. Alltså bestå av siffror och icke alfanumeriska tecken.

Kryptering av lösenord

Hur Passport-Local gör detta åt oss! Det är inte så svårt att göra på egen hand, använd gärna paketet bcrypt

Vår hashade lösenord

Saltet

Hotbild: Cross-Site-Scripting (XSS)

Från Wikipedia_

"Cross site scripting, XSS, är ett datorrelaterat säkerhetsproblem. XSS-säkerhetsbrister kan exempelvis användas till att kapa inloggningar genom att stjäla webbkakor eller för att modifiera en webbsidas utseende och funktionalitet.

Ett exempel på hur XSS kan modifiera en sidas utseende vore om ett formulärsfält där det är meningen att text ska skrivas inte är skyddat mot HTML-kod. Då kan användaren lägga in stora bilder eller ramar som tar upp plats och förstör utseendet på sidan. Även länkar till skadliga sidor kan då planteras där.

XSS kan också användas för att stjäla information från andra användare. Exempelvis kan vi tänka oss en webbplats där man kan skicka meddelanden till varandra. Om sajten inte är skyddad mot XSS så kan användaren X skicka ett meddelande till användare Y och få honom att klicka på en länk som via javascript automatiskt skickar hemlig information om användaren Y till användaren X. Med den informationen kan exempelvis användare X logga in som användare Y."

Exempel: Cross-Site-Scripting (XSS)

Skydda sig mot Cross-Site-Scripting (XSS)

Viktigt att granska och rensa indata på skadlig kod. Exempelvis från att ändra "farliga" tecken som finns i körbara skript till "ofarliga" tecken. Detta kan man göra på olika sätt. Man kan också validera så att endast vissa värden är möjliga. 

Hotbild: SQL-injektioner (också NoSQL-injektioner)

SQL-injektioner är ett vanligt säkerhetsproblem på webbsidor. Det uppstår genom att okontrollerad data skickas direkt in i en SQL-fråga. På så sätt ändras SQL-anropets ursprungliga funktionalitet till något annat. En SQL-injektion är ett säkerhetshål som kan uttnyttjas på många olika sätt. Databaser kan raderas, lösenord stjälas o.s.v

Skydda sig mot SQL/NoSQL-injektioner

Granska och rensa data så att skadliga databasfunktioner inte kan köras. Det brukar vara inbyggt i ramverken. Ex att använda Mongoose för NoSQL är ett bra skydd.

Avända HTTPS

HTTPS gör att webbkommunikation sker genom en privat och skyddad kanal över internet. En webbplats bör alltid använda HTTPS. Särskilt om man har formulär eller visar upp innehåll som är unik för respektive användare.

Det extra S:et i HTTPS står för secure. Det är alltså en säkrare variant av HTTP. I grunden fungerar de två protokollen på liknande sätt, men med en fundamental skillnad: över HTTP-protokollet krypteras informationen som skickas mellan klient och server med SSL (Secure Socket Layer)

I Node.js kan man alltså skapa likväl en server med HTTPS istället för HTTP.

Fördjupning

 

Svenska

Engelska

Instuderingsmaterial till hemprov

By Sandra Larsson

Made with Slides.com

Instuderingsmaterial till hemprov

Webbserverprogrammering 1

  • 232

More from Sandra Larsson