Cordova - refuse to execute inline event handler because it violates the following content Security policy
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I'm training for cordova application developpement and i turn around a problem with Content Security Policy.
My application is running with the android emulator, but when i have to execute a javascript i get an message in netbeans (output window).
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
My code is below. This is my index.html. I try to understand how CSP works and i think i understand the concept, but in this case i don't understand the problem. Line 58 is comment.
Inline JavaScript will not be executed. This restriction bans both inline
In order to to work with new Browser you need to write your code with a clean separation between content and behavior.
document.addEventListener('DOMContentLoaded', function () { document.querySelector('button').addEventListener('click', clickHandler); main(); }); function clickHandler(element) { // On click Code } function main() { // Initialization work goes here. }
回答2:
when I inspect element in Console....this was the error
Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Inline Code Considered Harmful
It should be clear that CSP (Content Security Policy) is based on whitelisting origins, as that’s an unambiguous way of instructing the browser to treat specific sets of resources as acceptable and to reject the rest. Origin-based whitelisting doesn’t, however, solve the biggest threat posed by XSS attacks: inline script injection. If an attacker can inject a script tag that directly contains some malicious payload (sendMyDataToEvilDotCom();), the browser has no mechanism by which to distinguish it from a legitimate inline script tag. CSP solves this problem by banning inline script entirely: it’s the only way to be sure.
This ban includes not only scripts embedded directly in script tags, but also inline event handlers and javascript: URLs. You’ll need to move the content of script tags into an external file, and replace javascript: URLs and with appropriate addEventListener calls. For example, we might rewrite the following from:
To something more like:
amazing.html:
amazing.js:
function doAmazingThings() { alert('YOU AM AMAZING!'); } document.addEventListener('DOMContentReady', function () { document.getElementById('amazing') .addEventListener('click', doAmazingThings); });
Content Security Policy Reference
The core issue exploited by XSS attacks is the browser’s inability to distinguish between script that’s intended to be part of your application, and script that’s been maliciously injected by a third-party
Policy applies to a wide variety of resources base-uri restricts the URLs that can appear in a pages base element. child-src lists the URLs for workers and embedded frame contents. For example: child-src https://youtube.com would enable embedding videos from YouTube but not from other origins. Use this in place of the deprecated frame-src directive. connect-src limits the origins to which you can connect (via XHR, WebSockets, and EventSource). font-src specifies the origins that can serve web fonts. Google’s Web Fonts could be enabled via font-src https://themes.googleusercontent.com form-action lists valid endpoints for submission from tags. frame-ancestors specifies the sources that can embed the current page. This directive applies to frame, iframe, embed, and applet tags. This directive cant be used in meta tags and applies only to non-HTML resources. frame-src deprecated. Use child-src instead. img-src defines the origins from which images can be loaded. media-src restricts the origins allowed to deliver video and audio. object-src allows control over Flash and other plugins. plugin-types limits the kinds of plugins a page may invoke. report-uri specifies a URL where a browser will send reports when a content security policy is violated. This directive cant be used in tags. style-src is script-src’s counterpart for stylesheets. upgrade-insecure-requests Instructs user agents to rewrite URL schemes, changing HTTP to HTTPS. This directive is for web sites with large numbers of old URL’s that need to be rewritten.
Four keywords are also accepted in the source list:
'none', as you might expect, matches nothing.
'self' matches the current origin, but not its subdomains.
'unsafe-inline' allows inline JavaScript and CSS
'unsafe-eval' allows text-to-JavaScript mechanisms like eval
回答3:
Try to add 'img-src *' to the Content-Security-Policy tag:
