Level 75
I'm not familiar with Enlightn, but have you also reached out to their support?
Mar 21, 2023
2
Level 2
Hardening Site with Enlightn breaks Vue 3 component
I was using Enlightn to help protect my site against vulnerabilities, and now my Vue 3 component does not display. The errors I'm seeing are:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-uQjg69yUMyAm256xVjQxy4N0ijOLdD8XlwqD4s35H08='), 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.
today:36 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Nunito' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
today:1 Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAX9wAA4AAAAChwgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAF/TAAAABwAAAAcdQuBPEdERUYAAX8sAAAAHgAAAB4AJwLLT1MvMgAAAcAAAAA/AAAAYIhGej5jbWFwAAAFHAAAAXUAAAMCLcREJ2dhc3AAAX8kAAAACAAAAAj//wADZ2x5ZgAADbAAAV+XAAJMzJBa56toZWFkAAABRAAAADYAAAA2CP8zRWhoZWEAAAF8AAAAIQAAACQO+gqUaG10eAAAAgAAAAMbAAAK+E6RFlVsb2NhAAAGlAAABxsAAAsYAvXOJG1heHAAAAGgAAAAHwAAACADLgIcbmFtZQABbUgAAAJEAAAEhuOXi6xwb3N0AAFvjAAAD5UAABqJJRjyKHdlYmYAAX9oAAAABgAAAAb701lxAAEAAAAEAcvfnz61Xw889QALBwAAAAA...ENEd2oCkIigSGRwJBIYLDorWJFxTYtTo7rmnGmSG+K9KaOB8VJQ9emDFakmJSC+Uzxkin6m6K/Kfqbor8p+puivyn6m6K/Kfqbor8p+puivyn6m6K/Kfqbor8p+puiv1lMrmVxhV7higldF3Vd0rVe6gq91BWmriu6ntT1YL4Vup7S9bSuZ3Q9m9RTmndK805p3inNO6V5pzTvlOad0rxTmndK805p3inNO6V5pzTvlObVQbM4rXmnNe+05p3WvNOad1rzTmveac07rXmnNe+05p3WvNOad1rz6tha1LG1OKN5ZzTvjObVEbaoI2xxRvPOaN4ZzTujeWc074zmndG8M5p3VvPOat5ZzTureWc176zmndW8s+KUqiad1aSzmnRWk85q0llNOjv7P0KpDWMAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAQLEAAEABAAAAAIAAAAAAAAAAQAAAADUJJi6AAAAAMtPPDAAAAAA1ZesUQABWXH70gAA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
today:37 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-FhudaH+D1DhcOfC3dGgEcvkNWiujsnNBXvpOnYT+asw='), 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.
today:38 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-O5Rf4dUHYELEtJhdJD8CU04VB1YPYUgdb+jWRAfso4E='), 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.
today:38 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-vIqNGlqzav0uXuxyd5wkll9KlpNssL/7R655jzQsmzM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
injectStylesIntoStyleTag.js:117 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
u @ injectStylesIntoStyleTag.js:117
_ @ injectStylesIntoStyleTag.js:208
l @ injectStylesIntoStyleTag.js:81
e.exports @ injectStylesIntoStyleTag.js:239
7653 @ ToggleButtons.vue?ddcf:9
i @ bootstrap:19
(anonymous) @ startup:4
i.O @ chunk loaded:23
(anonymous) @ startup:8
(anonymous) @ startup:8
injectStylesIntoStyleTag.js:190 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-YKp/Q339OXsLkGarhMIooVoOuWcyco2AE7p1kVdkNRM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
f @ injectStylesIntoStyleTag.js:190
_ @ injectStylesIntoStyleTag.js:216
l @ injectStylesIntoStyleTag.js:81
e.exports @ injectStylesIntoStyleTag.js:239
7653 @ ToggleButtons.vue?ddcf:9
i @ bootstrap:19
(anonymous) @ startup:4
i.O @ chunk loaded:23
(anonymous) @ startup:8
(anonymous) @ startup:8
injectStylesIntoStyleTag.js:117 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
u @ injectStylesIntoStyleTag.js:117
_ @ injectStylesIntoStyleTag.js:208
l @ injectStylesIntoStyleTag.js:81
e.exports @ injectStylesIntoStyleTag.js:239
7653 @ Toaster.vue?3d09:9
i @ bootstrap:19
(anonymous) @ startup:4
i.O @ chunk loaded:23
(anonymous) @ startup:8
(anonymous) @ startup:8
injectStylesIntoStyleTag.js:190 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Hgb1Nlo8LsXr1K8lGBkch85TQ+DiNVOKnuRthKC0/dA='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
f @ injectStylesIntoStyleTag.js:190
_ @ injectStylesIntoStyleTag.js:216
l @ injectStylesIntoStyleTag.js:81
e.exports @ injectStylesIntoStyleTag.js:239
7653 @ Toaster.vue?3d09:9
i @ bootstrap:19
(anonymous) @ startup:4
i.O @ chunk loaded:23
(anonymous) @ startup:8
(anonymous) @ startup:8
vue.esm-bundler.js:61 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".
at new Function (<anonymous>)
at vue.esm-bundler.js:61:21
at $r (runtime-core.esm-bundler.js:7152:36)
at runtime-core.esm-bundler.js:7082:9
at Br (runtime-core.esm-bundler.js:7012:11)
at H (runtime-core.esm-bundler.js:4922:13)
at A (runtime-core.esm-bundler.js:4897:17)
at _ (runtime-core.esm-bundler.js:4489:21)
at K (runtime-core.esm-bundler.js:5641:13)
at mount (runtime-core.esm-bundler.js:3877:25)
(anonymous) @ vue.esm-bundler.js:61
$r @ runtime-core.esm-bundler.js:7152
(anonymous) @ runtime-core.esm-bundler.js:7082
Br @ runtime-core.esm-bundler.js:7012
H @ runtime-core.esm-bundler.js:4922
A @ runtime-core.esm-bundler.js:4897
_ @ runtime-core.esm-bundler.js:4489
K @ runtime-core.esm-bundler.js:5641
mount @ runtime-core.esm-bundler.js:3877
Va.t.mount @ runtime-dom.esm-bundler.js:1590
7653 @ app.js:24
i @ bootstrap:19
(anonymous) @ startup:4
i.O @ chunk loaded:23
(anonymous) @ startup:8
(anonymous) @ startup:8
today:155 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-OWVHAL44hoDdY9z3GGA/dBhPEgimV5PqOvXyeRjJobY='), 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.
today:160 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-v4K79qJqH/7e4xgfX+e0pIkuLJI1SSwmnY3cX8B5EXU='), 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.
I had added middlware to handle the headers, and here it is:
class SecureHeaders
{
// Enumerate unwanted headers
private $unwantedHeaderList = [
'X-Powered-By',
'Server',
];
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request);
$response->headers->set('X-Content-Type-Options', 'nosniff');
$response->headers->set('X-XSS-Protection', '1; mode=block');
$response->headers->set('Strict-Transport-Security', 'max-age:31536000; includeSubDomains;');
$response->headers->set('Content-Security-Policy', "default-src 'self';");
$response->headers->set('Public-Key-Pins', 'pin-sha256="base64=' . env('APP_KEY') . '"; max-age=31536000; includeSubDomains');
$response->headers->set('Access-Control-Allow-Origin','*');
$this->removeUnwantedHeaders($this->unwantedHeaderList);
return $response;
}
/**
* @param $headerList
*/
private function removeUnwantedHeaders($headerList)
{
foreach ($headerList as $header)
header_remove($header);
}
}
How can I fix this? I can't seem to find the answers anywhere. PLEASE HELP! '
Level 35
The explanation of the error is in the first paragraph. You defined in your Content Security Policy (CSP) to only allow resources from your own system which also means to not use inline css, inline js, remote fonts, base64 images, etc. etc.
More info about CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
If you define a Content Security Policy, which is a good idea, you do need to specify what you want to allow and this is completely up to you and depends on your setup.
If you load remote content (images, css or js from a different website) you should include them in the content security policy. Maybe this online tool can help you out: https://report-uri.com/home/generate
Please or to participate in this conversation.