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.

score 193 · Accepted Answer · edited Sep 27 '18 at 08:49

193

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

edited Sep 27 '18 at 08:49

wOxxOm

65,848
11
132
136

answered Apr 01 '16 at 05:57

kailniris

8,856
2
17
24

3

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.. – JC Borlagdan Apr 01 '16 at 07:13
1

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 tags and give them onclick event Can you use somtting like this? google – kailniris Apr 01 '16 at 07:21
2

it's dynamic because everything is from POST – JC Borlagdan Apr 01 '16 at 07:37
2

Note that the – bobt Dec 11 '22 at 22:04
and how do you replace document.onload or window.onload event?. can you target document or window by id? – Kosem Mar 05 '23 at 11:33
Moving the inline script into an external javascript file creates a race-condition, where the button is being displayed, but when the user clicks on it before the javascript file is being loaded and executed, the click will not work as intended. This is a race condition that will lead to wrong behaviour. Does anyone have a proper solution? – Philipp Gühring May 03 '23 at 06:56
@PhilippGühring Load the external script earlier then you declare the button. – kailniris May 09 '23 at 09:38
I had I think the same issue as Philipp and what worked for me was wrapping it in `window.onload = function () {...}` so that the event listener is only added after the window is loaded. see this answer https://stackoverflow.com/a/34281265/5034651 – Ken Myers Jul 01 '23 at 15:56
what if I need to call custom event from js? `document.documentElement.setAttribute('onreset', 'Pause()'); document.documentElement.dispatchEvent(new CustomEvent('reset')); document.documentElement.removeAttribute('onreset'); ` – user924 Aug 05 '23 at 12:05

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

1 Answers1

Linked