[Solved] BrowserPolicy Question - how to allow stripe?

help
1

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
image1450×130 13.8 KB

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

2

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()
2 Likes
3

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

1 Like