Refused to execute inline event handler because it violates CSP. (SANDBOX)

Question

I'm developing a google chrome packaged app, when I put Sandbox in the manifest.json:

 {
  "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"]
    }
  }
}

An onclick event on my anchor tag works, and the flow of the app is complete EXCEPT THAT, icons from a CSS stylesheet don't load.

I got an error from the console that

File not found ,

but those are just fonts so it's fine with me,

The big problem is that, the video in the iframe doesn't play and I got additional error prior to the Font which are:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Not allowed to load local resource: blob:null/b818b32c-b762-4bd9-...

When I remove the sandbox in the manifest.json file, everything is good no errors in the console about the font,

BUT when I hit/click my anchor tag that has a click event to load a new function in the js I'm getting the following Console Error :

Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". 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.

Sorry for the very long detail,

I just need help with this because I'm stuck here for 3 days already.

Solution

Answer for your non sandbox related question:

You have something in your code like this:

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

In a nutshell this is not allowed in chrome apps and extensions.

Change this to the following and it will work:

• html:

  <button id="myButton">Click me</button>
  <script src="script.js"></script>
  

• script.js:

  document.getElementById("myButton").addEventListener("click", myFunction);
  
  function myFunction(){
    console.log('asd');
  }
  

Long story:

In chrome apps, Content Security Policy does not allow inline javascript. So you have to put your javascript in a .js file and include it in your HTML.

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

Comments

[JC Borlagdan]

yes i forgot that inline javascript isn't allowed, but how do i get the ID of the anchor tag that was clicked? while the ID is dynamic..

[kailniris]

why is the id dynamic? can you use class or data-something html attribute? with javascript your can refer lots of thing is the DOM like find all <a> tags and give them onclick event Can you use somtting like this? <a id='aTagToGoogle' href="google.com">google</a>

[JC Borlagdan]

it's dynamic because everything is from POST