Загрузка ресурса заблокирована политикой безопасности контента - PullRequest
Новая
       22

Загрузка ресурса заблокирована политикой безопасности контента

0 голосов
/ 31 мая 2019

Я получаю сообщение об ошибке ниже в консоли моего браузера:

Политика безопасности содержимого. Настройки страницы заблокировали загрузку ресурса по адресу http://localhost:3000/favicon.ico («default-src»).

Я искал в Интернете и увидел, что это должно быть исправлено с помощью фрагмента кода ниже: 

<meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https: http:;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">

Я добавил это в свой файл app.component.html внешнего интерфейса (родительский шаблон для всех моих представлений внешнего интерфейса), но это не сработало, как ожидалось.

Я также попробовал несколько перестановок после этого безрезультатно.

Мой клиент находится на localhost:4200, а сервер на localhost:3000.

Ниже приведен фрагмент кода с моего внутреннего сервера (промежуточное ПО): 

app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}
app.use(allowCrossDomain);

Я также добавил следующее промежуточное ПО на свой сервер (Express): 

const csp = require('express-csp-header');

app.use(csp({
  policies: {
      'default-src': [csp.SELF, 'http://localhost:3000/', 'http://localhost:4200/' ],
      'script-src': [csp.SELF, csp.INLINE],
      'style-src': [csp.SELF],
      'img-src': ['data:', 'favico.ico'],
      'worker-src': [csp.NONE],
      'block-all-mixed-content': true
  }
}));

. , , но все еще не решил проблему.

Вот скриншот:

enter image description here

Что я делаю не так и как я могу это исправить?

1 Ответ

1 голос
/ 31 мая 2019

Политика безопасности контента (CSP) - это механизм предотвращения межсайтовых сценариев (XSS), который лучше всего обрабатывать на стороне сервера; обратите внимание, что он может обрабатываться и на стороне клиента, используя элемент тега <meta> вашего HTML.

Когда настроено и включено, веб-сервер вернет соответствующий Content-Security-Policy в заголовке ответа HTTP.

Возможно, вы захотите узнать больше о CSP на веб-сайте HTML5Rocks и на странице разработчиков Mozilla здесь и здесь .

Google CSP Evaluator - это удобный и бесплатный онлайн-инструмент для тестирования CSP для вашего веб-сайта или веб-приложения.

В вашем случае вам может потребоваться добавить строку ниже без принудительного применения HTTPS в качестве протокола с использованием директивы https:;
Поскольку ваш веб-сайт или приложение (как общедоступное) недоступно по HTTPS. 

res.header('Content-Security-Policy', 'img-src 'self'');

Начиная с директивы default-src, установленной на none, можно начать развертывание настроек CSP.

В случае, если вы решите использовать промежуточное программное обеспечение Content-Security-Policy для Express , вы можете начать, как показано в фрагменте ниже; 

const csp = require('express-csp-header');
app.use(csp({
    policies: {
        'default-src': [csp.NONE],
        'img-src': [csp.SELF],
    }
}));

// HTTP response header will be defined as:
// "Content-Security-Policy: default-src 'none'; img-src 'self';"

Помните, что CSP зависят от конкретного случая или приложения и основаны на требованиях вашего проекта.

Таким образом, вам необходимо выполнить точную настройку, чтобы удовлетворить ваши потребности.

...