Как добавить заголовок CSP (Content-Security-Policy) в приложение vuejs? - PullRequest
Новая
       40

Как добавить заголовок CSP (Content-Security-Policy) в приложение vuejs?

0 голосов
/ 15 апреля 2020

Когда я добавляю заголовок csp в свой public / index. html, во время разработки он показывает ошибку ниже? Как мне решить эту проблему? Как правильно добавить csp в html, чтобы предотвратить атаки XSS из других источников и предотвратить использование eval и функций, et c во время сборки, а не при разработке? 

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' http://localhost:8080/*; img-src https://* http://localhost:8080/* ; child-src 'none';"
/>

ошибка: 

dashboard:15 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://* http://localhost:8080/* ".

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' http://localhost:8080/*".

    at Object../node_modules/webpack/hot/dev-server.js ()
    at __webpack_require__ (app.js:790)
    at fn (app.js:151)
    at Object.1 (app.js:1610)
    at __webpack_require__ (app.js:790)
    at checkDeferredModules (app.js:46)
    at app.js:930
    at app.js:933
./node_modules/webpack/hot/dev-server.js @ 
checkDeferredModules @ app.js:46

Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://* http://localhost:8080/* ".

Обновление

Я обновил тег, как показано ниже: 

   <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self' http://localhost:8080; img-src https://* http://localhost:8080 ; child-src 'none';"
    />

, но он по-прежнему показывает ошибку:

enter image description here

1 Ответ

0 голосов
/ 18 апреля 2020

Для вашей указанной ошибки c вам нужно изменить директиву img-sr c на: 

img-src https://* http://localhost:8080

Дополнительная '*' не работает в путях CSP. Дополнительная информация о совпадении хоста .

Обновление для нового нарушения

Следующая ошибка - ошибка eval. Похоже, что одна из зависимостей использует eval (). Вы можете либо выяснить, какая зависимость использует eval, и попытаться исправить ее / использовать другую зависимость, либо выбрать менее безопасный вариант и добавить «unsafe-eval» в свой скрипт-sr c. Добавление unsafe-eval не так плохо, как «unsafe-inline», но немного ограничивает полезность CSP. (eval - это общая точка внедрения для XSS, и ее лучше избегать)

Если вы решите go более безопасный маршрут и попытаетесь выяснить, что является причиной ошибки, есть две вещи, которые могут помочь отследите это:

  1. добавление 'report-sample' к вашему 'script-sr c' в вашем CSP будет включать первые 40 символов нарушения, чтобы вы могли видеть, что происходит. «d.
  2. использование конечной точки report-uri для сбора отчетов о нарушениях CSP (таких как https://csper.io) может упростить отладку. Он будет собирать нарушения из вашей политики и перечислять дополнительную информацию о том, где в вашем коде произошло нарушение и что делать
...