Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 786
JC Borlagdan Avatar asked Mar 31 '16 04:03

JC Borlagdan


People also ask

How do I enable an inline script in CSP?

Other methods. The unsafe-inline source list value can be used to allow inline scripts, but this also defeats much of the purpose of CSP. CSP Level 3 (newest browsers) support a source list value: unsafe-hashes which can be used to allow inline script in javascript event handlers (eg onclick or onmouseover , etc).

What is unsafe-inline in CSP?

The unsafe-inline option is to be used when moving or rewriting inline code in your current site is not an immediate option but you still want to use CSP to control other aspects (such as object-src, preventing injection of third-party js etc.).

What is inline event handler?

An event handler is a JavaScript function that runs when an event fires. An event listener attaches responsiveness to a given element, which allows the element to wait or “listen” for the given event to fire. Events can be assigned to elements via inline event handlers, event handler properties & event listeners.


1 Answers

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

like image 76
kailniris Avatar answered Sep 22 '22 16:09

kailniris