Angular 安全策略 Heroku

Question

我有 Angular 带有路由的应用程序：

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 {}

并在我的 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/">

我仍然有内容安全策略问题。

只有当我尝试时

{ path: '', component: HomePageComponent },

应用程序显示正确。

我的应用程序本地工作没有问题，但是当我尝试在 Heroku 上时 e.q https://myAngularApp.herokuapp.com/some-routing 我在控制台中得到了这个结果

在我的网站上 -> 未找到

我需要做什么才能使 heroku 应用程序正常工作？

Answer 1

您的元标记中存在语法错误。所有 CSP 指令均以分号 ; 分隔。您还错过了导致 default-src 'none' 的 default-src* 中的 space。所以你的元标记应该是这样的：

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

顺便说一句，default-src * 'self' 可以用 default-src * 代替，因为 * 涵盖任何主机源，包括 'self'.

请注意：

在 script-src 指令中使用 'unsafe-inline' 会导致 CSP 无法防止 XSS。
style-src 'unsafe-inline' 表示您无法通过 <link href='your_domain.com/style.css' rel='stylesheet'> 从您自己的域加载外部样式。也许 style-src 'self' 'unsafe-inline' 就是您所需要的。

Answer 2

我从 index.html 中删除了所有与 CSP 相关的文件。我对 server.js 文件添加了一些更改，“未找到”消失了，但我运行变成了“无法获取/路径”问题。我在这里找到了答案

下面我把修改过的文件放在这里：

 "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);

关键是添加这个：

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

感谢@g运行ty 的贡献。

Angular 安全策略 Heroku

Angular Security Policy Heroku

heroku

content-security-policy

angular