Angular Security Policy Heroku

Question

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

and on my site -> Not Found

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

granty · Answer 1 · 2021-08-28T20:49:22.353

1

You have syntax errors in the meta tag. All CSP directives be separated by semi-colon ;. Also you missed a space in the default-src* that leads to default-src 'none'. So your meta tag should looks like:

<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/">

BTW, default-src * 'self' could be replased with default-src * because * covers any host-sources including 'self'.

Please note:

using 'unsafe-inline' in the script-src directive leads to CSP does not protect against XSS.
style-src 'unsafe-inline' means you can't load external styles from you own domain via <link href='your_domain.com/style.css' rel='stylesheet'>. Maybe style-src 'self' 'unsafe-inline' is what you need there.

edited Aug 28 '21 at 20:49

answered Aug 28 '21 at 20:19

granty

7,234
1
14
21

Thanks for yours answear, but it does't wokr for me :( this is my whole index.html file: [link](https://pastebin.com/X6Ru27My). I tried in different configurations, none of the tips work :( The main page is displayed and the component pages are not found – mat373 Sep 01 '21 at 18:22
And my console after your hints: [link](https://ibb.co/KW5tGyy) – mat373 Sep 01 '21 at 18:28
"Not found" is not a CSP related issue. Do remove CSP meta tag and check is your app works or not. If the app still not working check [related SO posts](https://www.google.ru/search?q=Angular+Heroku+page+not+found+site%3Astackoverflow.com&newwindow=1), because it's a config error. – granty Sep 01 '21 at 23:54

score 0 · Accepted Answer · edited Sep 03 '21 at 00:16

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.

Angular Security Policy Heroku

2 Answers2