1 of 69

Web Software Development

Lecture 7 – 7.12.2023

2 of 69

Agenda

  • Web Security Basics
  • Deployment and Docker
  • Other Frameworks and Languages
  • Requesting Credits
  • Next?

3 of 69

Web Security Basics

4 of 69

Web Security Basics

5 of 69

Web Security Basics

  • Web applications are constantly under attack�

6 of 69

Web Security Basics

  • Web applications are constantly under attack�

E.g. a study from University of Maryland with four servers – an attack on average every 39 seconds.

7 of 69

Web Security Basics

  • Web applications are constantly under attack�
  • Breaches happen through social engineering and flaws in applications�

E.g. a study from University of Maryland with four servers – an attack on average every 39 seconds.

8 of 69

Web Security Basics

  • Web applications are constantly under attack�
  • Breaches happen through social engineering and flaws in applications�

E.g. a study from University of Maryland with four servers – an attack on average every 39 seconds.

E.g. Verizon Data Breach Investigations Report – 74% of breaches involve the human element.

9 of 69

Web Security Basics

  • Web applications are constantly under attack�
  • Breaches happen through social engineering and flaws in applications�
  • Need to secure web applications, infrastructure, and data, but need also awareness of web security

E.g. a study from University of Maryland with four servers – an attack on average every 39 seconds.

E.g. Verizon Data Breach Investigations Report – 74% of breaches involve the human element.

10 of 69

Web Security Basics

11 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �

12 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �
  • OWASP maintains a “Top 10” list of flaws – https://owasp.org/Top10/ – curated from data and community survey.

13 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �
  • OWASP maintains a “Top 10” list of flaws – https://owasp.org/Top10/ – curated from data and community survey.

Broken Access Control

14 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �
  • OWASP maintains a “Top 10” list of flaws – https://owasp.org/Top10/ – curated from data and community survey.

Broken Access Control

Cryptographic Failures

15 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �
  • OWASP maintains a “Top 10” list of flaws – https://owasp.org/Top10/ – curated from data and community survey.

Broken Access Control

Cryptographic Failures

Injection

16 of 69

Web Security Basics

  • Open Worldwide Application Security Project (OWASP) a great location to start with – https://owasp.org �
  • OWASP maintains a “Top 10” list of flaws – https://owasp.org/Top10/ – curated from data and community survey.

Broken Access Control

Cryptographic Failures

Injection

…

17 of 69

Injection demo: A buggy application.

18 of 69

Deployment and Docker

19 of 69

Deployment and Docker

20 of 69

Deployment and Docker

  • We’ve been running the client-side functionality and the server-side functionality separately from each other using Docker Compose.�

21 of 69

Deployment and Docker

  • We’ve been running the client-side functionality and the server-side functionality separately from each other using Docker Compose.�
  • Could deploy them on separate servers, but could also bundle them together.�

22 of 69

Deployment and Docker

  • We’ve been running the client-side functionality and the server-side functionality separately from each other using Docker Compose.�
  • Could deploy them on separate servers, but could also bundle them together.�
  • Here’s where Docker’s multi-stage builds are useful.

23 of 69

Multi-stage builds with Docker

24 of 69

Multi-stage builds with Docker

  • Multi-stage builds allow using multiple FROM-statements in Docker (i.e., using multiple images in the Dockerfile).�

25 of 69

Multi-stage builds with Docker

  • Multi-stage builds allow using multiple FROM-statements in Docker (i.e., using multiple images in the Dockerfile).�
  • Each stage – or step –would be built using a specific image.�

26 of 69

Multi-stage builds with Docker

  • Multi-stage builds allow using multiple FROM-statements in Docker (i.e., using multiple images in the Dockerfile).�
  • Each stage – or step –would be built using a specific image.�
  • Final stage would (or, could) copy specific parts from earlier stages to the final image. �

27 of 69

Multi-stage builds with Docker

  • Multi-stage builds allow using multiple FROM-statements in Docker (i.e., using multiple images in the Dockerfile).�
  • Each stage – or step –would be built using a specific image.�
  • Final stage would (or, could) copy specific parts from earlier stages to the final image. �
  • With this, we can e.g. build the client-side functionality as static content and serve it from the server.

28 of 69

Example Dockerfile

29 of 69

Multi-stage builds with Docker

FROM node:21-alpine AS client �WORKDIR /app �COPY ui/ .�RUN npm install�RUN npm run build ��FROM denoland/deno:alpine-1.37.0 �WORKDIR /app �COPY api/ . �RUN deno cache app-run.js �COPY --from=client /app/build /app/static�CMD ["run", "--allow-net", "--allow-read=static", "app-run.js"]

30 of 69

Multi-stage builds with Docker

FROM node:21-alpine AS client �WORKDIR /app �COPY ui/ .�RUN npm install�RUN npm run build ��FROM denoland/deno:alpine-1.37.0 �WORKDIR /app �COPY api/ . �RUN deno cache app-run.js �COPY --from=client /app/build /app/static�CMD ["run", "--allow-net", "--allow-read=static", "app-run.js"]

Build client-side functionality.

31 of 69

Multi-stage builds with Docker

FROM node:21-alpine AS client �WORKDIR /app �COPY ui/ .�RUN npm install�RUN npm run build ��FROM denoland/deno:alpine-1.37.0 �WORKDIR /app �COPY api/ . �RUN deno cache app-run.js �COPY --from=client /app/build /app/static�CMD ["run", "--allow-net", "--allow-read=static", "app-run.js"]

Build client-side functionality.

Build and define server-side functionality.

32 of 69

Multi-stage builds with Docker

FROM node:21-alpine AS client �WORKDIR /app �COPY ui/ .�RUN npm install�RUN npm run build ��FROM denoland/deno:alpine-1.37.0 �WORKDIR /app �COPY api/ . �RUN deno cache app-run.js �COPY --from=client /app/build /app/static�CMD ["run", "--allow-net", "--allow-read=static", "app-run.js"]

Build client-side functionality.

Build and define server-side functionality.

Copy specific contents from the client-side image the server image.

33 of 69

Multi-stage build demo

34 of 69

Note! This requires creating the client-side functionality so that it can be served as a static site.

35 of 69

Note! This requires creating the client-side functionality so that it can be served as a static site.

Like we’ve done in the course :D

36 of 69

Deployment with Docker?

37 of 69

Deployment with Docker?

Most online platforms provide the possibility to deploy a Docker image.

38 of 69

Deployment with Docker?

Most online platforms provide the possibility to deploy a Docker image.

Demo with Render.

39 of 69

A brief note on continuous integration and continuous deployment.

40 of 69

Other Frameworks and Languages

41 of 69

Other Frameworks and Languages

42 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.�

43 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot

44 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot
    • Python and FastAPI

45 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot
    • Python and FastAPI
    • NodeJS and Express�

46 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot
    • Python and FastAPI
    • NodeJS and Express
    • …�

There is no single correct choice.

47 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot
    • Python and FastAPI
    • NodeJS and Express
    • …�
  • Larger web applications consist of multiple parts, each often built with a specific programming language and a specific framework.�

​

There is no single correct choice.

48 of 69

Other Frameworks and Languages

  • A plethora of web frameworks and languages to choose from.
    • Java and Spring Boot
    • Python and FastAPI
    • NodeJS and Express
    • …�
  • Larger web applications consist of multiple parts, each often built with a specific programming language and a specific framework.�

​

There is no single correct choice.

The teams responsible for each specific part picks the technologies that they believe best work for that part.

49 of 69

Example: Our course platform

50 of 69

Requesting Credits

51 of 69

Requesting Credits

52 of 69

Requesting Credits

  • Chapter “Requesting Credits” shows your overall progress.

53 of 69

Requesting Credits

  • Chapter “Requesting Credits” shows your overall progress.�
  • Once over 75% and content with the grade, fill in the form in MyCourses for requesting grading. Use the form for the new course version.�

54 of 69

Requesting Credits

  • Chapter “Requesting Credits” shows your overall progress.�
  • Once over 75% and content with the grade, fill in the form in MyCourses for requesting grading. Use the form for the new course version.�
  • You can request grading until the end of 31st of December – after that, you need to sign up to the course version for the Spring 2024.

55 of 69

What’s next?

56 of 69

What’s next?

57 of 69

What’s next?

  • Want to learn more about building web applications?�– Take the Full Stack Open (organized by the University of Helsinki)�

58 of 69

What’s next?

  • Want to learn more about building web applications?�– Take the Full Stack Open (organized by the University of Helsinki)�
  • Want to learn more about building scalable web applications?�– Take Designing and Building Scalable Web Applications (CS-E4770)�

59 of 69

What’s next?

  • Want to learn more about building web applications?�– Take the Full Stack Open (organized by the University of Helsinki)�
  • Want to learn more about building scalable web applications?�– Take Designing and Building Scalable Web Applications (CS-E4770)�

Will be updated �~April 2024.

60 of 69

What’s next?

  • Want to learn more about building web applications?�– Take the Full Stack Open (organized by the University of Helsinki)�
  • Want to learn more about building scalable web applications?�– Take Designing and Building Scalable Web Applications (CS-E4770)�
  • Want to learn more about building applications that �work on a variety of devices? �– Take Device-Agnostic Design (CS-E4270)

Will be updated �~April 2024.

61 of 69

What’s next?

  • Want to learn more about building web applications?�– Take the Full Stack Open (organized by the University of Helsinki)�
  • Want to learn more about building scalable web applications?�– Take Designing and Building Scalable Web Applications (CS-E4770)�
  • Want to learn more about building applications that �work on a variety of devices? �– Take Device-Agnostic Design (CS-E4270)

Will be updated �~April 2024.

Will also update the new version of CS-C3170 in the Spring of 2024 based on feedback.

62 of 69

Retrospective?

63 of 69

Retrospective?

Think of the course as a whole. Which one aspect of it would you wish to keep?

64 of 69

Retrospective?

Think of the course as a whole. Which one aspect of it would you wish to keep?

Think of the course as a whole. Which aspect of it would you wish to change?

65 of 69

Final words – DALL·E 3

66 of 69

Final words – DALL·E 3

Q: Hi! Could you summarize contemporary web development in one image?������������

67 of 69

Final words – DALL·E 3

Q: Hi! Could you summarize contemporary web development in one image?��A: .. The image captures various elements central to modern web development, such as a laptop with a web design interface, cloud computing, automation tools, responsive designs on mobile devices, snippets of coding languages, cybersecurity, and icons for popular web technologies.

68 of 69

Final words – DALL·E 3

Q: Hi! Could you summarize contemporary web development in one image?��A: .. The image captures various elements central to modern web development, such as a laptop with a web design interface, cloud computing, automation tools, responsive designs on mobile devices, snippets of coding languages, cybersecurity, and icons for popular web technologies.

69 of 69

Final words – DALL·E 3

Q: Hi! Could you summarize contemporary web development in one image?��A: .. The image captures various elements central to modern web development, such as a laptop with a web design interface, cloud computing, automation tools, responsive designs on mobile devices, snippets of coding languages, cybersecurity, and icons for popular web technologies.

��Oh well, thanks for joining in and happy holidays!