Good Samples

Speech based Search Movie Web Application using Angular2, TypeScript, ASP.NET MVC and WEB API

https://github.com/m-hassan-tariq/SpeechIMDBUsingAngular2

https://voicemoviesearch.azurewebsites.net/

Angular 2 Alert Service

https://github.com/m-hassan-tariq/SpeechIMDBUsingAngular2

http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

https://stackoverflow.com/questions/42440612/alert-service-in-angular-2

How does Angular 2 handle with XSS or CSRF?

Angular2 provides built-in, enabled by default*, anti XSS and CSRF/XSRF protection.

The DomSanitizationService takes care of removing the dangerous bits in order to prevent an XSSattack.

The CookieXSRFStrategy class (within the XHRConnection class) takes care of preventing CSRF/XSRF attacks.

Note that the CSRF/XSRF protection is enabled by default on the client but only works if the backend sets a cookie named XSRF-TOKEN with a random value when the user authenticates. For more information read up about the Cookie-to-Header Token pattern.

UPDATE: Official Angular2 security documentation: https://angular.io/docs/ts/latest/guide/security.html (Thanks to Martin Probst for the edit suggestion!).

Angular 2 with XSS and CSRF?

https://github.com/angular/angular/blob/10475b859d88570b13bc37b2c97d031e57f85b63/modules/%40angular/http/src/backends/xhr_backend.ts

// Set the detected content type
switch (req.contentType) {
case ContentType.NONE:
break;
case ContentType.JSON:
_xhr.setRequestHeader('Content-Type', 'application/json');
break;
case ContentType.FORM:
_xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
break;
case ContentType.TEXT:
_xhr.setRequestHeader('Content-Type', 'text/plain');
break;
case ContentType.BLOB:
var blob = req.blob();
if (blob.type) {
_xhr.setRequestHeader('Content-Type', blob.type);
}
break;
}

Kind of XSS & CSRF

getTypeName() { return 'HTML'; }
getTypeName() { return 'Style'; }
getTypeName() { return 'Script'; }
getTypeName() { return 'URL'; }
getTypeName() { return 'ResourceURL'; }

Angular2 Sanitize Form Input for XSS attacks

Yes it does! Angular2 provides a built-in, enabled by default, anti XSS protection named DomSanitizationService.

https://github.com/angular/angular/blob/7a524e3debf85f3cb773e7d4a8914d625ddb256e/modules/%40angular/platform-browser/src/security/dom_sanitization_service.ts

Angular 2 - Get cookie from response

https://stackoverflow.com/questions/42289817/angular-2-get-cookie-from-response

TypeScript in 5 minutes

http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

TypeScript Cheat Sheet

Last updated for: TypeScript 2.2

https://www.sitepen.com/blog/2013/12/31/typescript-cheat-sheet/

Last updated for: TypeScript 1.8.10

https://github.com/frontdevops/typescript-cheat-sheet

TypeScript Cheat Sheet by Greg Finzer

https://www.cheatography.com/gregfinzer/cheat-sheets/typescript/pdf_bw/

The Definitive TypeScript Guide

This article describes the features and functionality of TypeScript 2.2

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/

Angular 2 Cheat Sheet

https://angular.io/guide/cheatsheet

https://www.cheatography.com/gregfinzer/cheat-sheets/angular-2/pdf_bw/

https://www.cheatography.com/gregfinzer/cheat-sheets/angular-2/

7 Best Practices of Angular2 Security [Security Risk]

In this section, I am going to describes Angular2 security for developing angular applications and the common applications vulnerabilities and cross site scripting XSS attacks and XSS also known as one click attacks.

“How”? “When”? And “Use”?

There are 4 key points to keep in mind when developing Angular's apps i.e.

1. The application level securities like authentication and authorization.
2. Coding with best Practices.
3. Preventing cross site scripting (XSS).
4. Reporting vulnerabilities and HTTP Level vulnerabilities.

Try the live example of the code shown in this page.

How to write Best Practices Applications? 
As per my understanding be careful when developing apps,

1. We can keep watching latest version of Angular’s library releases.
2. Don't try to add hacks or modify to Angular’s library file.
3. Avoid Angular’s Security Risk.
4. Also avoid direct use of the DOM APIs.
5. Try to use offline template compiler.
6. Try to prevent CSRF or XSRF attacks in your web apps.
7. Try to prevent JSON data in your web apps.

How to prevent Cross Site Scripting (XSS)?
This is the most common attacks on the web apps. To prevent XSS attacks, you must prevent malicious code from the DOM entering.

What is the Use the Offline Template Compiler?
The most use of offline template compiler is performance and it does improve the apps performance.

Also an offline template compiler is used to prevent vulnerabilities’ class that is called template injection.

Reference,

https://docs.angularjs.org/guide/security

If you have any doubt to implementing security in the apps, find a professional security reviewer and take help.

I hope you are enjoying with this post! Please share with you friends. Thank you!

Khai báo biến trong TypeScript

https://freetuts.net/khai-bao-bien-trong-typescript-747.html

Biến const trong ES6

https://freetuts.net/const-bien-khong-thay-doi-gia-tri-trong-es6-614.html

Interface trong TypeScript

https://viblo.asia/p/interface-trong-typescript-phan-1-6J3Zgk3LZmB

https://viblo.asia/p/interface-trong-typescript-phan-2-YWOZrDNY5Q0

Những tính năng quan trọng của ES6 và một số thủ thuật JavaScript

+ let & const

+ arrow functions (với từ khóa =>)

+ modules

+ Spread

+ For-of

+ Classes

Toán tử !!

Sử dụng toán tử !! sẽ giúp chúng ta kiểm tra được một vài giá trị đặc biệt như 0, null, "", undefined, NaN. Khi đặt !! trước các giá trị trên, thì sẽ trả về false, ngược lại sẽ trả về true. Ví dụ:

function test(demo) {
 console.log(!!demo);
}

test(1);
// true
test(0);
// false

Toán tử +

Toán tử này giúp ta chuyển 1 chuỗi các số (string) sang number. Hoặc có thể kiểm tra xem chuỗi đó có phải là một chuỗi số hay không. Bởi vì hàm sẽ trả về NaN đối với các chuỗi có chứa kí tự không phải số.

function test(demo) {
  console.log(+demo);
}

test("123");
// 123
test("hello");
// NaN

Toán tử ||

Đối với toán tử ||, mục đích là để chèn giá trị mặc điịnh như là tham số thứ hai. Giả sử tham số đầu tiên trả về false thì tham số thứ hai sẽ được sử dụng như là một giá trị mặc định.

var a = null || 1;
// a = 1

Sử dụng vòng lặp đối với mảng

Chúng ta thường có thói quen khi chạy một vòng lặp đối với mảng như sau:

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

Nếu như làm như vậy, cứ ứng với một vòng lặp sẽ phải tính lại độ rộng của mảng. Như vậy sẽ ảnh hưởng tới hiệu suất của hệ thống. Thay vì thế, chúng ta có thể khởi tạo một biến gán giá trị là độ rộng của mảng, từ đó sẽ dễ dàng hơn trong vòng lặp.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var length = array.length;
for (var i = 0; i < length; i++) {
 console.log(array[i]);
}

Loại bỏ n thành phần cuối của mảng

Giả sử chúng ta có 1 mảng gồm 10 phần tử từ 1 đến 10. Để loại bỏ n (với n < độ rộng của mảng) phần tử cuối cùng của mảng chúng ta chỉ cần làm như sau:

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
array.length -= 3;
console.log(array);
// [1, 2, 3, 4, 5, 6 ,7]

Gộp các mảng

Sử dụng method concat() để gộp 2 mảng lại với nhau.

var array1 = [1, 2, 3, 4, 5];
var array2 = [6, 7, 8, 9, 10];
console.log(array1.concat(array2));
//  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]