CSP compliance for CSS is added

Author: codehippie1

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

@@ -387,6 +387,46 @@ pageSpacing = {
 toolbarColor = '#f5f5f5'; // Light gray toolbar
 ```
 
+#### `borderRadius`
+- **Type**: `string`
+- **Default**: `undefined`
+- **Description**: Border radius for UI elements
+
+```typescript
+borderRadius = '8px'; // Rounded corners
+```
+
+#### `customCSS`
+- **Type**: `string`
+- **Default**: `undefined`
+- **Description**: Custom CSS styles to apply to the viewer
+
+```typescript
+customCSS = '.page { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }';
+```
+
+#### `cspNonce`
+- **Type**: `string`
+- **Default**: `undefined`
+- **Description**: CSP nonce for customCSS when using strict Content Security Policy
+
+```typescript
+// Only needed with strict CSP and customCSS
+cspNonce = 'random-nonce-value';
+```
+
+```html
+<!-- With strict CSP -->
+<ng2-pdfjs-viewer
+  [customCSS]="customStyles"
+  [cspNonce]="cspNonce">
+</ng2-pdfjs-viewer>
+```
+
+:::info CSP Compliance
+The viewer is CSP-compliant by default. The `cspNonce` input is only needed when using `customCSS` with strict Content Security Policy that requires nonces for inline styles.
+:::
+
 ### Advanced Theming
 
 #### `themeConfig`
@@ -402,6 +442,7 @@ interface ThemeConfig {
   textColor?: string;
   borderRadius?: string;
   customCSS?: string;
+  cspNonce?: string;  // Optional CSP nonce
 }
 
 themeConfig: ThemeConfig = {

docs-website/docs/features/security.md

@@ -248,7 +248,68 @@ interface SecurityWarning {
 ### Additional Security Measures
 
 1. **Server-Side Validation** - Always validate file access permissions
-2. **Content Security Policy** - Implement CSP headers
+2. **Content Security Policy** - Implement CSP headers (viewer is CSP-compliant)
 3. **HTTPS Only** - Use HTTPS in production
 4. **File Type Validation** - Validate PDF files on upload
 5. **Access Control** - Implement proper user authentication and authorization
+
+## 🔐 Content Security Policy (CSP) Compliance
+
+### Overview
+
+ng2-pdfjs-viewer is fully compliant with strict Content Security Policy (`style-src 'self'`). All styling is implemented using CSP-safe methods.
+
+### CSP Compliance Features
+
+- ✅ **External Stylesheets** - All static styles loaded from external CSS files
+- ✅ **CSS Custom Properties** - Dynamic styling via `element.style.setProperty()`
+- ✅ **CSS Classes** - Visibility and layout via class toggles
+- ✅ **Optional Nonce Support** - For `customCSS` with strict CSP
+
+### Using with Strict CSP
+
+The viewer works out-of-the-box with strict CSP policies:
+
+```html
+<!-- Your index.html -->
+<meta http-equiv="Content-Security-Policy" 
+      content="default-src 'self'; 
+               style-src 'self'; 
+               script-src 'self';">
+
+<!-- Viewer works without modifications -->
+<ng2-pdfjs-viewer pdfSrc="document.pdf"></ng2-pdfjs-viewer>
+```
+
+### Custom CSS with CSP
+
+When using `customCSS` with strict CSP, provide a nonce:
+
+```typescript
+// Component
+customCSS = '.page { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }';
+cspNonce = 'your-random-nonce'; // Must match CSP policy
+```
+
+```html
+<!-- index.html -->
+<meta http-equiv="Content-Security-Policy" 
+      content="style-src 'self' 'nonce-your-random-nonce';">
+
+<!-- Template -->
+<ng2-pdfjs-viewer
+  [customCSS]="customCSS"
+  [cspNonce]="cspNonce">
+</ng2-pdfjs-viewer>
+```
+
+### CSP Best Practices
+
+1. **Default Usage** - No nonce needed for standard theming
+2. **Custom CSS** - Only provide nonce when using `customCSS`
+3. **Server-Generated Nonce** - Generate unique nonce per request
+4. **Test Thoroughly** - Verify zero CSP violations in console
+
+:::tip
+The viewer is CSP-compliant by default. You only need the `cspNonce` input when using `customCSS` with strict CSP policies.
+:::

docs-website/docs/features/theming.md

@@ -92,6 +92,32 @@ export class MyComponent {
 </ng2-pdfjs-viewer>
 ```
 
+## CSP Compliance
+
+:::info
+All theming features are **Content Security Policy (CSP) compliant**. The viewer uses only CSP-safe methods:
+- External CSS files
+- CSS custom properties via `element.style.setProperty()`
+- CSS class toggles
+
+No inline style injection that would violate strict CSP policies.
+:::
+
+### Using customCSS with Strict CSP
+
+When using `customCSS` with strict CSP, provide a nonce:
+
+```typescript
+themeConfig: ThemeConfig = {
+  theme: 'dark',
+  primaryColor: '#ff6b6b',
+  customCSS: '.page { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }',
+  cspNonce: 'your-random-nonce'  // Match your CSP policy
+};
+```
+
+See [Security Features](./security#content-security-policy-csp-compliance) for details.
+
 ## CSS Custom Properties
 
 ### Available CSS Variables

lib/README.md

@@ -200,6 +200,7 @@ Add PDF.js assets to your `angular.json`:
 
 ### 🔒 Security Features
 
+- **CSP Compliant** - Works with strict Content Security Policy (`style-src 'self'`)
 - **URL Validation** - Prevents unauthorized file parameter manipulation in external viewer
 - **Custom Security Templates** - Angular template support for security warnings
 - **Console Warnings** - Developer-friendly security notifications
@@ -496,6 +497,7 @@ export class MyComponent {
 | `textColor`                  | `string`                                  | -            | Text color                            |
 | `borderRadius`               | `string`                                  | -            | Border radius                         |
 | `customCSS`                  | `string`                                  | -            | Custom CSS styles                     |
+| `cspNonce`                   | `string`                                  | -            | CSP nonce for customCSS (optional)    |
 | `showSpinner`                | `boolean`                                 | `true`       | Show loading spinner                  |
 | `customSpinnerTpl`           | `TemplateRef`                             | -            | Custom spinner template               |
 | `spinnerClass`               | `string`                                  | -            | Custom spinner CSS class              |