CSP final fix

Author: codehippie1

SECURITY.md

@@ -128,5 +128,5 @@ We thank the security community for their contributions to making ng2-pdfjs-view
 
 ---
 
-**Last Updated**: January 2025  
-**Version**: 25.0.12
+**Last Updated**: October 2025  
+**Version**: 25.x

docs-website/docs/installation.md

@@ -21,7 +21,7 @@ npm list ng2-pdfjs-viewer
 You should see output similar to:
 ```
 [email protected] /path/to/your-app
-└── [email protected].12
+└── [email protected].13
 ```
 
 ## Production Deployment

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-pdfjs-viewer",
-  "version": "25.0.12",
+  "version": "25.0.13",
   "description": "The most comprehensive Angular PDF viewer powered by Mozilla PDF.js. 7M+ downloads, mobile-first, production-ready with complete rewrite in v25.x",
   "author": {
     "name": "Aneesh Goapalakrishnan",

lib/pdfjs/web/viewer.css

@@ -5299,6 +5299,11 @@ body.wait::before{
           mask-image:var(--toolbarButton-print-icon);
 }
 
+/* Print service dialog styling */
+.print-service-dialog {
+  min-width: 200px;
+}
+
 #downloadButton::before{
   -webkit-mask-image:var(--toolbarButton-download-icon);
           mask-image:var(--toolbarButton-download-icon);

lib/pdfjs/web/viewer.html

@@ -703,7 +703,7 @@
         </div>
       </dialog>
 
-        <dialog id="printServiceDialog" style="min-width: 200px;">
+        <dialog id="printServiceDialog" class="print-service-dialog">
           <div class="row">
             <span data-l10n-id="pdfjs-print-progress-message"></span>
           </div>

lib/src/ng2-pdfjs-viewer.component.ts

@@ -140,6 +140,16 @@ import { ChangeOriginTracker } from "./utils/ChangeOriginTracker";
           transform: rotate(360deg);
         }
       }
+
+      /* Iframe border styling */
+      .ng2-pdfjs-viewer-iframe {
+        border: 0;
+      }
+      
+      /* Dynamic border classes */
+      .ng2-pdfjs-viewer-iframe.has-border {
+        border: 1px solid #ccc;
+      }
     `,
   ],
   template: `
@@ -148,7 +158,7 @@ import { ChangeOriginTracker } from "./utils/ChangeOriginTracker";
         [title]="iframeTitle || 'PDF document viewer'"
         [hidden]="externalWindow || (!externalWindow && !pdfSrc)"
         sandbox="allow-forms allow-scripts allow-same-origin allow-modals"
-        [style.border]="iframeBorder"
+        [class]="getIframeClasses()"
         #iframe
         width="100%"
         height="100%"
@@ -362,6 +372,19 @@ export class PdfJsViewerComponent
     };
   }
 
+  // Helper method to get iframe CSS classes
+  public getIframeClasses(): string {
+    const classes = ['ng2-pdfjs-viewer-iframe'];
+    
+    // Add border class if iframeBorder is set and not "0"
+    if (this.iframeBorder && this.iframeBorder !== "0" && this.iframeBorder !== 0) {
+      classes.push('has-border');
+    }
+    
+    return classes.join(' ');
+  }
+
+
   // Error template button actions
   public reloadViewer(): void {
     this.refresh();

lib/v5-upgrade.md

@@ -163,13 +163,68 @@
 
 ## Future Upgrade Process
 
+### Standard PDF.js Upgrade Steps
+
 1. **Download new PDF.js version**
-2. **Replace all PDF.js files** (viewer.mjs, viewer.html, viewer.css, etc.)  
+2. **Replace core PDF.js files**:
+   - `viewer.mjs`
+   - `viewer.html` ⚠️ **Manual edits required** (see below)
+   - `viewer.css` ⚠️ **Manual edits required** (see below)
+   - All other PDF.js files (worker, fonts, images, etc.)
 3. **Preserve `postmessage-wrapper.js`** (single integration file)
-4. **Test functionality** - verify all features work
-5. **Update wrapper if needed** (much easier than merging patches)
+4. **Re-apply manual edits** (see sections below)
+5. **Test functionality** - verify all features work
+6. **Update wrapper if needed** (much easier than merging patches)
+
+### Manual Edits Required for Each Upgrade
+
+#### 1. viewer.html - PostMessage Wrapper Integration
+**Location**: After the closing `</div>` tag (around line 740)
+**Purpose**: Include our custom postmessage wrapper for Angular integration
+
+```html
+<!-- Add this script tag after the main viewer content -->
+<script src="postmessage-wrapper.js"></script>
+```
+
+#### 2. viewer.html - CSP Compliance Fix
+**Location**: Line ~706 (printServiceDialog)
+**Purpose**: Remove inline styles for CSP compliance
+
+**Change from:**
+```html
+<dialog id="printServiceDialog" style="min-width: 200px;">
+```
+
+**Change to:**
+```html
+<dialog id="printServiceDialog" class="print-service-dialog">
+```
+
+#### 3. viewer.css - Print Service Dialog Styling
+**Location**: After `#printButton::before` styles (around line 5300)
+**Purpose**: Add CSS class for print service dialog
+
+```css
+/* Print service dialog styling */
+.print-service-dialog {
+  min-width: 200px;
+}
+```
+
+### Upgrade Checklist
+
+- [ ] Download new PDF.js version
+- [ ] Replace `viewer.mjs` and other core files
+- [ ] Replace `viewer.html` and add postmessage wrapper script
+- [ ] Remove inline style from `printServiceDialog` in `viewer.html`
+- [ ] Replace `viewer.css` and add print service dialog class
+- [ ] Verify `postmessage-wrapper.js` is preserved
+- [ ] Test component functionality
+- [ ] Verify CSP compliance (no inline style violations)
+- [ ] Update this documentation if new manual edits are needed
 
-**Proven Success**: v5.3.93 upgrade required **zero code changes** and worked immediately.
+**Proven Success**: v5.3.93 upgrade required **zero code changes** and worked immediately after applying the manual edits above.
 
 ---