Securely fixing CSP errors in iFrame widget

Questions
1

I have some issues trying to clean up CSP errors when using the iFrame payment widget.

NOTE: I do not want to use unsafe-inline.

My current CSP

default-src ‘self’;
script-src ‘self’ https://sandbox.web.squarecdn.com;
frame-src ‘self’ https://sandbox.web.squarecdn.com ;
style-src ‘self’ https://sandbox.web.squarecdn.com https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net;
style-src-elem ‘self’ ‘sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=’ https://fonts.googleapis.com https://sandbox.web.squarecdn.com https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net;
font-src ‘self’ https://cash-f.squarecdn.com https://fonts.googleapis.com https://fonts.gstatic.com https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net;
connect-src ‘self’ https://pci-connect.squareupsandbox.com https://o160250.ingest.sentry.io;
img-src ‘self’ https://sandbox.web.squarecdn.com;

On the square.js line document.head.appendChild(r)),

I get a
Applying inline style violates the following Content Security Policy directive 'style-src-elem 'self'``https://sandbox.web.squarecdn.com``https://square-fonts-production-f.squarecdn.com`` ``https://d1g145x70srn7h.cloudfront.net``'. Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='),

When I add the hash (ending in SuFu=) to my style-src-elem that error disappears.

However trying that approach doesn’t work for r.innerHTML = Rh(e, Jh(t))

That produces

Applying inline style violates the following Content Security Policy directive 'style-src-elem 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='  https://sandbox.web.squarecdn.com https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net'. Either the 'unsafe-inline' keyword, a hash ('sha256-5AjWgndEpRbacB86f2mPOgtBWjcgjFl/hosxZZUABgE='),

I tried with the hash ending with ABgE=, but it seems to change on each page load? I added about 8 hashes which showed up on page load but that never seem to help. The hashes are different on each load. I can’t use ‘unsafe-inline’ because I have a hash for the first error in the source list and it’s ignored.

I can make both go away with unsafe-inline but there has to be a better way.

It’s a payment app. I shouldn’t be asked to reduce the security on my payment page.

The second error I get is

Loading the font ‘https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2’ violates the following Content Security Policy directive: “font-src https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net/fonts/sqmarket/ ‘report-sample’”. The action has been blocked.

There are 8 occurrences of this error despite having the following in my policy.

https://square-fonts-production-f.squarecdn.com

https://d1g145x70srn7h.cloudfront.net

https://cash-f.squarecdn.com

I have also tried to clear those by adding data: to font-src

font-src ‘self’ data: ``https://cash-f.squarecdn.com`` etc

But that doesn’t work.

What I really don’t understand here is that the error message is saying

violates the following Content Security Policy directive: “font-src https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net/fonts/sqmarket/ ‘report-sample’”

But my policy for font-src is

font-src 'self'  https://cash-f.squarecdn.com https://fonts.googleapis.com https://fonts.gstatic.com data: https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net/fonts/sqmarket/;

The csp policy in the error -isn’t- mine? It’s erroring on the <!doctype html> line in single-card-element-iframe.html

So does that file have some CSP set on the square end? If that’s the case, I’d guess this is why adding data: had no effect.

I can’t get the font issue to go away at all

So how do I fix these issues.

2

:waving_hand: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Brand and Images
In-App Payment Solutions
Sandbox Payments

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

this is not helpful or an answer

4

Hey @JayB! Can you provide some more context into your setup here? I’m assuming that you’re using the Web Payments SDK, although I wouldn’t expect you to be running into CSP issues with the default setup. If you spin up the quickstart app, do the same errors persist in that environment?

5

A quick start app in development doesn’t see these errors, but a production server with hardened CSP headers will. I asked this same question a few weeks ago and it seems like no one is taking the time to actually read or understand the question: what is the full set of hosts that square relies on for the payment widget?

6

@lavid I would not recommend implementing server security that’s dependent on specific hosts used by Square. The Web Payments SDK was not developed with the expectation that developers would be building around specific host domains, so it’s possible for them to change without notice.

7

Right, and by not publishing that, consumers of the square web payment SDK cannot reliably implement CSP or CORS policies on their websites.

8

josh-square: The need to specify a cumbersome CSP for the iframe in the first place is not the way to go. This feature is poorly documented by the squareup developer docs and needs to be re-addressed! It took us hours to define, via trial and error runs, when we developed a new Square payment extension for OpenCart. It was a lot easier when using your quick_pay which doesn’t rely on iframe. Surely there has to be a better way forward.

Below is what we have for our CSP:

default-src 'self';
script-src 'self' https://js.squareup.com https://js.squareupsandbox.com https://web.squarecdn.com https://sandbox.web.squarecdn.com 'unsafe-inline' 'unsafe-eval';
style-src 'self' https://js.squareup.com https://js.squareupsandbox.com https://web.squarecdn.com https://sandbox.web.squarecdn.com https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' https://fonts.gstatic.com https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net;
img-src 'self' data: https://js.squareup.com https://js.squareupsandbox.com https://web.squarecdn.com https://sandbox.web.squarecdn.com;
frame-src 'self' https://js.squareup.com https://js.squareupsandbox.com https://web.squarecdn.com https://sandbox.web.squarecdn.com https://connect.squareup.com https://connect.squareupsandbox.com https://api.squareupsandbox.com https://api.squareup.com;
connect-src 'self' https://connect.squareup.com https://connect.squareupsandbox.com https://pci-connect.squareup.com https://pci-connect.squareupsandbox.com;
base-uri 'self';
form-action 'self' https://api.squareupsandbox.com https://api.squareup.com;
9

@josh-square : Any update yet as to when this issue will be addressed and solved?