Настройка заголовка Content-Security-Policy в приложении Angular 6 - PullRequest
0 голосов
/ 05 ноября 2019

Я читаю (отличную) книгу "Pro Angular 6" от Адама Фримена, и мне удалось без проблем воспроизвести его довольно сложные примеры в режиме разработки. Тем не менее, относительно короткая глава «SportsStore: прогрессивные функции и развертывание» сводит меня с ума.

Честно говоря, там не так много. Вам просто нужно запустить приложение в производственном режиме. Сервер Node / Express продолжает отправлять заголовок ответа, который, как мне кажется, предотвращает отображение приложения в браузере. Я получаю ошибку:

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/favicon.ico (“default-src”).

И если вы посмотрите на заголовки ответа, вы увидите, что что-то не так:

Content-Security-Policy: default-src 'none'

Это (я думаю) является основной причиноймоя проблема. Такая политика запрещает отображение приложения в браузере.

Я пытался добавить разные настройки (например, «self» вместо «none») в разных местах, включая server.js. Вы можете проверить две мои попытки в файле (одна из них использует пакет 'шлем', который должен быть подходящим инструментом для этой цели:

const express = require("express");
const https = require("https");
const fs = require("fs");
const history = require("connect-history-api-fallback");
const jsonServer = require("json-server");
const bodyParser = require('body-parser');
const auth = require("./authMiddleware");
const router = jsonServer.router("serverdata.json");
const enableHttps = false;
const ssloptions = {}
const helmet = require(`helmet`)

if (enableHttps) {
    ssloptions.cert =  fs.readFileSync("./ssl/localhost.crt");
    ssloptions.key = fs.readFileSync("./ssl/localhost.key");
}
const app = express();
app.use(bodyParser.json());
app.use(auth);
app.use("/api", router);
app.use(history());
app.use("/", express.static("./dist/SportsStore"));

// TRY 1
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    styleSrc: ["'self'", 'maxcdn.bootstrapcdn.com']
  }
}))

// TRY 2
// custom header
app.all("/*", function(req, res, next) {
   res.setHeader("Content-Security-Policy", "default-src 'none'");
   next();
});

app.listen(8080,
    () => console.log("HTTP Server running on port 8080"));
if (enableHttps) {
    https.createServer(ssloptions, app).listen(8443,
        () => console.log("HTTPS Server running on port 8443"));
} else {
    console.log("HTTPS disabled")
}

Вот мой файл package.json:

{
  "name": "sport-store",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "json": "json-server data.js -p 3500 -m authMiddleware.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/pwa": "^0.8.9",
    "@angular/router": "^6.0.3",
    "@angular/service-worker": "^6.0.3",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "helmet": "^3.21.2",
    "helmet-csp": "^2.9.4",
    "rxjs": "6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "^0.12.2",
    "jsonwebtoken": "^8.5.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Я компилирую код с помощью:

ng build --prod

и запускаю приложение с:

node server.js

В обоих случаях я не получаю ни одного предупреждения. исчерпать идеи, поэтому любая помощь будет высоко ценится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...