Add CORS support for s.codepen.io

[maya]

Description of feature or bug

I have this CodePen: https://codepen.io/USWDS/pen/BYjrRK?editors=1100

and getting this error in the console in Chrome:

Access to Font at 'https://federalist-proxy.app.cloud.gov/preview/uswds/uswds/add-utilities/dist/fonts/sourcesanspro-bold-webfont.woff2' from origin 'https://s.codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

From @jseppi:

So, federalist would have to add some CORS headers. I think that can be done either at the S3 level or in our proxy. It’s not a technical big lift.

Definition of done

"pens" on s.codepen.io can AJAX-in assets from Federalist sites through federalist-proxy.app.cloud.gov

Testing pen: https://codepen.io/anon/pen/mXrXVR?editors=0011

After evaluating, edit this part:

Level of effort

low medium (updated)

Implementation outline (if higher than "low" effort):

• Delete existing CORS policy on the staging bucket so that it doesn't conflict with Add CORS support for GET requests from s.codepen.io pages-proxy#24. See details
  at https://cloud.gov/docs/services/s3/#allowing-client-side-web-access-from-external-applications and https://docs.aws.amazon.com/cli/latest/reference/s3api/delete-bucket-cors.html
• Confirm staging works: https://codepen.io/anon/pen/mXrXVR?editors=0011
• Merge changes to and deploy production federalist-proxy

[maya]

It would be great to have this by next week (2/12) when we plan to start using this in user testing. cc @wslack @jseppi

[wslack]

this is pending compliance approval

[wslack]

@jseppi this has to be manually deployed, right?

[wslack]

should we test it with staging first?

[jseppi]

Yup. I've already deployed the change to federalist-proxy-staging.

[jseppi]

Unfortunately, this isn't working in staging :(

It seems there is some other level (S3 probably or maybe CloudFront) that is adding its own Access-Control-Allow-Origin header, which results in a duplicated header, and thus an error:

[jseppi]

Here's the pen where I'm testing this: https://codepen.io/anon/pen/mXrXVR

[wslack]

That's odd. If there was already a header with a wildcard this should have been working already.

Should we remove from staging and see what headers we can see without?

[jseppi]

huh, so the staging proxy appears to already have some CORS headers, while production does not.

[wslack]

That is real odd. And we know its not in the code...is the next step to ask cloud.gov?

[jseppi]

It's coming directly from the staging S3 bucket:

[wslack]

Hmm k. I assume the only people who can see those settings are cloud.gov staff (why would they be different? so odd)

[jseppi]

Updated the implementation sketch with new details in light of finding out we can set CORS policy directly on the cloud.gov-brokered S3 buckets.

[jseppi]

Updated again :)

[wslack]

@jseppi I'm good doing a merge to production if we're sure that staging is working

[jseppi]

Alright, this should be all finished 🎉

Want to confirm, @maya? I'm not seeing any more CORS errors on your pen at https://codepen.io/USWDS/pen/BYjrRK?editors=1101

[maya]

@jseppi LGTM 🎉

yes, I checked some of my pens that had the errors before and they don't have it anymore!

[jseppi]

@maya: we changed how we're doing this in order to fix the X-Frame-Options problem. Everything looks like it works now to me, but can you confirm, please?

[maya]

Confirmed! Working for me 🎉