Correct way of setting Content Security Policy for a meteor cordova app

Hi,

I currently have a hard time understanding how to correctly change the Content-Security-Policy META tag. This is what I want to have:

<meta http-equiv="Content-Security-Policy" content="* 'self' default-src * data: blob: 'unsafe-inline' 'unsafe-eval' ws: wss: cdvfile: file: ;">

This is what is currently in my Meteor-generated HTML:

<meta http-equiv="Content-Security-Policy" content="default-src * gap: data: blob: 'unsafe-inline' 'unsafe-eval' ws: wss:;">

So far I have found out that the code comes from here:

And I have found this library which promises to help overriding the boilerplate-generated code:

Unfortunately this lib does not always work, so I searched further and read about the meteor browser-policy package

Then, in the meteor documentation there is this paragraph:

For now, Meteor adds a permissive <meta http-equiv=“Content-Security-Policy” content="…" header to the generated index page. We may want to allow more fine grained control in the future (through integrating with the browser-policy package for instance.)

Which leaves me confused. “We may want allow … in the future … through browser-policy”

Does it mean that the browser-policy is not the right way to do it today but only possibly in the future?

To be honest, I am absolutely unsure what the correct way of changing content-security-policy META tag is. Anyone who can point me to the right direction?

Thanks!

Hi,

it seems a way to achieve this could be using WebAppInternals.registerBoilerplateDataCallback to modify the boilerplate, specifically the meta tag.

Meteor’s webapp API has been updated to allow callbacks to be registered, that can be used to modify any part of the HTML boilerplate. See WebAppInternals.registerBoilerplateDataCallback (and for more details and a quick example, see #9660 (comment)). This new API can be used to manipulate elements as needed, so I’ll close this off. Thanks!

Unfortunately, the example is not very helpful. Maybe someone has a better one / can share experience with registerBoilerplateDataCallback method?

I solved it by copying the boilerplate-generator code from meteor to my local package folder in my projects’ root, change the hard coded value and did “meter add boilerplate-generator” then.

How do you ensure that the boilerplate-generator package is updated?

This never worked for me. It seems as if the boilerplate-generator gets a special treatment during the build process which overrides even local package copies. But as hwilson mentioned in the issue linked above, there should be a programmatic way to influence the CSP now. Haven’t tried it, though.

The programmatic way didn’t work. It can only change the head tags coming from your main.html and not the fixed default from the boilerplate.

I was able to make the boilerplate package work locally although I’m uncertain that I can keep it updated with the changes in Meteor

Actually, it doesn’t change so often:

https://github.com/meteor/meteor/commits/devel/packages/boilerplate-generator/template-web.cordova.js

But sure, it would be good to be notified on changes. There are web services available to watch for changes to web pages, maybe target the link with the commit-history above? Not ideal but there seems to be no alternative.

Interesting to hear that the programmatic approach didn’t work. I had never tried it, because I could solve my problem by re-adding Crosswalk to my Android build. As it took me so long finding a solution, I just kept it this way. Never touch a running system, you know.