The embedded event handler was denied because it violates the CSP. (Sandbox)

Question

I am developing a google chrome application with packaging when I put Sandbox in manifest.json file

{ "manifest_version": 2, "name": "WM32216", "version": "2.1", "minimum_chrome_version": "23", "permissions":["webview", "https://ajax.googleapis.com/*"], "sandbox":{ "pages":["index.html"] }, "app": { "background": { "scripts": ["main.js"] } } } 

The onclick event on my anchor tag is working, and the application flow is complete. EXCEPT FOR THIS, icons from the CSS stylesheet do not load.

I got an error from the console, which

File not found ,

but these are just fonts , so I'm fine

The big problem is that the video in the iframe does not play, and I got an additional error before the font:

VIDEO: ERROR: (CODE: 4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media cannot be loaded because the server or network failed or because the format is not supported.

It is not allowed to load a local resource: blob: null / b818b32c-b762-4bd9 -...

When I delete the sandbox in the manifest.json file, all the good things in the console about the font do not cause errors,

BUT, when I hit / clicked my anchor tag that has a click event to load a new function in js, I get the following Console error :

Refused to execute the inline event handler because it violates the following content security policy directive: "default-src" self "blob: filesystem: chrome-extension-resource:". To enable inline execution, either the "unsafe-inline" keyword or a hash ("sha256 -...") or nonce ("nonce -...") is required. Also note that 'script -src' is not explicitly set, so 'default-src' is used as a backup.

Sorry for the very long part,

I just need help because I’ve been stuck here for 3 days.

Answer 1

Answer a question related to an unsafe sandbox:

There is something like this in your code:

<button onclick="myFunction()">Click me</button>

In a nutshell, this is forbidden in chrome apps. Change this to the following and it will work:

 html: <button id="myButton">Click me</button> <script src="myScripts.js"></script> myScript.js: document.getElementById("myButton").addEventListener("click", myFunction); function myFunction(){ console.log('asd'); } 

Long story:

In chrome applications, the Content Security Policy does not allow embedded javascript. Therefore, you should put your javascript in a .js file and include it in your html.

Further reading: https://developer.chrome.com/extensions/contentSecurityPolicy