I am trying to embed some strings and urls from JS into an EJS file.

The idea is that we have an application on 3 environments, dev, test and production.
For every environment, the application is accessed via 3 urls:

appserver.com/app
appserver.com/testapp
appserver.com/devapp

Also, all resources (css, js, images) are accessed using /app, /testapp and /devapp, based on the machine the app is on.

For this, I created a JS file, called environment.js with a few functions that return the desired urls and string.
For example, it contains one function called returnCurrentSite that returns “app”, “testapp” or “devapp”, based on the value of a switch variable.

I also have a header.ejs file that contains the links to libraries and other resources:

<link rel="stylesheet" type="text/css" href="../app/css/bootstrap.min.css">
<link rel="stylesheet" href="/app/fonts/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../app/css/general.css">

<script src="../app/library.js" type="text/javascript"></script>

After that, I changed the header.ejs so that instead of “app” to have the value returned by the JS function:

<link rel="stylesheet" type="text/css" href="../<%= returnCurrentSite() %>/css/bootstrap.min.css">
<script src="../<%= returnCurrentSite() %>/library.js" type="text/javascript"></script>

The “header.ejs” file is included in every other EJS file using <%- include('partials/header.ejs') %>

So far so good. The problem is, whenever I access any EJS file, instead of having the urls as expected, I get something like this:

<link rel="stylesheet" type="text/css" href="..//css/bootstrap.min.css">
<script src="..//library.js" type="text/javascript"></script>

I tried to store the returned vallue into a variable and use the variable instead of the function (<%= currentSite %>) but with same result.

I did find some examples online like this and for some this seamed to be working.

I also get a lot of errors and I’m a bit stuck:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' nonce-9b858e6c55a67d8f". Either the 'unsafe-inline' keyword, a hash ('sha256-FyXf4vQdaZjSdIl0NS/E4M/csa+Ko73WchX2nTsWFH4='), or a nonce ('nonce-...') is required to enable inline execution.

I understand that this is a result of the Content Security Policy (https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) but I’m not really sure how to fix this in my case.

Any suggestions? Or maybe a better way to approach this?