Merge pull request #184 from EpicVoyage/master

Added support for Content-Security-Policy through Nonce injection.

README.md

@@ -238,6 +238,9 @@ this.printService.printStyle = styleSheet;
 this.printService.styleSheetFile = fileLocation;
 ```
 
+## Content-Security-Policy (CSP) Support
+If Angular is configured to use a [CSP Nonce](https://angular.io/api/core/CSP_NONCE), ngx-print will automatically inject the `[printStyle]` CSS rules with this Nonce authorization.
+
 ## Contributors :1st_place_medal: 
 
 Huge thanks to: [deeplotia](https://github.com/deeplotia) , [Ben L](https://github.com/broem) , [Gavyn McKenzie](https://github.com/gavmck) , [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz), [Core121](https://github.com/Core121) and to all  `ngx-print` users 

src/lib/ngx-print.base.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { CSP_NONCE, Inject, Injectable, Optional } from "@angular/core";
 import { PrintOptions } from "./print-options";
 
 @Injectable({
@@ -9,6 +9,8 @@ export class PrintBase {
     private _printStyle: string[] = [];
     private _styleSheetFile: string = '';
 
+  constructor(@Inject(CSP_NONCE) @Optional() private nonce?: string | null) {}
+
     //#region Getters and Setters
     /**
      * Sets the print styles based on the provided values.
@@ -34,7 +36,8 @@ export class PrintBase {
      * -join/replace to transform an array objects to css-styled string
      */
     public returnStyleValues() {
-        return `<style> ${this._printStyle.join(' ').replace(/,/g, ';')} </style>`;
+      const styleNonce = this.nonce ? ` nonce="${this.nonce}"` : '';
+        return `<style${styleNonce}> ${this._printStyle.join(' ').replace(/,/g, ';')} </style>`;
     }
 
     /**
@@ -196,7 +199,7 @@ export class PrintBase {
             links = this.getElementTag('link');
         }
 
-        // If the openNewTab option is set to true, then set the popOut option to an empty string. 
+        // If the openNewTab option is set to true, then set the popOut option to an empty string.
         // This will cause the print dialog to open in a new tab.
         if (printOptions.openNewTab) {
             popOut = '';

src/lib/ngx-print.service.spec.ts

@@ -1,8 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NgxPrintService } from './ngx-print.service';
-import { Component } from '@angular/core';
+import { Component, CSP_NONCE } from '@angular/core';
 import { PrintOptions } from './print-options';
+
+const testNonce = 'dummy-nonce-value';
+
 @Component({
   template: `
   <div id="print-section">
@@ -57,7 +60,7 @@ describe('NgxPrintService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestNgxPrintServiceComponent],
-      providers: [NgxPrintService]
+      providers: [{ provide: CSP_NONCE, useValue: testNonce }, NgxPrintService]
     });
     service = TestBed.inject(NgxPrintService);
     // Create a fixture object (that is going to allows us to create an instance of that component)
@@ -178,6 +181,6 @@ describe('NgxPrintService', () => {
     service.printStyle = styleSheet;
 
     // Ensure the print styles are correctly formatted in the document
-    expect(service.returnStyleValues()).toEqual('<style> h2{border:solid 1px} h1{color:red;border:1px solid} </style>');
+    expect(service.returnStyleValues()).toEqual('<style nonce="' + testNonce + '"> h2{border:solid 1px} h1{color:red;border:1px solid} </style>');
   });
 });