Context Security Policy Error is Blocking meteor_runtime_config?

vikr00001 · January 20, 2025, 6:23am

CSP requires the hash of the meteor_runtime_config to be included in csp policies.

I prepare the hash like this, as described in the Meteor docs:

// Prepare runtime config for generating the sha256 hash
// It is important, that the hash meets exactly the hash of the
// script in the client bundle.
// Otherwise the app would not be able to start, since the runtimeConfigScript
// is rejected __meteor_runtime_config__ is not available, causing
// a cascade of follow-up errors.
const runtimeConfig = Object.assign(__meteor_runtime_config__, Autoupdate, {
    // the following lines may depend on, whether you called Accounts.config
    // and whether your Meteor app is a "newer" version
    accountsConfigCalled: true,
    isModern: true
})

// add client versions to __meteor_runtime_config__
Object.keys(WebApp.clientPrograms).forEach(arch => {
    __meteor_runtime_config__.versions[arch] = {
        version: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].version(),
        versionRefreshable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionRefreshable(),
        versionNonRefreshable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionNonRefreshable(),
        // comment the following line if you use Meteor < 2.0
        versionReplaceable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionReplaceable()
    }
})


const runtimeConfigScript = `__meteor_runtime_config__ = JSON.parse(decodeURIComponent("${encodeURIComponent(JSON.stringify(runtimeConfig))}"))`
const runtimeConfigHash = crypto.createHash('sha256').update(runtimeConfigScript).digest('base64')

const helmetOptions = {
    crossOriginEmbedderPolicy: false,
    contentSecurityPolicy: {
        blockAllMixedContent: true,
        directives: {
            reportUri: '/report-violation',
            defaultSrc: [self],
            scriptSrc: [
                // Remove / comment out unsafeEval if you do not use dynamic imports
                // to tighten security. However, if you use dynamic imports this line
                // must be kept in order to make them work.
                unsafeEval,
                // unsafeInline,
                // strictDynamic,
                `'sha256-${runtimeConfigHash}'`,
            ].concat(allowedOrigins_script_src),
            [.....]

Up until yesterday I was successfully deploying to production.

For some reason as of today, I have the wrong hash:

Uncaught ReferenceError: meteor_runtime_config is not defined
at 49243b6c229d7a94e9dd57ae7b1b37cacdcba46a.js?meteor_js_resource=true:3:116
at 49243b6c229d7a94e9dd57ae7b1b37cacdcba46a.js?meteor_js_resource=true:3:407
at r (49243b6c229d7a94e9dd57ae7b1b37cacdcba46a.js?meteor_js_resource=true:1:891)
at Object.t [as queue] (49243b6c229d7a94e9dd57ae7b1b37cacdcba46a.js?meteor_js_resource=true:1:814)
at 49243b6c229d7a94e9dd57ae7b1b37cacdcba46a.js?meteor_js_resource=true:3:25

My site is deployed on Galaxy. I’m using Meteor 3.0.1, and have also tried with Meteor 3.1.1.

Am I generating the hash incorrectly?

vikr00001 · January 21, 2025, 4:29am

Update

It appears that the hash being generated on the server is not the one the browser is calculating for meteor_runtime_config.

The one generated on the server is generated via this code:

const runtimeConfig = Object.assign(__meteor_runtime_config__, Autoupdate, {
// the following lines may depend on, whether you called Accounts.config
// and whether your Meteor app is a "newer" version
accountsConfigCalled: true,
isModern: true
})

// add client versions to __meteor_runtime_config__
Object.keys(WebApp.clientPrograms).forEach(arch => {
__meteor_runtime_config__.versions[arch] = {
version: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].version(),
versionRefreshable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionRefreshable(),
versionNonRefreshable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionNonRefreshable(),
// comment the following line if you use Meteor < 2.0
versionReplaceable: Autoupdate.autoupdateVersion || WebApp.clientPrograms[arch].versionReplaceable()
}
})

const runtimeConfigScript = `__meteor_runtime_config__ = JSON.parse(decodeURIComponent("${encodeURIComponent(JSON.stringify(runtimeConfig))}"))`
const runtimeConfigHash = crypto.createHash('sha256').update(runtimeConfigScript).digest('base64')
console.log('runtimeConfigHash: ', runtimeConfigHash)

The one the browser is calculating is found by running this in the browser console:

const scriptElement = Array.from(document.getElementsByTagName('script'))
 .find(script = script.textContent.includes('__meteor_runtime_config__'));
 if (scriptElement) {
	 const hash = await crypto.subtle.digest('SHA-256',
	 new TextEncoder().encode(scriptElement.textContent));
	 console.log('Actual browser script hash:',
	 btoa(String.fromCharCode(...new Uint8Array(hash))));
 }

At the moment, with the latest code iterations, the one calculated on the server is:

sha256-a7xwxkAVidOMc0ohV81ggMT2YML6izKGW4DzCgHKokM=

…and the one the browser is expecting is:

YCYDFNqA/AUaP+9ZdWeEjAiNtIcZUTOMAPRJQredXho=

The browser throws a content security policy error and meteor_runtime_config is blocked, so my app doesn’t run.

Does that even make sense? I’m baffled at this point.

MeteorCoder · January 21, 2025, 5:17am

@vikr00001 - A naive question. Why can’t you use BrowserPolicy? That seems to be straightforward and simpler. Browser Policy | Docs

vikr00001 · January 21, 2025, 5:56am

I will look into Browser Policy.

paulishca · January 21, 2025, 10:56am

github.com/meteor/meteor

Fix CSP violation for code that sets variable __meteor_runtime_config__

opened 10:37PM - 10 Oct 19 UTC

closed 09:34AM - 07 Mar 20 UTC

vlasky

At the moment, Meteor users are forced to weaken their Content Security Policy b…y setting `script-src 'unsafe-line'` because Meteor inserts an inline script right after the HTML body tag that sets the variable `__meteor_runtime_config__` and the inline script does not have a sha-256 hash or a nonce. Example: ``` <body> <script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.8.1%22%2C%22gitCommitHash%22%3A%22b33f59abbc33a3775913a32688025e8cd407d0e9%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%22env%22%3A%22Production%22%7D%2C%22ROOT_URL%22%3A%22https%3A%2F%2Fmymeterapp.com%2Fmyapp%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%2Fmyapp%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%22bbe3e8df360739eca09be771b0b17854907ca5d3%22%2C%22versionRefreshable%22%3A%229b33f8fa391a81e22d7990a442924cf675d48ac8%22%2C%22versionNonRefreshable%22%3A%2234e081c8deb6b15d9acf6f05b1ecd422acd695cd%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%22f33d5526e7e135806b6f15b377fa4f35007910b6%22%2C%22versionRefreshable%22%3A%229b33f8fa391a81e22d7990a442924cf675d48ac8%22%2C%22versionNonRefreshable%22%3A%22b1c5a67a98b81d64235116636b5b30d7a4890e56%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22zdem5b1w3gkqh8qfthu%22%7D%2C%22appId%22%3A%22zdem5b1w3gkqh8qfthu%22%2C%22accountsConfigCalled%22%3Atrue%2C%22isModern%22%3Atrue%7D"))</script> ``` The normal way of avoiding the need for a sha-256 hash or nonce is to move the inline script to an external .js file and include that from the main file. In Meteor's case it is not that easy because the `__meteor_runtime_config__` variable is dynamically generated, so it cannot be served as a static .js asset. In production, most of us have configured our web servers to directly serve files with the .js extension and other static assets without passing the request to Meteor. To deal with this, Meteor must serve `__meteor_runtime_config__` from a new special URL that does not have a .js prefix. Perhaps something like this: `/ROOT_URL/__meteor_runtime_config__/?hash=xxxxxxxxxxxxxx` When this URL is accessed, Meteor will dynamically generate the script code on the server-side and set the HTTP Header `Content-Type` to `"text/javascript"` Here's an example of how it could look with this approach that avoids the need for the weakened policy `script-src 'unsafe-line'` ``` <body> <script type="text/javascript" src="/ROOT_URL/__meteor_runtime_config__/?hash=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script> ```

vikr00001 · January 21, 2025, 2:53pm

Thanks for this link, @paulishca . I see that the link you provided is about BrowserPolicy. And the link seems to apply equally to CSP implemented via Helmet. It’s odd because I was deploying successfully until a couple days ago.