Heroku 上 Angular 5 个应用的内容安全问题

Question

我最近将我的 Angular 4.x 应用程序升级到 Angular 5.0.0 并遇到 "Not Found" 文本显示在 URL 上的问题我托管的应用程序和 Heroku 抛出的 404。

当我查看控制台时，我看到大约 5 个关于内容安全策略 (CSP) 的错误

错误看起来都差不多是这样的：

Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://swissrugbystats-frontend.herokuapp.com”).

我在部署时出现 0 个错误（通过 git push heroku、运行在具有 node server.js 的快速服务器上部署）。该应用程序在升级到 angular 5.0.0.

之前使用相同的设置运行良好

此外，当我在本地启动应用程序时，它运行得非常好。

我的 server.js 很基础：

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

// Run the app by serving the static files
// in the dist directory

app.use(express.static(__dirname + '/dist'));

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used

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

我是否必须像这样显式添加 csp 配置：https://ponyfoo.com/articles/content-security-policy-in-express-apps？

我的package.json:

{
  "name": "ch-swissrugbystats-angular2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "test": "ng test",
    "lint": "ng lint",
    "build": "ng build",
    "e2e": "ng e2e",
    "start": "node server.js",
    "deploy": "git push origin && git push heroku"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "angular2-oauth2": "^1.3.10",
    "chart.js": "^2.7.1",
    "core-js": "^2.5.0",
    "express": "^4.16.2",
    "foundation-sites": "^6.4.3",
    "ng2-charts": "^1.6.0",
    "rxjs": "^5.5.0",
    "typescript": "2.4.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.4.9",
    "@angular/compiler-cli": "5.0.0",
    "@types/jasmine": "2.6.0",
    "@types/node": "~8.0.46",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0"
  },
  "engines": {
    "node": "8.6.0",
    "npm": "5.5.1"
  }
}

Answer 1

嗯，解决方法很简单。基本上构建从未在 heroku 上触发，因此 dist 文件夹及其内容根本不存在。

我唯一要做的就是在 package.json 的 scripts 部分添加以下行：

"heroku-postbuild": "ng build --aot --prod",

有关 heroku 特定构建步骤的更多信息：https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

我最初在 Heroku 上设置部署所遵循的文章：https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

在文章中他们使用了 postinstall 脚本，但我决定使用 heroku 脚本，因为我不想在每次本地安装后都触发它。

Answer 2

对我来说，使用 npm package serve 而不是 server.js script

很有帮助

Heroku 上 Angular 5 个应用的内容安全问题

Content security issue in Angular 5 app on Heroku

content-security-policy

angular