[Solved] BrowserPolicy Question - how to allow stripe?

We are trying to use Stripe in our Meteor app, and it works really well. However, keep getting this error on the signup process?

The error is: Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==' because it violates the following Content Security Policy directive: "img-src https://q.stripe.com".

image

The browser policy has these permissions:

import { BrowserPolicy } from 'meteor/browser-policy-common';

BrowserPolicy.content.allowSameOriginForAll();
BrowserPolicy.content.allowImageOrigin('*');
BrowserPolicy.content.allowOriginForAll('*.cloudinary.com');
BrowserPolicy.content.allowScriptOrigin('https://cdn.jsdelivr.net');
BrowserPolicy.content.allowScriptOrigin('https://unpkg.com');
BrowserPolicy.content.allowStyleOrigin('https://unpkg.com');
BrowserPolicy.content.allowFontDataUrl('https://fonts.gstatic.com');
BrowserPolicy.content.allowFontOrigin('https://fonts.gstatic.com');
BrowserPolicy.content.allowFontDataUrl('https://unpkg.com');
BrowserPolicy.content.allowOriginForAll('https://fonts.googleapis.com');
BrowserPolicy.content.allowOriginForAll('https://js.stripe.com');
BrowserPolicy.content.allowOriginForAll('https://checkout.stripe.com');
BrowserPolicy.content.allowOriginForAll('https://q.stripe.com');

So clearly, we have the allow Origin for stripe - why is this still throwing an error? Are we using Browser Policy incorrectly? Any pointers are very much appreciated. Thanks so much.

Tat

Looks like stripe is trying to add an embedded image with a base64 data url.
To allow data: urls in your content security policy, add this:

BrowserPolicy.content.allowImageDataUrl()
1 Like

Legendary. I did not realise allowOriginForAll did not cover the embedded image with a base64 data url use case. Thank you very much.