Angular 5 & ASP.Net Core с (CSP) политикой безопасности контента - PullRequest
Новая
       19

Angular 5 & ASP.Net Core с (CSP) политикой безопасности контента

0 голосов
/ 13 мая 2018

Я провожу некоторое время с CSP, чтобы сделать приложение Angular 5 максимально безопасным, но изо всех сил пытаюсь заставить его работать.

Я включил CSP, используя NWebSec, следующим образом: 

 app.UseCsp(options =>
        {
            options.DefaultSources(s => s.Self());
            options.ScriptSources(s => s.Self());
            options.StyleSources(s => s.Self().CustomSources("stackpath.bootstrapcdn.com"));
        }); // Use Content Security Policy

Я построил угловое приложение, используя: 

ng build --aot --prod

В базовом приложении ASP.Net размещается (встроенное) приложение Angular с использованием промежуточного программного обеспечения app.UseStaticFiles().

Я прочитал несколько статей и попытался найти прямой ответ о том, как заставить это работать, но я не могу пропустить эту ошибку, которая исходит из /main.ae5fbeccd9ff1305a55c.js:

Отказался от применения встроенного стиля, поскольку он нарушает следующую директиву политики безопасности содержимого: "style-src 'self' stackpath.bootstrapcdn.com". Либо ключевое слово unsafe-inline, хеш ('sha256-47DEQpj8HBSa + / TImW + 5JCeuQeRkm5NMpJWZG3hSuFU ='), либо одноразовый номер ('nonce -...') требуется для включения встроенного выполнения.

Я считаю, что Angular создает код, который вызывает эти ошибки, и решение заключается в использовании команды "--aot" при сборке приложения, но это не работает для меня.

Я пробовал это с Angular 5 и Angular 6 (даже пытался использовать новый проект Angular). Та же проблема.

Мой вопрос: Есть ли в настоящее время рекомендуемый способ заставить Angular 5/6 работать с CSP без ущерба для безопасности? и если нет, то что будет дальше?

Приветствия

Дополнительные детали: Index.html (приложение по умолчанию для сборки Angular 6) 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Default Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.34c57ab7888ec1573f9c.css">
</head>

<body>
  <app-root></app-root>

  <script type="text/javascript" src="runtime.6afe30102d8fe7337431.js"></script>
  <script type="text/javascript" src="polyfills.2903ad11212d7d797800.js"></script>
  <script type="text/javascript" src="main.ae5fbeccd9ff1305a55c.js"></script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Обработка CSS в Angular не совместима с современными стандартами безопасности, поскольку стили остаются встроенными во всех компонентах ( - вот билет для этого). Пока что нам приходится мириться с неприятной директивой style-src 'unsafe-inline' в заголовках CSP.

Для простого приложения со шрифтами Google заголовок CSP может выглядеть как 

Content-Security-Policy: "default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com";

В этом посте подробно рассматриваются политики CSP в Angular.

0 голосов
/ 13 мая 2018

Это безопасность безопасности, не связанная с Angular. Вы использовали встроенный стиль в index.cshtml (при условии, что вы используете Razor Engine в ASP.NET Core). 

app.UseCsp(options =>
        {
            options.DefaultSources(s => s.Self());
            options.ScriptSources(s => s.Self());
            options.StyleSources(s => s.Self().CustomSources("stackpath.bootstrapcdn.com").UnsafeInline());
        });

или

Добавьте эту строку в тег <head>. 

<meta http-equiv="Content-Security-Policy" content=""style-src:'unsafe-inline'; script-src 'unsafe-inline'">
...