Refused to load the font - Angular 2

Question

I am starting on Angular 2 and have been playing around with routes. Everything was working correctly when I did not have routes, but now every time I go to /home, I get this error.

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIw4ABEAAAABQcAAAQABAAAAAAAAAAAAAAAAAAAAA…hgZiCKVViwAiVhsAFFYyNisAIjRLMJCgMCK7MLEAMCK7MRFgMCK1myBCgGRVJEswsQBAIrAA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I am working with HAML but I don't think that is the problem. Index is still .html extension which also doesn't seem to be causing problems.

Here is my index.html.

<html>
  <head>
    <meta charset="UTF-8">
    <title>Freelance Bootcamp</title>
    <base href='/'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <app>App Loading...</app>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule }    from '@angular/http';

import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
    imports: [
        BrowserModule,
    HttpModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomepageComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.haml'
})
export class AppComponent {
    title: 'Freelance Bootcamp Dashboard';
}

homepage.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'homepage',
    templateUrl: 'homepage.component.haml'
})
export class HomepageComponent {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomepageComponent },
]

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

The redirectTo /home works when I go to localhost:4200. If I go to localhost:4200/home, that's when I get the error described and my page gets stuck in the App Loading... screen.

If it helps, I generated the application with angular-cli by typing:

ng new application

If anyone could help me with this, that would be amazing and thank you in advance.

I hope this is enough information to go off of. If not, please let me know what else you need to know.

in angular cli might be some optin for font. not sure, but you can try — Aniruddha Das, Mar 28 '17 at 19:57

score 2 · Answer 1 · answered Jun 12 '17 at 14:53

2

Add a content security policy.

E.g. font-src to use data:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">

And if you use CDNs, add as needed, e.g. for fonts.gstatic.com:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

answered Jun 12 '17 at 14:53

opyate

5,388
1
37
64

not working for me https://stackoverflow.com/questions/47198310/content-security-policy-directive-refused-to-load-the-font?noredirect=1#comment81345495_47198310 – Sunil Garg Nov 09 '17 at 09:47
try this: https://stackoverflow.com/questions/38461211/what-is-the-maximally-permissive-content-security-policy – opyate Nov 09 '17 at 16:01

Refused to load the font - Angular 2

1 Answers1

Linked