How to use aframe.js with Content Security Policy on WebServer

Question

For security reasons, Content Security Policy is mandatory on our Internet Information Server. For this purpose, a response header was stored in IIS as follows, which must not be changed: Name: Content Security Policy Value: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self' data: blob:; style-src 'self'; frame-src 'self';

If aframe.js is used, the error occurs in all browsers (Chrome, Firefox and Edge): 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: "script-src 'self'".

How does aframe let you use despite Content Security Policy settings? How can I change aframe.js so that this works without errors?

The Content Security Policy settings of the IIS must not be changed!

Answer 1

Many JavaScript libraries, frameworks, and plugins rely on the use of "eval()" or similar functions to dynamically generate and execute code. If the CSP disallows the use of "unsafe-eval", these scripts may not work properly with the error:

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: "script-src 'self'".

But adding a specific CSP directive to allow "unsafe evaluation" of aframe.js would require modifying IIS's CSP settings, allowing "unsafe-eval" poses a security risk and should indeed be used with caution.

Perhaps you can modify the script to remove the use of "unsafe-eval", which can be done by precompiling the script code instead of using the "eval" function.