Кордова – отказывается выполнять обработчик события inline, поскольку он нарушает следующий контент. Политика безопасности

Я тренируюсь для разработки приложений cordova, и я оборачиваюсь проблемой с политикой безопасности контента.

Мое приложение работает с эмулятором Android, но когда мне нужно выполнить javascript, я получаю сообщение в netbeans (окне вывода).

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.gstatic.com". (22:35:56:126 | error, security) at www/index.html:58 

Мой код ниже. Это мой index.html. Я пытаюсь понять, как работает CSP, и я думаю, что понимаю концепцию, но в этом случае я не понимаю проблему. Строка 58 – комментарий.

 <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self'; script-src 'self' https://ssl.gstatic.com; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <!-- line 58 --> <button onclick="capturePhoto();">Capture Photo</button> <br> <img style="display:none;width:80px;height:80px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 

Спасибо за помощь, потому что мне это нужно. Жером

Solutions Collecting From Web of "Кордова – отказывается выполнять обработчик события inline, поскольку он нарушает следующий контент. Политика безопасности"

Проверьте эту ссылку , она говорит:

Встроенный JavaScript не будет выполнен. Это ограничение запрещает как встроенные блоки, так и встроенные обработчики событий (например, кнопка onclick = "…").

Таким образом, вы можете использовать простой прослушиватель событий внутри тега скрипта, например:

 document.getElementById("myBtn").addEventListener("click", capturePhoto); function capturePhoto(){ //do something } 

Когда я проверяю элемент в консоли … это была ошибка

Отказано в выполнении обработчика встроенного события, поскольку он нарушает следующую директиву политики безопасности содержимого: «default-src» self 'data: gap: https://ssl.gstatic.com «небезопасно-eval». Для включения встроенного выполнения требуется либо ключевое слово «небезопасное-встроенное», либо хэш («sha256 -…»), либо nonce («nonce -…»). Также обратите внимание, что 'script-src' не был явно установлен, поэтому 'default-src' используется как резерв.

Внутренний код, который считается вредным

Должно быть ясно, что CSP (Политика безопасности контента) основана на источниках whitelist, так как это однозначный способ дать браузеру возможность рассматривать конкретные наборы ресурсов как приемлемые и отказаться от остальных. Однако исходный белый список не устраняет самую большую угрозу, создаваемую атаками XSS: inline script injection. Если злоумышленник может вставить тег скрипта, который содержит только вредоносную полезную нагрузку (sendMyDataToEvilDotCom ();), браузер не имеет механизма, чтобы отличать его от законного встроенного тега скрипта. CSP решает эту проблему, полностью запрещая встроенный скрипт: это единственный способ убедиться.

Этот запрет включает не только скрипты, встроенные непосредственно в теги скриптов, но также встроенные обработчики событий и javascript: URL. Вам нужно будет переместить содержимое тегов скрипта во внешний файл и заменить javascript: URL-адреса и соответствующие вызовы addEventListener. Например, мы можем переписать следующее:

  <script> function doAmazingThings() { alert('YOU AM AMAZING!'); } </script> <button onclick='doAmazingThings();'>Am I amazing?</button> 

Что-то более похожее:

amazing.html:

  <script src='amazing.js'></script> <button id='amazing'>Am I amazing?</button> 

amazing.js:

  function doAmazingThings() { alert('YOU AM AMAZING!'); } document.addEventListener('DOMContentReady', function () { document.getElementById('amazing') .addEventListener('click', doAmazingThings); }); 

Справочник по политике безопасности контента

Основной проблемой, используемой атаками XSS, является неспособность браузера различать сценарий, который должен быть частью вашего приложения, и скрипт, который был злонамеренно введен сторонним

Политика применяется к большому разнообразию ресурсов. База-uri ограничивает URL-адреса, которые могут отображаться в базовом элементе страницы. Child-src перечисляет URL-адреса для рабочих и содержимое встроенного фрейма. Например: child-src https://youtube.com позволит включить вложение видео с YouTube, но не из другого источника. Используйте это вместо устаревшей директивы frame-src. Connect-src ограничивает происхождение, к которому вы можете подключиться (через XHR, WebSockets и EventSource). Font-src указывает источник, который может обслуживать веб-шрифты. Веб-шрифты Google могут быть включены с помощью font-src https://themes.googleusercontent.com form-action перечисляет допустимые конечные точки для отправки из тегов. Frame-ancestors определяет источники, которые могут вставлять текущую страницу. Эта директива применяется к фрейму, iframe, embed и тегам апплета. Эта директива не может использоваться в метатегах и применяется только к не-HTML-ресурсам. Frame-src устарел. Вместо этого используйте child-src. Img-src определяет происхождение, из которого могут быть загружены изображения. Media-src ограничивает исход, разрешенный для доставки видео и аудио. Object-src позволяет управлять Flash и другими плагинами. Plugin-types ограничивает типы плагинов, которые может вызывать страница. Report-uri указывает URL-адрес, в котором браузер будет отправлять отчеты при нарушении политики безопасности содержимого. Эта директива не может использоваться в тегах. Style-src – это экземпляр скрипта-src для таблиц стилей. Upgrade-insecure-requests Указывает пользовательским агентам переписывать схемы URL, изменяя HTTP на HTTPS. Эта директива предназначена для веб-сайтов с большим количеством старых URL-адресов, которые необходимо переписать.

Четыре ключевых слова также принимаются в исходном списке:

«None», как вы и ожидали, ничего не соответствует.

«Self» соответствует текущему происхождению, но не его поддоменам.

«Небезопасный-встроенный» позволяет встроить JavaScript и CSS

«Unsafe-eval» позволяет использовать механизмы «текст-к-JavaScript», такие как eval

Попробуйте добавить 'img-src *' в тег Content-Security-Policy:

https://ssl.gstatic.com «небезопасно-eval»; Style-src 'self' 'unsafe-inline'; Media-src *; Img-src * ">