Content Security Policy Basics

What is Content Security Policy (CSP)?

Response headers that allows web site administrators to control which resources are loaded on a given page. We control this by setting policies structured below:

Content-Security-Policy: <policy-directive>; <policy-directive>

The following example creates a default source to 'self' (server origin) and a style-src to 'self' and allows any css loaded from a somedomain.com domain:

Content-Secuirty-Policy: default src 'self'; style-src 'self' *.somedomain.com;

What is Cross-Site Scripting (XSS)?

Cross-SIte Scripting, is a client-side code injection attack. One type of vulnerable a page has to this kind of attacks if it does not validate or encode text that is entered to it's input control. With this a hacker can input a malicious script on the text then when saved and loaded back, the page would then execute that script.

Types of XSS Attacks

• Embedding of External Resources on the Page
• Writing Scripts to the Page Source
• Modifying the Document Object Model (DOM)

Please find link on the References section below for more information about Cross-Site Scripting.

Commonly Used Directives

Policy Directive	Description
default-src	This directive contains the default values, for example if script-src is not specified, it used what is set on the default-src
script-src	This directive controls the script resources locations (.js files), if we have referenced remote scripts we can specify the url for that on this directive
style-src	This directive controls the style resources locations
object-src	This directive controls being loaded on the page ex. flash
media-src	This directive controls the media resources being loaded ex. mp3
frame-ancestors	This directive controls which sources can load the page into a child frame

For other directives please refer to the link found on the References section below

Built-in Directive Values

Source Name	Description
'self'	Refers to the origin from which request/response is being served. This allows all scripts from the origin server.
'none'	Explicitly disallow script sources
'unsafe-inline'	Allows scripts that are coded in-line: ex: <button id='sampleId' onclick='confirm('are you sure?')' />
'unsafe-eval'	Allows scripts that use the eval() method, which creates javascript code from strings ex: var value = eval(new String(a + b))

Tools
https://report-uri.com/home/generate

References:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

https://cspvalidator.org

https://app.pluralsight.com/player?course=browser-security-headers&author=troy-hunt&name=browser-security-headers-m4&clip=0&mode=live - Pluralsight

https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Angular CLI Primer

What is Angular CLI?

Angular Command Line Interface, makes it easy to create an application that works and follows best practices right out the box.
It takes care of most of managing the dependencies and boiler plate code when creating Angular projects.

Requirements 

• Node (Version  8 or higher)
• NPM (usually bundles with node, version 5 or higher)
• Code editor tools (ex. Visual Studio Code)

Checking for node version:

> node -v

Checking npm version

> npm -v

Installing Angular CLI

> npm install -g @angular/cli

Creating a new application

> ng new application_name

Some Useful Options Flag

• --help This applies to almost all, if not all, the command line interfaces used
• --dryRun or -d Displays files that would be generated when running the cli command
• --directory Specifies directory to where the application would be generated
• --skip-install Skips installation of dependency packages

Running the application

> ng serve -o

References

https://angular.io/

SOLID Principles in OOP

(S)ingle Responsibility Principle
This states that a class should only have a single responsibility.

(O)pen Closed Principle
Open for extension and closed for modifications.

(L)iskov Substitution Principle
Objects should be replaceable with instances of their subtypes

(I)nterface Segregation Principle
Many client-specific interfaces are better than one general-purpose interface

(D)ependency Inversion Principle
Depend upon abstractions, not concretions



Reference
https://en.wikipedia.org/wiki/SOLID

Entity Framework Core Notes Part 1

We execute command line commands to add/update database or to generate model from a database.
We can either execute them on the command line,  powershell or Visual Studio's package manager console.

On previous versions of Entity Framework, we need to execute the command below to setup migrations on the project, to create the migrations folder:

> enable-migrations 

This is already considered obsolete in Entity Framework Core. The Add-Migrations script automatically creates for you the migrations folder, unless you have specified it explicitly with specific command line parameters.


Commands (Package Manager Console):

Adding migration scripts to the project.

> Add-Migration

Specifying a Migration name

> Add-Migration MyFirstMigration

Specifying a Migrations output directory

> Add-Migration MyOtherMigration -OutputDir OtherMigrationsDirectory

Targeting a Project for Migration

> Add-Migration SpecifiedProjectMigration -Project OtherCodeFirstProject

Applying the Migration scripts to the Database

> Update-Database

The following command removes the previous Migration

> Remove-Migration


Creating your models from an existing database

> Scaffold-DbContext "<ConnectionString>" Microsoft.EntityFramework.SqlServer -OutputDir Models

Entity Framework Core 2.1 Package Installation

Entity Framework Core Packages
On your project install the following NuGet Packages

• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.Design
• Microsoft.EntityFrameworkCore.Relational
• Microsoft.EntityFrameworkCore.SqlServer  -- Provider based
• Microsoft.EntityFrameworkCore.Tools -- (optional)

Installing the packages using Package Manager Console (Tools > NuGet Package Manager > Package Manager Console)

1. Make sure you are in the correct directory by typing in dir then press enter.
2. Install-Package <Package Name> 

Installing the packages using Visual Studio's NuGet Package Manager

1. Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution
2. Search for Microsoft.EntityFrameworkCore

Installing the packages by editing the Project (Visual Studio 2017)

Another way of installing the EF packages is by editing the project. Paste in the following inside the <Project> scope.

<ItemGroup>

   <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.0.3" />

</ItemGroup>

Save project then on the Package Manager Console, enter the command below to restore the packages to the project:

> dotnet restore

TypeScript Fields

Just like regular OOP classes, you can define fields in a Typescript class. On the next section are samples on how you define them.

By default access modifiers on the fields are public, however you can explicitly set it to private or public.

class SampleFields {

id: number;

name: string;

description: string;

}

On the above example, field types are explicitly set.

A similar C# class would look like the following:

public class SampleFields
{
    public int id;
    public string name;
    public string description;
}

Do note that type can be inferred:

class SampleFields {

id = 0;

name = "";

description = "";

}

Fields can also be defined on the constructor:

class SampleFields {

constructor (public id = 0, public name = "", public description = "") {

}

}

or

class SampleFields {

constructor (public id: number, public name: string, public description: string) {

}

}

This is called shorthanding

The following statement would only set the fields as local to the constructor block, thus is different from the examples above.

class SampleFields {

constructor (id: number, name: string, description: string) {

}

}

Do note that when accessing class scoped fields, we need to use the this keyword

class SampleFields {

constructor (public id: number, public name: string, public description: string) {

}

setFields() {

this.id = 1;

this.name = "SomeName";

this.description = "Some Description";

}

}

This is it for Typescript fields for now, do leave me a comment if you have corrections or questions.

K, Bye!

TypeScript Setup for Visual Studio Code

1. Go to https://nodejs.org/
   
   
2. Download the installer you wish to install.
3. Run the installer
   
   
   
4. Open either command prompt or powershell and type in (-g parameter means global):
   npm install -g typescript
   
   
5. To verify that we have installed TypeScript successfully, type in the following in powershell:
   tsc --version
6. Open Visual Studio Code
7. Add a TypeScript configuration file (tsconfig.json) to the folder. A sample TypeScript config file can be found on the Visual Studio Code site: https://code.visualstudio.com/docs/languages/typescript
   
   
8. Now let's add a Type script file, add a HelloWorld.ts file
9. Place in the following code:
   

   export class HelloWorld {

   shout() {

   console.log("hello world");

   }

   }

   
   

   let helloWorld = new HelloWorld();

   helloWorld.shout();
10. Click on Task -> Run Build Task
    
    
    
11. Select tsc: build - tsconfig.json
    
    
    
12. 
    Open windows powershell, go to file folder and type in the following:
    node helloWorld.