Reputation: 967
I am following this solution: https://dev.to/ferdiesletering/how-to-implement-an-inline-styles-content-security-policy-with-angular-and-nginx-2ke2
As per my understanding,
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'nonce-random-csp-nonce';">
We copy the shared_styles_host.ts and modify the _addStylesToHost method.
private _addStylesToHost(
styles: Set<string>,
host: Node,
styleNodes: Node[]
): void {
styles.forEach((style: string) => {
const styleEl = this._doc.createElement('style');
styleEl.textContent = style;
styleEl.setAttribute('nonce', 'random-csp-nonce'); // Add nonce
styleNodes.push(host.appendChild(styleEl));
});
}
My implementation for angular 14,
Below is my shared_styles_host.ts
However is this even the right implementation?
import { eDomSharedStylesHost } from '@angular/platform-browser';// what to import from here
export class CustomDomSharedStylesHost {
private _doc:any;
private _addStylesToHost(
styles: Set<string>,
host: Node,
styleNodes: Node[]
): void {
styles.forEach((style: string) => {
const styleEl = this._doc.createElement('style');
styleEl.textContent = style;
styleEl.setAttribute('nonce', 'random-csp-nonce'); // Add nonce
styleNodes.push(host.appendChild(styleEl));
});
}
}
There is no export member_addStylesToHost method to overwrite from @angular/platform-browser in angular 14 version as shown in the screenshot.
Also eslint keeps on throwing error of: _addStylesToHost declared but never used
Upvotes: 1
Views: 666