Angular Security
Angular டெம்ப்ளேட் பைண்டிங்களைத் தூய்மைப்படுத்துவதன் மூலம் XSS-க்கு எதிராக பாதுகாக்கிறது.
பாதுகாப்பு அத்தியாவசியங்கள்
XSS பாதுகாப்பு: Angular ஸ்கிரிப்ட் ஊசி போடுவதைத் தடுக்க டெம்ப்ளேட் பைண்டிங்களைத் தூய்மைப்படுத்துகிறது.
தூய்மைப்படுத்தல்: ஆபத்தான மதிப்புகள் DOM-க்கு எழுதுவதற்கு முன் நீக்கப்படுகின்றன அல்லது மாற்றப்படுகின்றன.
பண்பு பைண்டிங்: URLs/HTML-க்கு சரம் இணைப்புகளை விட property bindings பயன்படுத்தவும்.
தவிர்க்க: DomSanitizer-ஐ audit செய்யப்பட்ட, அரிதான சந்தர்ப்பங்களில் மட்டுமே பயன்படுத்தவும்.
Angular தூய்மைப்படுத்தல்
// Angular sanitizes [innerHTML], [href], [src]
@Component({ template: `<div [innerHTML]="html"></div>` })
class C { html = '<b>Hello</b> <script>alert(1)</script>'; }
Jassif Team பாதுகாப்பு குறிப்புகள்:
HTTP மற்றும் டெம்ப்ளேட்டுகள் பற்றி காண்க.
[href]/[src]/[innerHTML] உடன் bind செய்யவும் மற்றும் Angular தூய்மைப்படுத்த அனுமதிக்கவும்.
DomSanitizer-ஐ audit செய்யப்பட்ட, அரிதான சந்தர்ப்பங்களில் மட்டுமே பயன்படுத்தவும்.
தூய்மைப்படுத்தல் அடிப்படைகள்
தூய்மைப்படுத்தலுடன் பண்பு பைண்டிங்
// Property binding runs the sanitizer
<img [src]="photoUrl" alt="...">
<a [href]="profileUrl">Profile</a>
முழுமையான எடுத்துக்காட்டு
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Sanitized HTML</h3>
<div [innerHTML]="html"></div>
`
})
class App {
html = `Hello <script>alert('xss')</script>`;
}
bootstrapApplication(App);
எடுத்துக்காட்டு விளக்கம்:
[innerHTML]: Angular bound HTML-ஐ தூய்மைப்படுத்துகிறது, ஆபத்தான உள்ளடக்கத்தை (எ.கா., ஸ்கிரிப்ட்கள்) நீக்குகிறது.
Property bindings: தூய்மைப்படுத்தி இயங்குவதற்கு [innerHTML]/[href]/[src] பயன்படுத்தவும்.
Interpolation: {{ ... }} முன்னிருப்பாக HTML-ஐ escape செய்கிறது; பாதுகாப்பான HTML செருகுவதற்கு bindings பயன்படுத்தவும்.
முக்கிய பாதுகாப்பு புள்ளிகள்
Angular [innerHTML], [src], மற்றும் [href] க்கு bind செய்யப்பட்ட மதிப்புகளைத் தூய்மைப்படுத்துகிறது.
HTML/URLs-க்கு சரம் இணைப்புகளைத் தவிர்க்கவும்.
தூய்மைப்படுத்தி இயங்குவதற்கு property bindings பயன்படுத்தவும்.
தூய்மைப்படுத்தியைத் தவிர்க்க தவிர்க்கவும்; பாதுகாப்பான தரவு ஓட்டம் மற்றும் டெம்ப்ளேட்டுகளைப் பயன்படுத்தவும்.
பாதுகாப்பான DOM APIs
தூய்மைப்படுத்தி இயங்குவதை உறுதிப்படுத்த URLs மற்றும் HTML-க்கு property bindings பயன்படுத்தவும்.
DomSanitizer.bypassSecurityTrust*-ன் எந்தப் பயன்பாட்டையும் audit செய்யவும்; நோக்கம் மற்றும் காரணத்தை ஆவணப்படுத்தவும்.
சிறிய utilities-இல் encapsulated, சோதனை செய்யப்பட்ட, நிலையான உள்ளடக்க பாதைகளுக்கு மட்டுமே bypass-ஐ வரம்பிடவும்.
DomSanitizer பயன்பாடு
import { DomSanitizer } from '@angular/platform-browser';
// Use: [href]="safeUrl" with validated values
// Avoid bypass unless strictly necessary and audited:
// const safe = sanitizer.bypassSecurityTrustUrl(untrusted);
பாதுகாப்பு வழிகாட்டுதல்கள்:
கடக்க வேண்டாம் விசுவாசமற்ற/பயனர் உள்ளீட்டை bypassSecurityTrust* க்கு.
மட்டுமே bypass செய்யவும் சோதனை செய்யப்பட்ட, நிலையான மூலங்களுக்கு; கருத்துகளுடன் ஒரு சிறிய utility-இல் encapsulated செய்யவும்.
Content Security Policy (CSP) ஐ செயல்படுத்தவும்; வலுவான XSS பாதுகாப்புக்கு Trusted Types ஐக் கருத்தில் கொள்ளவும்.
பாதுகாப்பு சிறந்த நடைமுறைகள்
| நடைமுறை | பாதுகாப்பான அணுகுமுறை | ஆபத்து |
|---|---|---|
| HTML பைண்டிங் | தூய்மைப்படுத்தலுடன் [innerHTML] | XSS தாக்குதல்கள் |
| URL பைண்டிங் | [href]/[src] property binding | JavaScript URL injection |
| பயனர் உள்ளீடு | எப்போதும் தூய்மைப்படுத்து/சரிபார்க்கவும் | குறியீடு injection |
| DOM கையாளுதல் | Angular டெம்ப்ளேட்டுகள் | நேரடி DOM கையாளுதல் ஆபத்துகள் |
| CSP | Content Security Policy ஐ செயல்படுத்தவும் | பல தாக்குதல் திசைகள் |