171. How do you support server side XSS protection in Angular application?
The server-side XSS protection is supported in an angular application by using a templating language that automatically escapes values to prevent XSS vulnerabilities on the server. But don't use a templating language to generate Angular templates on the server side which creates a high risk of introducing template-injection vulnerabilities.
172. Is angular prevents http level vulnerabilities?
Angular has built-in support for preventing http level vulnerabilities such as as cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Even though these vulnerabilities need to be mitigated on server-side, Angular provides helpers to make the integration easier on the client side.
1. HttpClient supports a token mechanism used to prevent XSRF attacks
2. HttpClient library recognizes the convention of prefixed JSON responses(which non-executable js code with ")]}',\n" characters) and automatically strips the string ")]}',\n" from all responses before further parsing
173. What are Http Interceptors?
Http Interceptors are part of @angular/common/http, which inspect and transform HTTP requests from your application to the server and vice-versa on HTTP responses. These interceptors can perform a variety of implicit tasks, from authentication to logging. The syntax of HttpInterceptor interface looks like as below,
```javascript
interface HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
}
```
You can use interceptors by declaring a service class that implements the intercept() method of the HttpInterceptor interface.
```javascript
@Injectable()
export class MyInterceptor implements HttpInterceptor {
constructor() {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
...
}
}
```
After that you can use it in your module,
```javascript
@NgModule({
...
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptor,
multi: true
}
]
...
})
export class AppModule {}
```
174. What are the applications of HTTP interceptors?
The HTTP Interceptors can be used for different variety of tasks,
1. Authentication
2. Logging
3. Caching
4. Fake backend
5. URL transformation
6. Modifying headers
175. Is multiple interceptors supported in Angular?
Yes, Angular supports multiple interceptors at a time. You could define multiple interceptors in providers property:
```javascript
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
],
```
The interceptors will be called in the order in which they were provided. i.e, MyFirstInterceptor will be called first in the above interceptors configuration.
176. How can I use interceptor for an entire application?
You can use same instance of `HttpInterceptors` for the entire app by importing the `HttpClientModule` only in your AppModule, and add the interceptors to the root application injector.
For example, let's define a class that is injectable in root application.
```javascript
@Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(req).do(event => {
if (eventt instanceof HttpResponse) {
// Code goes here
}
});
}
}
```
After that import HttpClientModule in AppModule
```javascript
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
177. How does Angular simplifies Internationalization?
Angular simplifies the below areas of internationalization,
1. Displaying dates, number, percentages, and currencies in a local format.
2. Preparing text in component templates for translation.
3. Handling plural forms of words.
4. Handling alternative text.
178. How do you manually register locale data?
By default, Angular only contains locale data for en-US which is English as spoken in the United States of America . But if you want to set to another locale, you must import locale data for that new locale. After that you can register using `registerLocaleData` method and the syntax of this method looks like below,
```javascript
registerLocaleData(data: any, localeId?: any, extraData?: any): void
```
For example, let us import German locale and register it in the application
```javascript
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
registerLocaleData(localeDe, 'de');
```
179. What are the four phases of template translation?
The i18n template translation process has four phases:
1. **Mark static text messages in your component templates for translation:** You can place i18n on every element tag whose fixed text is to be translated. For example, you need i18n attribue for heading as below,
```javascript
<h1 i18n>Hello i18n!</h1>
```
2. **Create a translation file:** Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file. i.e, Open terminal window at the root of the app project and run the CLI command xi18n.
```bash
ng xi18n
```
The above command creates a file named `messages.xlf` in your project's root directory.
**Note:** You can supply command options to change the format, the name, the location, and the source locale of the extracted file.
3. **Edit the generated translation file:** Translate the extracted text into the target language. In this step, create a localization folder (such as `locale`)under root directory(src) and then create target language translation file by copying and renaming the default messages.xlf file. You need to copy source text node and provide the translation under target tag.
For example, create the translation file(messages.de.xlf) for German language
```javascript
<trans-unit id="greetingHeader" datatype="html">
<source>Hello i18n!</source>
<target>Hallo i18n !</target>
<note priority="1" from="description">A welcome header for this sample</note>
<note priority="1" from="meaning">welcome message</note>
</trans-unit>
```
4. **Merge the completed translation file into the app:** You need to use Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.
1. --i18nFile=path to the translation file
2. --i18nFormat=format of the translation file
3. --i18nLocale= locale id
180. What is the purpose of i18n attribute?
The Angular i18n attribute marks translatable content. It is a custom attribute, recognized by Angular tools and compilers. The compiler removes it after translation.
**Note:** Remember that i18n is not an Angular directive.
Comments
Post a Comment
please do not enter any spam link in the comment box