Removed inline javascript and style code to support Content Security Policy

[TheFRedFox]

Based on the issue #7511 in cakephp repo, I removed inline javascript and style code and replace them with code in separated js resp. css files.
So DebugKit is (hopefully) fully supported for Content Security Policy. DebugKit also set its own Content-Security-Policy, so it should be guaranteed that everything can be loaded by DebugKit.

[markstory]

These PHP tags look wrong.

[Marlinc]

This probably has to be elem.getAttribute("data-id");.

[TheFRedFox]

Oh yeah, holy ... 😄 Interesting that it is working nevertheless. ^^ I will fix it.

Edith says: Ok, changed that. A new data attribute at the script tag is created for the toolbar id and is gotten by elem.getAttribute("data-id") like Marlinc said already. 😉

[markstory]

So I noticed a few regressions that will need to be figured out before this can be merged:

• Syntax highlighting in the SQL panel uses inline styles and is currently broken.
• Waterfall chart in the Timer panel uses inline styles and is currently broken.

Other than these issues the changes are looking good.

[TheFRedFox]

@markstory I fixed Syntax highlighting as we can just separate all styles in a css file and load the css file in the sql_log_panel.ctp directly.
BUT
The timer panel give me headache! As we can't just load the script file in the timer_panel.ctp directly because of eval restrictions of CSP. Just separating it in an existing js file is possible, but it will definitely completely restrict js usage for new user's panels.

To be honest ... as it is in an own iframe with it's own CSP restrictions and as it is just supposed to be used in development ... I would suggest just to allow inline script, inline style and inline eval, so everything can be load in DebugKit. (or maybe we can just force allow everything for CSP for the DebugKit iframe 😉)

Maybe you want to know what is definitely needed to support CSP then. I will comment it in the code. But in general: Everything what is done in the original page.

[TheFRedFox]

[NEEDED] This is absolutely needed for CSP support inside the original page.

[markstory]

I think the current state where debug kit can be loaded into a csp page, but does not use csp itself is a good approach to take. 👍

[TheFRedFox]

Ok .. I just changed it so the CSP header will be force unset for the possibility that the user set the CSP header somewhere else in the original application (e.g. directly in bootstrap).
It should work now with everything inside the iframe. ;)