Chrome extension with Angular: CSP inline-policy error. Refused to execute inline event handler

Question

I would like to associate a logout function to the navbar of a chrome extension. But when I click on the respective tab, it doesn't navigate to the signin component and gives me the following error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

At https://developer.chrome.com/docs/apps/contentSecurityPolicy/ it says that we can't use inline scripting in your Chrome App pages and the restriction bans both blocks and event handlers ().

I've seen solutions on stackoverflow such as this Refused to execute inline event handler because it violates CSP. (SANDBOX) that say that we could add an id to the button and then add an eventlistener on the javascript but this way I could not add this line of code: this.router.navigate(['/signin']) as is.

I think I could have a typescript file transpiled to javascript but if I place document.getElementById(<id_of_button>) on the ts file it retrieves me null, I think the typescript is loaded before the template.

How can I solve this chrome extension error with Angular and Typescript?

I've the code as below:

App.component.html

    <mat-tab>
      <ng-template mat-tab-label>
          <button mat-button [matMenuTriggerFor]="menuAccount"><mat-icon fontSet="fas" style="font-size: 18px;" fontIcon="fa-user-circle"></mat-icon></button>
      </ng-template>
      <mat-menu #menuAccount="matMenu">
        <button mat-menu-item><mat-icon fontSet="fa" style="font-size: 16px;" fontIcon="fa-cogs"></mat-icon><span>{{dpd_items[0].viewValue}}</span></button>
        <button (click)="logout()" mat-menu-item><mat-icon fontSet="fas" style="font-size: 16px;" fontIcon="fa-sign-out-alt"></mat-icon><span>{{dpd_items[1].viewValue}}</span></button>
      </mat-menu>
    </mat-tab>

App.component.ts

logout() {
  this.router.navigate(['/signin']);
}

score 0 · Answer 1 · answered Nov 19 '21 at 10:14

For me this error came from the CSS being extracted to InlineJs not from the angular code itself.

This meant for me that it works with a build watch,

"angular:watch": "ng build --watch",

but not a build production.

"angular:build": "ng build --configuration=production",

The solution here was to disable the extractCSS.

You can adjust the angular.json in production to extractCss: false

{
    ...
    "projects": {
        "project-name": {
            ...
            "architect": {
                "build": {
                    ...
                    "configurations": {
                        "production": {
                            ...
                            "extractCss": false,
                            ...

Chrome extension with Angular: CSP inline-policy error. Refused to execute inline event handler

1 Answers1