When trying to load the relationship graph, I get repeated CSP errors in the browser console:
b8fed3aa.js:11557 failed to asynchronously prepare wasm: CompileError:b8fed3aa.js:11557 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”). Build with -sASSERTIONS for more info.
The graph does not load and the page remains white. Has anyone seen this and can help me to fix it? I am running Gramps Web via docker using the following image: http://ghcr.io/gramps-project/grampsweb:latest
I am using Traefik as a reverse proxy.
Thank you!
System Info:
Gramps 6.0.1
Gramps Web API 3.2.0
Gramps Web Frontend 25.7.3
Gramps QL 0.4.0
Sifts 1.0.0
locale: en
multi-tree: false
task queue: true
OCR: true
chat: false
The error “because ‘unsafe-eval’ is not an allowed source of script” occurs because your website’s Content Security Policy (CSP) prevents the execution of JavaScript that evaluates strings, such as functions like eval(), new Function(), or methods like setTimeout() and setInterval() with string arguments. To fix this, you must either remove the offending code, which is recommended for security reasons, or modify your CSP to include 'unsafe-eval' in the script-src directive, though this significantly weakens your site’s security by enabling potential Cross-Site Scripting (XSS) vulnerabilities.
Understanding the Error
Content Security Policy (CSP):
This is a security layer that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS).
'unsafe-eval':
This is a keyword within the script-src directive of a CSP that allows the browser to execute JavaScript that is generated from strings.
eval() and similar functions:
JavaScript code that uses eval(), new Function(), setTimeout(string, ...), or setInterval(string, ...) are considered “unsafe” because they can execute code from user-supplied or dynamically generated strings, creating security risks.
How to Fix the Error
1.Remove the unsafe JavaScript code:
This is the most secure and recommended solution.
Identify which part of your application is attempting to use eval() or similar functions. Look for code that constructs JavaScript by concatenating strings.
Rewrite the code to avoid these functions by using safer alternatives or directly executing code instead of generating it from strings.
2. Modify the Content Security Policy (CSP) to allow 'unsafe-eval' (Use with Caution):
If you absolutely must use these functions, you can add 'unsafe-eval' to the script-src directive of your CSP.
Locate your CSP: The CSP can be set in HTTP headers, often via server configurations (like .htaccess for Apache) or middleware in Node.js frameworks.
Edit the script-src directive: Change a line like script-src 'self' to script-src 'self' 'unsafe-eval' to allow dynamic script evaluation.
Why Allowing unsafe-eval is Risky
Allowing 'unsafe-eval' opens your application to XSS attacks, as it enables attackers to inject and execute arbitrary JavaScript through user input that is then evaluated.
While it provides a quick fix, it bypasses the core security benefits of a Content Security Policy, making your application more vulnerable.