c2b_default

Internet Technology (AS21)

Internet technology module at FHNW 2021, major in BIT by Devid Montecciari

Internet technology module at FHNW 2021, major in BIT by Devid Montecciari

130
0.0 (0)
C. M.
Lernen
C. M.
This flashcard set covers advanced topics in internet technology at the university level, focusing on web protocols, server-client interactions, and application development. It delves into concepts like MVC architecture, templating, and the differences between frameworks and libraries, while also addressing security concerns such as SQL injection and broken authentication. The flashcards are particularly useful for computer science students and professionals aiming to deepen their understanding of web technologies and best practices in secure coding and application design.
Karten
130
Lernende
2
Sprache
Englisch
Kategorie
Informatik
Stufe
Universität
Erstellt / Aktualisiert
20.09.2021 / 11.01.2024
  • 1  / 130

Flashcards

What are cross-site scripting (XSS) attacks and how to protect against it?

  • adding html to a page using innerHTML may make it susceptible to cross-site scripting attacks
  • XSS involves an attacker placing malicious code into a site using what is known as untrusted data
  • source of untrusted data:
    • user creates a profile
    • multiple contributors to a website
    • data from third-party sites
    • files such as images/videos are uploaded
  • XSS can give an attacker access to information in:
    • The DOM (including form data)
    • Website cookies
    • session tokens containing login information of users

Protect against it

  1. validate every information that is sent to the server, do not let users submit HTML or JS code
  2. validate again on the server-side in case the client-side validation is bypassed by disabling JS
  3. save markup and scripts only from trusted sources in the db
  4. escape potentially dangerous characters after the data leaves the database
  5. innerHTML can be safely used to add markup to a page for own trusted code- but content from any untrusted sources should be escaped and added as text (not markup) using properties like textContent

transform this into an arrorw function

1. with a return

2. with a default return

3. without parentheses

hello = function () {return "Hello World"; }

  1. hello = () => {return "Hello World";}
  2. hello = () => "Hello World";
  3. hello = val => "Hello " + val;

What is a js map object?

a map holds key-value pairs where the keys can be any datatype. it remembers the original insertion order of the keys and is an iterable object. 

const fruits = new Map();

fruits.set("apples", 500);

fruits.get("apples"); // returns 500

fruits.has("apples"); // returns true if exist

fruits.clear() // removes all elements

const bananas = {name: 'banana'};

fruits.set(bananas, 300);

fruits.get("bananas") // returns undefined (catch the string)

what are classes in js?

JS classes are templates for JS objects. you can use the keyword class to create a class and always add a method constructor().

a JS class is not an object but a template for JS objects

e.g. class Car {
constructor (name, year) {this.name=name; this.year = year;}} const myCar1 = new Car("Ford", 2014);

what are promises in js?

  • A Promise is a JavaScript object that links "Producing Code" and "Consuming Code“
  • "Producing Code" can take some time and "Consuming Code" must wait for the result
  • A JavaScript Promise object contains both the producing code and calls to the consuming code
    • let myPromise = new Promise(
      function(myResolve, myReject) { // "Producing Code" (May take some time)
      myResolve(); // when successful
      myReject(); // when error
      });
      // "Consuming Code" (Must wait for a fulfilled Promise)
      myPromise.then(
       function(value) { /* code if successful */ },
      function(error) { /* code if some error */ } );

what is jquery?

jquery is a script written in JS. it finds elements using CSS-style selectors and provides jquery methods to work with the elements

a function called jQuery() or $() lets you find one or more elements in the page. 

what are similarities and differentces of jQuery to DOM?

Similarities

  1. jquery selectors perform a similar task to traditional DOM queries, but the syntax is much simpler
  2. the jQuery object can be stored in a variable, just like DOM nodes
  3. jQuery methods and properties (like DOM methods and properties) can be used to manipulate the DOM nodes that you select

Differences

  1. It is cross-browser, and there's no need to write fallback code
  2. selecting elements is simpler (because it uses CSS-style syntax) and is more accurate
  3. event handling is simpler as it uses one method that works in all major browsers
  4. methods affect all the selected elements without the need to loop through each one
  5. once you have make a selection, you can apply multiple methods to it

What is a Content delivery network?

Log in to view images.

  • A CDN is a series of servers spread out around the world
  • they are designed to serve static files (such as HTML, CSS, JS, image, audio, videos) very quickly
  • the CDN tries to find a server near you , then sends files from that server so the data does not travel as far
  • when including jQuery in your pages, you can try to load it from one of these CDNs
  • it is a good practice to include a fallback version that is stored on your own servers in case the CDN version does not load

 

what is the jquery document ready event?

all jQeury methods are included inside a document ready event

this prevents the jQuery code from executing before the document is finished loading

if the jQuery code executes before the page is ready, some action may fail e.g. hiding an element that is not yet created

$(document).ready(function() {....});

What is AJAY?

  1. Ajax is a technique for loading data into part of a page without having to refresh the entire page
  2. The data is often sent in a format called JavaScript Object Notation (or JSON)
  3. The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated
  4. Ajax allows you to request data from a server and load it without having to refresh the entire page
  5. Ajax has led to the rise in single page applications (SPA)

what is an asynchronous processing model?

When a browser comes across a <script> tag, it will typically stop processing the
rest of the page until it has loaded and processed that script. This is known as a
synchronous processing model
➢ With Ajax, the browser can request some data from a server and - once that data
has been requested - continue to load the rest of the page and process the user's
interactions with the page
➢ It is known as an asynchronous (or non-blocking) processing mode

how does ajax work?

  1. the browser requests data from the server
  2. browsers implement an object called XMLHttpRequest to handle Ajay requests
  3. once a request has been made, the browser does not wait for a response from the server
  4. when the server has finished responding to the request, the browser will fire an event
  5. this event can be used to trigger a JS function that will process the data and incorporate it into one part of the page

// creates the request object
var xhr = new XMLHttpRequest();
//prepare request, third argument specifies if request is asynchronous or not
xhr.open('GET', 'data/test.json',true);
//send request
xhr.send('search=ardiuino');
xhr.onload= function() {if(shr.status ===200 {//process response}}

what is JSON?

JSON is a lightweight data-interchange format

it is self-describing and language independent. it uses JS syntax but the JSON format is text only. 

what is typescript?

is a superset of JS - has specific rules about how different types of values can be used. has constructors that are missing in JS and is open source (designed at Microsoft)

how can you integrate typescript into your project?

via npm npm install typescript --save-dev

how does typeScript work?

  • does not run in the browser
  • it is transpiled i.e., compiled to create JS code
  • the JS code can then be run in the browser or on the server-side inside Node.js
  • tsc is the typeScript compiler

What is AngularJS?

  • commonly used for single page applications (SPA)
  • angularJS is a JS framework
  • developed by google
  • it can be added to a HTML page with a <script> tag using a CDN

What is Angular

  • written in typeScript
  • includes:
    • a component-based framework for building scalable web applications
    • a collection of libraries that cover a wide variety of features
    • a suite of developer tools to help develop, build, test, and update the code

what is NodeJS

  • open-source and cross-platform JS runtime environment
  • node.js runs the V8 JS engine, the core of Google Chrome, outside of the browser
  • node.js allows to write the server-side code in addition to the client-side code in the same language - JS

how it works

  1. a node.js app runs in a single process, without creating a new thread for every request
  2. node.js performs an I/O operation asynchronously: instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back
  3. event loop is responsible for handling simpler tasks and the thread pool manages the heavy tasks

What is the difference between Layers and Tier?

Layers are a way of organizing your code

Tiers are about where your code runs

give a tiers example for Java EE  

Connecte-toi pour voir des images.

siehe bild

can you make an example of layering an application?

Connecte-toi pour voir des images.

d

what are the three common layers?

  1. presentation 
    1. client
    2. presentation (server/browser)
  2. business
  3. data access/persistence
    1. integration data source
    2. resources legacy/db

what is the difference between a traditional vs a microservice way?

Traditional way

  • built
    • service.war
    • application server
    • bins/libs(JVM)
    • operating system
    • infrastructure
  • deployment
    • installation
    • configuration of application server
    • deployment and start of archive
  • characteristics
    • maintenance of the application server required
    • dependency to application server and its configuration
    • Jave EE Application Servers

Microservice way:

  • build
    • service.jar
    • bins/libs (JVM)
    • operating system
    • infrastructure
  • deployment
    • just run it. java -jar service.jar
  • characteristics
    • easy to deploy
    • fast start-up time
    • self-contained Jar
    • embedded Java Servers: spring boot...

What is Spring boot?

Is a Java based framework for building microservices

  • spring-boot - convention over configuration
  • simplifies the use of Spring-based technologies
  • it builds easier thanks to preconfigured dependencies and auto-configuration
  • it ships easier thanks to simple JAR packaging
  • runs easier thanks to embedded servers. 

What is apache maven?

is a build, project management and comprehension tool used primarily for JAva project

important maven elements to understand

  1. standard project structure
  2. POM(Project Object Model)
  3. Workflow
  4. Maven Central
  5. Build lifecycle

what is the apache maven standard project structure

every apache maven project is based on this standard project structure: 

  • the sry/main/java directory contains the project source code.
  • the sry/test/java directory contains the test source
  • the pom.xml file is the project's Project Object Model orPOM

What is the pom.xml file?

it is the core configuration of the apache maven project

it is a single XML-based configuration file that contains the majority of information required to build a project

it contains

  1. project identification
  2. project version
  3. project description
  4. build settings
  5. dependencies

Spring Boot, describe @Autowired & @Inject

Connecte-toi pour voir des images.

@Autowired marks field, a constructor or setter method to be @autowired by spring dependency injection

JSR 330 @Inject annotation is equivalent to spring @autowired

what is a @postConstruct?

Connecte-toi pour voir des images.

  • there are frequent situations when the application requirest o run custom code while starting up
  • since @component class is scanned during the application start, a method annotated by @postConstruct will execute after all services are initialized.
  • there are several ways to do that in spring. 

what is a @repository?

Connecte-toi pour voir des images.

@Repository indicates that an annotated class is a repository, which is an abstraction of data access and storage

DAO (Data Access Objects) or Repository classes usually represent the database access layer in an application

What are @Configuration and @Bean?

Connecte-toi pour voir des images.

  •  @Configuration indicates that a class is a configuration class that may contain @Bean definitions.
  • The @Bean can then be injected resp. @Autowired somewhere.
  • @Bean annotation tells that a method produces a bean to be managed by the Spring container.
  • @Bean is a method-level annotation and has an implicit @Scope("singleton") default value.

What is a @SpringBootApplication?

Connecte-toi pour voir des images.

A @SpringBootApplication annotation can be used to enable those three features, that is: 

  • @EnableAutoConfiguration: enable Spring Boot’s autoconfiguration mechanism.
  • @ComponentScan: enable @Component scan on the package where the application is located.
  • @Configuration: allow to register extra beans in the context or import additional configuration classes.

What is injection

  • injection means tricking an application into including unintended commands in the data set to an interpreter
  • interpreters take strings and interpret them as commands (SQL, os shell, ldap...etc)
  • SQL injection is still quite common. many applications still susceptible even though it is usually very simple to avoid
  • typical impac is usually severe. entire db can be read or modified. 
  • How it works
    1. application presents a form to the attacker
    2. attacker sends an attack in the form data
    3. application forwards attack to the database in a SQL query
    4. database runs query containing attack and sends encrypted results back to application
    5. application decrypts data as normal and sends results to the user

Describe why it is possbile to do an SQL injection and how to prevent it

an application is vulnerable to attack when user-supplied data is not validated, filtered, or sanitized by the application and dynamic queries or non-parameterized calls without context-aware escaping are used directly in the interpreter

how to prevent that is to require keeping data separate from commands and queries. the preferred option is to use a safe API /object-relational mapping tool such as jPA. and for any dynamic queries, escape special characters. 

What is Broken Authentication?

  • Http is a "stateless" protocol means credentials have to go with every request and you should use SSL for everything requiring authentication
  • session management flaws are SESSION ID used to track state since hTTP doesn't and it is just as good as credentials to attackers. it is typically exposed on the network , browser, logs. 

how do you avaoid broken authentication?

verify your architecture: 

  1. authentication should be simple, centralized, and standarized
  2. use the standard session id provided by your container
  3. be sure SSL protects both credentials and session id at all times

verify the implementation

  1. forget automated analysis approaches
  2. check your SSL certificate
  3. examine all the authentication-related functions
  4. verify that logoff actually destroys the session

What is Cross-Site Scripting?

XSS occurs any time raw data from attackers is sent to an innocent user's browser. 

Raw data stored in database, reflected from web input, sent directly into rich js client

 

how do you store secrets securely?

  • Sensitive information such as passwords, access tokens, database credentials etc., should be handled with care.
  • A good practice is to store secrets in a vault such as Vault by HashiCorp (vaultproject.io).
  • Another (may not be an optimal) possibility would be to keep secrets out of your source code and version control (.gitignore !!).
  • An application-local.yml containing a plaintext secret must be ignored by git.
  • A secret can also be provided by an environment variable (e.g. in Heroku)
  • A secret can then be injected into a variable.

What is the difference between a framework and a library?

  • Framework is a formatted structure, which may have both your code and library file. this describes a given structure of "how" you should present your code
  • Library is simply a collection of functions wrapped up tino a package that can be imported into a code project and re-used. 

The key difference between a library and a framework is inversion of control. when you call a method from a library, you are in control but with a framework the control is inverted: the framework calls you

Étudier