# Angular ## The Checklist Checklist [from here](https://lsgeurope.com/post/angular-security-checklist). * [ ] Angular को एक क्लाइंट-साइड फ्रेमवर्क माना जाता है और इसे सर्वर-साइड सुरक्षा प्रदान करने की अपेक्षा नहीं की जाती है * [ ] प्रोजेक्ट कॉन्फ़िगरेशन में स्क्रिप्ट के लिए सोर्समैप अक्षम है * [ ] अविश्वसनीय उपयोगकर्ता इनपुट को हमेशा टेम्पलेट्स में उपयोग करने से पहले इंटरपोलेट या सैनीटाइज किया जाता है * [ ] उपयोगकर्ता के पास सर्वर-साइड या क्लाइंट-साइड टेम्पलेट्स पर कोई नियंत्रण नहीं है * [ ] अविश्वसनीय उपयोगकर्ता इनपुट को एप्लिकेशन द्वारा विश्वसनीय होने से पहले एक उपयुक्त सुरक्षा संदर्भ का उपयोग करके सैनीटाइज किया जाता है * [ ] `BypassSecurity*` विधियों का अविश्वसनीय इनपुट के साथ उपयोग नहीं किया जाता है * [ ] अविश्वसनीय उपयोगकर्ता इनपुट को Angular क्लासेस जैसे `ElementRef`, `Renderer2` और `Document`, या अन्य JQuery/DOM सिंक्स में नहीं भेजा जाता है ## What is Angular Angular एक **शक्तिशाली** और **ओपन-सोर्स** फ्रंट-एंड फ्रेमवर्क है जिसे **Google** द्वारा बनाए रखा जाता है। यह कोड की पठनीयता और डिबगिंग को बढ़ाने के लिए **TypeScript** का उपयोग करता है। मजबूत सुरक्षा तंत्र के साथ, Angular सामान्य क्लाइंट-साइड कमजोरियों जैसे **XSS** और **open redirects** को रोकता है। इसे **सर्वर-साइड** पर भी उपयोग किया जा सकता है, जिससे **दोनों कोणों** से सुरक्षा पर विचार करना महत्वपूर्ण हो जाता है। ## Framework architecture Angular के मूलभूत सिद्धांतों को बेहतर ढंग से समझने के लिए, आइए इसके आवश्यक अवधारणाओं के माध्यम से चलते हैं। सामान्य Angular प्रोजेक्ट आमतौर पर इस तरह दिखता है: ```bash my-workspace/ ├── ... #workspace-wide configuration files ├── src │ ├── app │ │ ├── app.module.ts #defines the root module, that tells Angular how to assemble the application │ │ ├── app.component.ts #defines the logic for the application's root component │ │ ├── app.component.html #defines the HTML template associated with the root component │ │ ├── app.component.css #defines the base CSS stylesheet for the root component │ │ ├── app.component.spec.ts #defines a unit test for the root component │ │ └── app-routing.module.ts #provides routing capability for the application │ ├── lib │ │ └── src #library-specific configuration files │ ├── index.html #main HTML page, where the component will be rendered in │ └── ... #application-specific configuration files ├── angular.json #provides workspace-wide and project-specific configuration defaults └── tsconfig.json #provides the base TypeScript configuration for projects in the workspace ``` अन्य दस्तावेज़ के अनुसार, हर Angular एप्लिकेशन में कम से कम एक घटक होता है, रूट घटक (`AppComponent`) जो घटक पदानुक्रम को DOM से जोड़ता है। प्रत्येक घटक एक वर्ग को परिभाषित करता है जिसमें एप्लिकेशन डेटा और लॉजिक होता है, और यह एक HTML टेम्पलेट से संबंधित होता है जो एक लक्षित वातावरण में प्रदर्शित होने वाले दृश्य को परिभाषित करता है। `@Component()` डेकोरेटर उस वर्ग को घटक के रूप में पहचानता है जो इसके ठीक नीचे है, और टेम्पलेट और संबंधित घटक-विशिष्ट मेटाडेटा प्रदान करता है। `AppComponent` को `app.component.ts` फ़ाइल में परिभाषित किया गया है। Angular NgModules एक एप्लिकेशन डोमेन, एक कार्यप्रवाह, या निकटता से संबंधित क्षमताओं के सेट के लिए एक संकलन संदर्भ घोषित करते हैं। हर Angular एप्लिकेशन में एक रूट मॉड्यूल होता है, जिसे पारंपरिक रूप से `AppModule` कहा जाता है, जो एप्लिकेशन को लॉन्च करने के लिए बूटस्ट्रैप तंत्र प्रदान करता है। एक एप्लिकेशन में आमतौर पर कई कार्यात्मक मॉड्यूल होते हैं। `AppModule` को `app.module.ts` फ़ाइल में परिभाषित किया गया है। Angular `Router` NgModule एक सेवा प्रदान करता है जो आपको अपने एप्लिकेशन में विभिन्न एप्लिकेशन राज्यों और दृश्य पदानुक्रमों के बीच एक नेविगेशन पथ परिभाषित करने की अनुमति देता है। `RouterModule` को `app-routing.module.ts` फ़ाइल में परिभाषित किया गया है। डेटा या लॉजिक के लिए जो किसी विशिष्ट दृश्य से संबंधित नहीं है, और जिसे आप घटकों के बीच साझा करना चाहते हैं, आप एक सेवा वर्ग बनाते हैं। एक सेवा वर्ग परिभाषा के तुरंत पहले `@Injectable()` डेकोरेटर होता है। डेकोरेटर मेटाडेटा प्रदान करता है जो अन्य प्रदाताओं को आपकी कक्षा में निर्भरता के रूप में इंजेक्ट करने की अनुमति देता है। निर्भरता इंजेक्शन (DI) आपको अपने घटक वर्गों को पतला और कुशल बनाए रखने की अनुमति देता है। वे सर्वर से डेटा नहीं लाते, उपयोगकर्ता इनपुट को मान्य नहीं करते, या सीधे कंसोल में लॉग नहीं करते; वे ऐसी कार्यों को सेवाओं को सौंपते हैं। ## Sourcemap configuration Angular फ्रेमवर्क TypeScript फ़ाइलों को JavaScript कोड में अनुवाद करता है `tsconfig.json` विकल्पों का पालन करते हुए और फिर `angular.json` कॉन्फ़िगरेशन के साथ एक प्रोजेक्ट बनाता है। `angular.json` फ़ाइल को देखते हुए, हमने एक विकल्प देखा जो एक sourcemap को सक्षम या अक्षम करने के लिए है। Angular दस्तावेज़ के अनुसार, डिफ़ॉल्ट कॉन्फ़िगरेशन में स्क्रिप्ट के लिए एक sourcemap फ़ाइल सक्षम होती है और यह डिफ़ॉल्ट रूप से छिपी नहीं होती है: ```json "sourceMap": { "scripts": true, "styles": true, "vendor": false, "hidden": false } ``` आम तौर पर, sourcemap फ़ाइलों का उपयोग डिबगिंग उद्देश्यों के लिए किया जाता है क्योंकि ये उत्पन्न फ़ाइलों को उनके मूल फ़ाइलों से मैप करती हैं। इसलिए, इन्हें उत्पादन वातावरण में उपयोग करने की सिफारिश नहीं की जाती है। यदि sourcemaps सक्षम हैं, तो यह पठनीयता में सुधार करता है और Angular प्रोजेक्ट की मूल स्थिति को दोहराकर फ़ाइल विश्लेषण में मदद करता है। हालाँकि, यदि इन्हें अक्षम किया गया है, तो एक समीक्षक अभी भी एंटी-सुरक्षा पैटर्न की खोज करके एक संकलित JavaScript फ़ाइल का मैन्युअल रूप से विश्लेषण कर सकता है। इसके अलावा, एक संकलित JavaScript फ़ाइल Angular प्रोजेक्ट के साथ ब्राउज़र डेवलपर टूल्स → Sources (या Debugger और Sources) → \[id].main.js में पाई जा सकती है। सक्षम विकल्पों के आधार पर, इस फ़ाइल के अंत में निम्नलिखित पंक्ति हो सकती है `//# sourceMappingURL=[id].main.js.map` या यह नहीं हो सकती, यदि **hidden** विकल्प **true** पर सेट है। फिर भी, यदि **scripts** के लिए sourcemap अक्षम है, तो परीक्षण अधिक जटिल हो जाता है, और हम फ़ाइल प्राप्त नहीं कर सकते। इसके अलावा, प्रोजेक्ट निर्माण के दौरान sourcemap को सक्षम किया जा सकता है जैसे `ng build --source-map`। ## डेटा बाइंडिंग बाइंडिंग उस प्रक्रिया को संदर्भित करती है जिसमें एक घटक और इसके संबंधित दृश्य के बीच संचार होता है। इसका उपयोग Angular ढांचे के लिए डेटा को स्थानांतरित करने के लिए किया जाता है। डेटा को विभिन्न तरीकों से पास किया जा सकता है, जैसे कि घटनाओं, इंटरपोलेशन, गुणों, या दो-तरफा बाइंडिंग तंत्र के माध्यम से। इसके अलावा, डेटा को संबंधित घटकों (माता-पिता-शिशु संबंध) और दो अप्रासंगिक घटकों के बीच सेवा सुविधा का उपयोग करके भी साझा किया जा सकता है। हम डेटा प्रवाह द्वारा बाइंडिंग को वर्गीकृत कर सकते हैं: * डेटा स्रोत से दृश्य लक्ष्य (जिसमें _interpolation_, _properties_, _attributes_, _classes_ और _styles_ शामिल हैं); इसे टेम्पलेट में `[]` या `{{}}` का उपयोग करके लागू किया जा सकता है; * दृश्य लक्ष्य से डेटा स्रोत (जिसमें _events_ शामिल हैं); इसे टेम्पलेट में `()` का उपयोग करके लागू किया जा सकता है; * दो-तरफा; इसे टेम्पलेट में `[()]` का उपयोग करके लागू किया जा सकता है। बाइंडिंग को गुणों, घटनाओं, और विशेषताओं पर, साथ ही स्रोत निर्देशिका के किसी भी सार्वजनिक सदस्य पर बुलाया जा सकता है: | TYPE | TARGET | EXAMPLES | | --------- | -------------------------------------------------------- | -------------------------------------------------------------------- | | Property | Element property, Component property, Directive property | \ | | Event | Element event, Component event, Directive event | \ ``` * DOM तत्व की प्रॉपर्टी सेट करने के लिए, आप `Renderer2.setProperty()` विधि का उपयोग कर सकते हैं और XSS हमले को ट्रिगर कर सकते हैं: ```tsx //app.component.ts import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public constructor ( private renderer2: Renderer2 ){} @ViewChild("img") img!: ElementRef; setProperty(){ this.renderer2.setProperty(this.img.nativeElement, 'innerHTML', ''); } } //app.component.html ``` हमारे शोध के दौरान, हमने XSS और CSS इंजेक्शन के संबंध में अन्य `Renderer2` विधियों जैसे `setStyle()`, `createComment()`, और `setValue()` के व्यवहार की भी जांच की। हालाँकि, हम इन विधियों के लिए कोई मान्य हमलावर वेक्टर नहीं ढूंढ सके। #### jQuery jQuery एक तेज, छोटा और फीचर-समृद्ध JavaScript लाइब्रेरी है जिसे Angular प्रोजेक्ट में HTML DOM ऑब्जेक्ट्स के साथ हेरफेर करने में मदद के लिए उपयोग किया जा सकता है। हालाँकि, जैसा कि ज्ञात है, इस लाइब्रेरी की विधियों का उपयोग XSS भेद्यता प्राप्त करने के लिए किया जा सकता है। Angular प्रोजेक्ट्स में कुछ कमजोर jQuery विधियों के शोषण पर चर्चा करने के लिए, हमने इस उपखंड को जोड़ा। * `html()` विधि सेट के पहले तत्व की HTML सामग्री प्राप्त करती है या हर मिलान किए गए तत्व की HTML सामग्री सेट करती है। हालाँकि, डिज़ाइन के अनुसार, कोई भी jQuery कंस्ट्रक्टर या विधि जो HTML स्ट्रिंग स्वीकार करती है, संभावित रूप से कोड निष्पादित कर सकती है। यह `"); }); } } //app.component.html

some text here

``` * `jQuery.parseHTML()` विधि स्ट्रिंग को DOM नोड्स के सेट में परिवर्तित करने के लिए मूल विधियों का उपयोग करती है, जिसे फिर दस्तावेज़ में डाला जा सकता है। ```tsx jQuery.parseHTML(data [, context ] [, keepScripts ]) ``` जैसा कि पहले उल्लेख किया गया है, अधिकांश jQuery APIs जो HTML स्ट्रिंग स्वीकार करते हैं, HTML में शामिल स्क्रिप्ट चलाएंगे। `jQuery.parseHTML()` विधि पार्स की गई HTML में स्क्रिप्ट नहीं चलाती जब तक कि `keepScripts` स्पष्ट रूप से `true` न हो। हालाँकि, अधिकांश वातावरण में अप्रत्यक्ष रूप से स्क्रिप्ट निष्पादित करना संभव है; उदाहरण के लिए, `` विशेषता के माध्यम से। ```tsx //app.component.ts import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ngOnInit() { $("button").on("click", function() { var $palias = $("#palias"), str = "", html = $.parseHTML(str), nodeNames = []; $palias.append(html); }); } } //app.component.html

some text

``` ### Open redirects #### DOM interfaces W3C दस्तावेज़ के अनुसार, `window.location` और `document.location` ऑब्जेक्ट्स को आधुनिक ब्राउज़रों में उपनाम के रूप में माना जाता है। यही कारण है कि उनके कुछ विधियों और प्रॉपर्टीज़ का समान कार्यान्वयन होता है, जो `javascript://` स्कीमा हमलों के साथ एक ओपन रीडायरेक्ट और DOM XSS का कारण बन सकता है जैसा कि नीचे उल्लेख किया गया है। * `window.location.href`(और `document.location.href`) वर्तमान DOM स्थान ऑब्जेक्ट प्राप्त करने का मानक तरीका `window.location` का उपयोग करना है। इसका उपयोग ब्राउज़र को एक नए पृष्ठ पर रीडायरेक्ट करने के लिए भी किया जा सकता है। परिणामस्वरूप, इस ऑब्जेक्ट पर नियंत्रण होने से हमें एक ओपन रीडायरेक्ट भेद्यता का शोषण करने की अनुमति मिलती है। ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.href = "https://google.com/about" } } //app.component.html ``` शोषण प्रक्रिया निम्नलिखित परिदृश्यों के लिए समान है। * `window.location.assign()`(और `document.location.assign()`) यह विधि विंडो को निर्दिष्ट URL पर दस्तावेज़ लोड और प्रदर्शित करने का कारण बनती है। यदि हमारे पास इस विधि पर नियंत्रण है, तो यह ओपन रीडायरेक्ट हमले के लिए एक सिंक हो सकता है। ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.assign("https://google.com/about") } } ``` * `window.location.replace()`(और `document.location.replace()`) यह विधि वर्तमान संसाधन को प्रदान किए गए URL पर वाले से बदल देती है। यह `assign()` विधि से भिन्न है कि `window.location.replace()` का उपयोग करने के बाद, वर्तमान पृष्ठ सत्र इतिहास में नहीं बचाया जाएगा। हालाँकि, जब हमारे पास इस विधि पर नियंत्रण होता है, तो ओपन रीडायरेक्ट भेद्यता का शोषण करना भी संभव है। ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.location.replace("http://google.com/about") } } ``` * `window.open()` `window.open()` विधि एक URL लेती है और इसे एक नए या मौजूदा टैब या विंडो में लोड करती है। इस विधि पर नियंत्रण होने से XSS या ओपन रीडायरेक्ट भेद्यता को ट्रिगर करने का अवसर भी मिल सकता है। ```tsx //app.component.ts ... export class AppComponent { goToUrl(): void { window.open("https://google.com/about", "_blank") } } ``` #### Angular classes * Angular दस्तावेज़ के अनुसार, Angular `Document` DOM दस्तावेज़ के समान है, जिसका अर्थ है कि Angular में क्लाइंट-साइड भेद्यताओं का शोषण करने के लिए DOM दस्तावेज़ के लिए सामान्य वेक्टरों का उपयोग करना संभव है। `Document.location` प्रॉपर्टीज़ और विधियाँ सफल ओपन रीडायरेक्ट हमलों के लिए सिंक हो सकती हैं जैसा कि उदाहरण में दिखाया गया है: ```tsx //app.component.ts import { Component, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(@Inject(DOCUMENT) private document: Document) { } goToUrl(): void { this.document.location.href = 'https://google.com/about'; } } //app.component.html ``` * शोध चरण के दौरान, हमने ओपन रीडायरेक्ट भेद्यताओं के लिए Angular `Location` क्लास की भी समीक्षा की, लेकिन कोई मान्य वेक्टर नहीं मिला। `Location` एक Angular सेवा है जिसका उपयोग एप्लिकेशन वर्तमान URL के साथ बातचीत करने के लिए कर सकते हैं। इस सेवा में दिए गए URL को संशोधित करने के लिए कई विधियाँ हैं - `go()` , `replaceState()`, और `prepareExternalUrl()`। हालाँकि, हम उन्हें बाहरी डोमेन पर रीडायरेक्ट करने के लिए उपयोग नहीं कर सकते। उदाहरण के लिए: ```tsx //app.component.ts import { Component, Inject } from '@angular/core'; import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}], }) export class AppComponent { location: Location; constructor(location: Location) { this.location = location; } goToUrl(): void { console.log(this.location.go("http://google.com/about")); } } ``` परिणाम: `http://localhost:4200/http://google.com/about` * Angular `Router` क्लास मुख्य रूप से उसी डोमेन के भीतर नेविगेट करने के लिए उपयोग की जाती है और एप्लिकेशन में कोई अतिरिक्त भेद्यताएँ नहीं लाती है: ```jsx //app-routing.module.ts const routes: Routes = [ { path: '', redirectTo: 'https://google.com', pathMatch: 'full' }] ``` परिणाम: `http://localhost:4200/https:` निम्नलिखित विधियाँ भी डोमेन के दायरे के भीतर नेविगेट करती हैं: ```jsx const routes: Routes = [ { path: '', redirectTo: 'ROUTE', pathMatch: 'prefix' } ] this.router.navigate(['PATH']) this.router.navigateByUrl('URL') ``` ## References * [Angular](https://angular.io/) * [Angular Security: The Definitive Guide (Part 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1) * [Angular Security: The Definitive Guide (Part 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2) * [Angular Security: The Definitive Guide (Part 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3) * [Angular Security: Checklist](https://lsgeurope.com/post/angular-security-checklist) * [Workspace and project file structure](https://angular.io/guide/file-structure) * [Introduction to components and templates](https://angular.io/guide/architecture-components) * [Source map configuration](https://angular.io/guide/workspace-config#source-map-configuration) * [Binding syntax](https://angular.io/guide/binding-syntax) * [Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48) * [Sanitization and security contexts](https://angular.io/guide/security#sanitization-and-security-contexts) * [GitHub - angular/dom\_security\_schema.ts](https://github.com/angular/angular/blob/main/packages/compiler/src/schema/dom\_security\_schema.ts) * [XSS in Angular and AngularJS](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/XSS%20Injection/XSS%20in%20Angular.md) * [Angular Universal](https://angular.io/guide/universal) * [DOM XSS](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting/dom-xss) * [Angular ElementRef](https://angular.io/api/core/ElementRef) * [Angular Renderer2](https://angular.io/api/core/Renderer2) * [Renderer2 Example: Manipulating DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/) * [jQuery API Documentation](http://api.jquery.com/) * [How To Use jQuery With Angular (When You Absolutely Have To)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9) * [Angular Document](https://angular.io/api/common/DOCUMENT) * [Angular Location](https://angular.io/api/common/Location) * [Angular Router](https://angular.io/api/router/Router)