Skip to content

Commit f841878

Browse files
codehippie1codehippie1
committed
iframe security
1 parent a3b9647 commit f841878

File tree

8 files changed

+397
-10
lines changed

8 files changed

+397
-10
lines changed

‎SampleApp/src/app/features/features.component.html‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -880,13 +880,6 @@ <h3>Using Convenience Configuration Objects</h3>
880880
<!-- PDF Viewer -->
881881
<div class="viewer-panel">
882882
<mat-card>
883-
<mat-card-header>
884-
<mat-card-title>ng2-pdfjs-viewer</mat-card-title>
885-
<mat-card-subtitle
886-
>Live Demo with Current Configuration</mat-card-subtitle
887-
>
888-
</mat-card-header>
889-
890883
<mat-card-content>
891884
<!-- trackBy forces component recreation when key changes -->
892885
<ng2-pdfjs-viewer

‎docs-website/data/projects.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"industry": "Finance",
99
"techStack": ["Angular", "Node.js", "MongoDB"],
1010
"featuresUsed": ["custom-theming", "annotations", "search"],
11-
"versionUsed": "25.0.8",
11+
"versionUsed": "25.0.10",
1212
"developerName": "John Doe",
1313
"companyName": "Acme Corp",
1414
"submittedAt": "2024-01-15T10:00:00Z",

‎docs-website/docs/api/component-inputs.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1032,6 +1032,77 @@ interface SecurityWarning {
10321032
}
10331033
```
10341034

1035+
### iframe Security (Built-in)
1036+
1037+
The iframe includes built-in security with static sandbox attributes for enhanced protection:
1038+
1039+
```html
1040+
<!-- Built-in security (always enabled) -->
1041+
<ng2-pdfjs-viewer
1042+
pdfSrc="document.pdf">
1043+
</ng2-pdfjs-viewer>
1044+
```
1045+
1046+
**Static Sandbox Attributes:**
1047+
- `allow-forms` - Required for PDF form functionality
1048+
- `allow-scripts` - Required for PDF.js JavaScript execution
1049+
- `allow-same-origin` - Required for loading PDF files and assets
1050+
- `allow-modals` - Required for PDF.js dialogs (print, download)
1051+
1052+
**Security Benefits:**
1053+
- **XSS Prevention** - Prevents malicious scripts from affecting parent page
1054+
- **CSP Compliance** - Meets Content Security Policy requirements
1055+
- **Data Protection** - Limits iframe access to parent window context
1056+
- **Enterprise Ready** - Suitable for corporate security environments
1057+
1058+
> **Note**: Sandbox attributes are fixed for security and Angular compliance. They cannot be customized dynamically.
1059+
1060+
### `iframeBorder`
1061+
- **Type**: `string | number`
1062+
- **Default**: `"0"`
1063+
- **Description**: iframe border style for visual customization
1064+
1065+
```typescript
1066+
// Default (no border)
1067+
iframeBorder = "0";
1068+
1069+
// Custom border style
1070+
iframeBorder = "2px solid #ccc";
1071+
1072+
// Numeric border (pixels)
1073+
iframeBorder = 1;
1074+
1075+
// No border (explicit)
1076+
iframeBorder = "none";
1077+
```
1078+
1079+
```html
1080+
<!-- Default (no border) -->
1081+
<ng2-pdfjs-viewer
1082+
pdfSrc="document.pdf">
1083+
</ng2-pdfjs-viewer>
1084+
1085+
<!-- Custom border -->
1086+
<ng2-pdfjs-viewer
1087+
pdfSrc="document.pdf"
1088+
iframeBorder="2px solid #ccc">
1089+
</ng2-pdfjs-viewer>
1090+
1091+
<!-- Numeric border -->
1092+
<ng2-pdfjs-viewer
1093+
pdfSrc="document.pdf"
1094+
[iframeBorder]="1">
1095+
</ng2-pdfjs-viewer>
1096+
```
1097+
1098+
**Border Values:**
1099+
- `"0"` or `0` - No border (default)
1100+
- `"none"` - No border (explicit)
1101+
- `"1px solid #000"` - 1px solid black border
1102+
- `"2px dashed #ccc"` - 2px dashed gray border
1103+
- `"3px solid #007acc"` - 3px solid blue border
1104+
- Any valid CSS border value
1105+
10351106
## Next Steps
10361107

10371108
- 📤 [**Component Outputs**](./component-outputs) - Event handling

‎docs-website/docs/changelog.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# What's New in v25.0.0 🎉
1+
# What's New in v25.x 🎉
22

33
## Release Highlights
44

5-
Version 25.0.0 marks a **complete rewrite** of ng2-pdfjs-viewer with modern Angular patterns, enhanced performance, and a focus on developer experience.
5+
Version 25.x marks a **complete rewrite** of ng2-pdfjs-viewer with modern Angular patterns, enhanced performance, and a focus on developer experience.
66

77
:::tip Major Release
88
This is a **major release** with breaking changes. Please review the [Migration Guide](./migration/overview) for upgrade instructions.

‎docs-website/docs/features/iframe-security.md‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
# iframe Security
2+
3+
ng2-pdfjs-viewer includes built-in iframe security features to protect your application from potential security vulnerabilities.
4+
5+
## 🔒 Security Overview
6+
7+
The library uses static iframe sandbox attributes to provide a secure environment for PDF viewing while maintaining full functionality. The sandbox configuration is fixed for security and Angular compliance.
8+
9+
### Built-in Security Configuration
10+
11+
```html
12+
<ng2-pdfjs-viewer pdfSrc="document.pdf"></ng2-pdfjs-viewer>
13+
```
14+
15+
**Static sandbox attributes (always enabled):**
16+
- `allow-forms` - Enables PDF form functionality
17+
- `allow-scripts` - Enables PDF.js JavaScript execution
18+
- `allow-same-origin` - Enables loading PDF files and assets
19+
- `allow-modals` - Enables PDF.js dialogs (print, download)
20+
21+
## 🛡️ Security Benefits
22+
23+
### XSS Prevention
24+
- Prevents malicious scripts in PDFs from affecting the parent page
25+
- Isolates PDF.js execution environment
26+
- Blocks unauthorized access to parent window context
27+
28+
### CSP Compliance
29+
- Meets Content Security Policy requirements
30+
- Compatible with strict CSP headers
31+
- Reduces security audit findings
32+
33+
### Data Protection
34+
- Limits iframe access to parent window
35+
- Prevents data exfiltration through PDFs
36+
- Protects sensitive application data
37+
38+
### Enterprise Ready
39+
- Suitable for corporate security environments
40+
- Meets regulatory compliance requirements
41+
- Integrates with security monitoring tools
42+
43+
## ⚙️ Configuration Options
44+
45+
### Basic Usage
46+
47+
```html
48+
<!-- Built-in security (always enabled) -->
49+
<ng2-pdfjs-viewer
50+
pdfSrc="document.pdf">
51+
</ng2-pdfjs-viewer>
52+
```
53+
54+
### iframe Border Customization
55+
56+
```html
57+
<!-- Custom border styling -->
58+
<ng2-pdfjs-viewer
59+
pdfSrc="document.pdf"
60+
iframeBorder="2px solid #ccc">
61+
</ng2-pdfjs-viewer>
62+
```
63+
64+
> **Note**: Sandbox attributes are fixed for security and Angular compliance. Only border styling can be customized.
65+
66+
## 📋 Sandbox Attributes Reference
67+
68+
### Required Attributes
69+
70+
| Attribute | Purpose | Required For |
71+
|-----------|---------|--------------|
72+
| `allow-forms` | PDF form functionality | PDF form filling and submission |
73+
| `allow-scripts` | JavaScript execution | PDF.js viewer functionality |
74+
| `allow-same-origin` | Same-origin requests | Loading PDF files and assets |
75+
| `allow-modals` | Dialog boxes | Print dialog, download confirmations |
76+
77+
### Optional Attributes
78+
79+
| Attribute | Purpose | Use Case |
80+
|-----------|---------|----------|
81+
| `allow-popups` | Open new windows | External window functionality |
82+
| `allow-downloads` | Download files | PDF download functionality |
83+
| `allow-top-navigation` | Navigate parent window | PDF navigation features |
84+
| `allow-pointer-lock` | Pointer lock API | Advanced interaction features |
85+
86+
### Security Attributes
87+
88+
| Attribute | Purpose | Security Impact |
89+
|-----------|---------|-----------------|
90+
| `allow-same-origin` | Same-origin requests | Required for functionality |
91+
| `allow-forms` | Form submission | Required for PDF forms |
92+
| `allow-scripts` | JavaScript execution | Required for PDF.js |
93+
| `allow-modals` | Dialog boxes | Required for user interactions |
94+
95+
## 🔧 Advanced Configuration
96+
97+
### Border Customization
98+
99+
```typescript
100+
export class MyComponent {
101+
// Dynamic border configuration
102+
borderConfig = "0";
103+
104+
// Update border based on theme
105+
updateBorder(theme: string) {
106+
switch (theme) {
107+
case 'dark':
108+
this.borderConfig = "1px solid #333";
109+
break;
110+
case 'light':
111+
this.borderConfig = "1px solid #ccc";
112+
break;
113+
case 'none':
114+
this.borderConfig = "0";
115+
break;
116+
}
117+
}
118+
}
119+
```
120+
121+
```html
122+
<ng2-pdfjs-viewer
123+
pdfSrc="document.pdf"
124+
[iframeBorder]="borderConfig">
125+
</ng2-pdfjs-viewer>
126+
```
127+
128+
## 🧪 Testing Security Configuration
129+
130+
### Basic Functionality Test
131+
132+
```typescript
133+
describe('iframe Security', () => {
134+
it('should load PDF with static sandbox', () => {
135+
const fixture = TestBed.createComponent(PdfViewerComponent);
136+
fixture.componentInstance.pdfSrc = 'test.pdf';
137+
fixture.detectChanges();
138+
139+
const iframe = fixture.debugElement.query(By.css('iframe'));
140+
expect(iframe.nativeElement.sandbox).toBe('allow-forms allow-scripts allow-same-origin allow-modals');
141+
});
142+
143+
it('should allow custom border configuration', () => {
144+
const fixture = TestBed.createComponent(PdfViewerComponent);
145+
fixture.componentInstance.pdfSrc = 'test.pdf';
146+
fixture.componentInstance.iframeBorder = '2px solid #ccc';
147+
fixture.detectChanges();
148+
149+
const iframe = fixture.debugElement.query(By.css('iframe'));
150+
expect(iframe.nativeElement.style.border).toBe('2px solid #ccc');
151+
});
152+
});
153+
```
154+
155+
### Security Validation Test
156+
157+
```typescript
158+
it('should prevent XSS attacks', () => {
159+
// Test that malicious scripts in PDFs cannot access parent window
160+
const maliciousPdf = createMaliciousPdf();
161+
// ... test implementation
162+
});
163+
```
164+
165+
## 🚨 Common Issues and Solutions
166+
167+
### Issue: PDF Forms Not Working
168+
169+
**Problem:** PDF forms are not interactive or submit buttons don't work.
170+
171+
**Solution:** Ensure `allow-forms` is included in sandbox attributes.
172+
173+
```html
174+
<ng2-pdfjs-viewer
175+
pdfSrc="document.pdf"
176+
iframeSandbox="allow-forms allow-scripts allow-same-origin allow-modals">
177+
</ng2-pdfjs-viewer>
178+
```
179+
180+
### Issue: Download/Print Buttons Not Working
181+
182+
**Problem:** Download and print functionality is disabled.
183+
184+
**Solution:** Add `allow-modals` to sandbox attributes.
185+
186+
```html
187+
<ng2-pdfjs-viewer
188+
pdfSrc="document.pdf"
189+
iframeSandbox="allow-forms allow-scripts allow-same-origin allow-modals">
190+
</ng2-pdfjs-viewer>
191+
```
192+
193+
### Issue: External Window Not Opening
194+
195+
**Problem:** "Open in new tab" button doesn't work.
196+
197+
**Solution:** Add `allow-popups` to sandbox attributes.
198+
199+
```html
200+
<ng2-pdfjs-viewer
201+
pdfSrc="document.pdf"
202+
iframeSandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
203+
</ng2-pdfjs-viewer>
204+
```
205+
206+
### Issue: PDF Not Loading
207+
208+
**Problem:** PDF fails to load with sandbox enabled.
209+
210+
**Solution:** Ensure `allow-same-origin` is included for same-domain PDFs.
211+
212+
```html
213+
<ng2-pdfjs-viewer
214+
pdfSrc="document.pdf"
215+
iframeSandbox="allow-forms allow-scripts allow-same-origin allow-modals">
216+
</ng2-pdfjs-viewer>
217+
```
218+
219+
## 🔍 Security Best Practices
220+
221+
### 1. Use Default Configuration
222+
- Start with the default sandbox attributes
223+
- Only add additional permissions when needed
224+
- Test thoroughly after any changes
225+
226+
### 2. Regular Security Audits
227+
- Review sandbox configuration regularly
228+
- Test with security scanning tools
229+
- Monitor for security advisories
230+
231+
### 3. Principle of Least Privilege
232+
- Only enable permissions that are actually needed
233+
- Document why each permission is required
234+
- Remove unused permissions
235+
236+
### 4. Environment-Specific Configuration
237+
- Use stricter settings in production
238+
- Relax settings only in development when needed
239+
- Implement security policies consistently
240+
241+
### 5. Monitoring and Logging
242+
- Monitor for security violations
243+
- Log sandbox configuration changes
244+
- Alert on unexpected behavior
245+
246+
## 📚 Related Documentation
247+
248+
- [Security Features Overview](./security) - Complete security guide
249+
- [Component Inputs](../api/component-inputs) - All configuration options
250+
- [Getting Started](../getting-started) - Quick setup guide
251+
- [Examples](../examples/basic-usage) - Practical examples
252+
253+
## 🆘 Support
254+
255+
If you encounter security-related issues:
256+
257+
1. Check the [Common Issues](#-common-issues-and-solutions) section
258+
2. Review your sandbox configuration
259+
3. Test with minimal sandbox attributes
260+
4. Open an issue on GitHub with details
261+
262+
Remember: Security is a shared responsibility. Always test your configuration and stay updated with security best practices.

‎docs-website/docs/features/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ Explore specific features in detail:
186186

187187
- 🎨 [**Theming**](./theming) - Customize the appearance
188188
- 🔒 [**Security**](./security) - URL validation and security features
189+
- 🛡️ [**iframe Security**](./iframe-security) - iframe sandbox and security configuration
189190
- 🪟 [**External Window**](./external-window) - External window and tab management
190191
- 📚 [**Examples**](../examples/basic-usage) - See it in action
191192
- 📖 [**API Reference**](../api/component-inputs) - Complete documentation

0 commit comments

Comments
 (0)