CODEWITHSUNDEEP
angularherokucontent-security-policy
mat373
mat373

Reputation: 171

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?

Upvotes: 0

Views: 99

Answers (2)

mat373
mat373

Reputation: 171

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.

Upvotes: 0

granty
granty

Reputation: 8496

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.

Upvotes: 1

Related Questions