Search code examples
angularherokucontent-security-policy

Angular Security Policy Heroku

I have Angular application with routing:

const routes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'rome-routing', component: SomeRoutingComponent},
  { path: 'other-routing', component: OtherRoutingComponent }
];

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

and have config in my index.html

<meta http-equiv="Content-Security-Policy"
          content="default-src*; 'self' style-src 'unsafe-inline' script-src 'self' 'unsafe-inline' 'unsafe-eval' https://mySpringBootApp.herokuapp.com https://myAngularApp.herokuapp.com/">

and i still have Content Security Policy issue.

Only when i try

{ path: '', component: HomePageComponent },

application displays correctly.

My application localy working without problems but on Heroku when i try e.q https://myAngularApp.herokuapp.com/some-routing i have this result in console

enter image description here

and on my site -> Not Found enter image description here

What do I have to do for the heroku application to work properly?

Solution

  • I deleted all CSP-related files from index.html. I added a few changes to the server.js file and "Not Found" disappeared, but I ran into "Cannot GET / path" problem. I found the answer here Angular 2: 404 error occur when I refresh through the browser

    Below I put the files that have been changed:

     "name": "surveyjs-angular-cli",
  "version": "1.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "postinstall": "ng build --aot",
    "start": "node server.js",
    "lint": "ng lint",
    "e2e": "ng e2e"
    },

    app.module

    import { HashLocationStrategy, LocationStrategy } from '@angular/common';


@NgModule({
  declarations: [
    AppComponent,
    SurveyComponent,
    MyOtherComponents
    HomePageComponent,
  ],
  imports: [BrowserModule, FormsModule, HttpClientModule, AppRoutingModule],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  exports: [AppComponent, SurveyComponent, BrowserModule, FormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

    index.html

    <html class="image">
  <head>
    <title>Title</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.ckeditor.com/4.5.1/standard/ckeditor.js"></script>
    <script src="https://cdn.rawgit.com/inexorabletash/polyfill/master/typedarray.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

    server.js

    const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static('./dist'));

app.get('', function(req, res) {
  res.sendFile(path.join(__dirname, '/dist/', 'index.html'));
});

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/dist/', 'index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8090);

    The key was to add this:

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

    Credit to @granty for his contribution.