CORS workaround to enable downloading of content #1032

millicentachieng · 2021-07-19T01:39:44Z

Overview

Some queries resulting in a file download have been failing due to CORS policy. We have a few issues that have been raised by some of our users and we have been advising them to use workaround outlined in the GitHub issues, microsoftgraph/msgraph-sdk-javascript#388 and https://github.com/microsoftgraph/microsoft-graph-docs-contrib/issues/8394.

The initial plan was to prevent the automatic redirect to the download link which was throwing the CORS error, extract the Location header which holds the download link and finally present the link to the user to download the file. This could not work because the Microsoft Graph JavaScript SDK does not support setting redirects to manual.

The CORS workaround implemented in this PR fetches the file download URL by running a separate query and presenting the link to the user which they can use to download the file. The challenge with this approach is that the file will only be downloadable in it's original format and any formatting instructions in the query parameters are ignored.

Demo

The user is also notified that the download URL is only for the original file format.

The user is also informed that headers are missing since it's a workaround and not the expected result of the query.

We also have other queries that return a file response successfully but the result is not displayed to the user leading to the user thinking that there's no response. Here's an example of an issue raised #459.

The implementation now presents the user with information about the response and a link to download the file.

The only challenge here is that the downloaded file will not have the same name as the original file. Had Content-Disposition header been exposed, it would have been possible to download the file with it's original name.

Testing Instructions

Run the below query anonymously
https://graph.microsoft.com/v1.0/me/drive/recent?$select=id
Copy one id from the result and use it in the below queries
https://graph.microsoft.com/v1.0/me/drive/items/{id}/content
https://graph.microsoft.com/v1.0/me/drive/items/{id}/content?format=pdf
Repeat while logged in

…ph-explorer-v4 into task/cors-workaround

github-actions · 2021-07-23T11:44:47Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

…ph-explorer-v4 into task/cors-workaround

ddyett · 2021-08-11T00:21:15Z

anything blocking this moving forward?

…ph-explorer-v4 into task/cors-workaround

ghost · 2021-09-13T20:50:38Z

anything blocking this moving forward?

@ddyett @adhiambovivian @millicentachieng - we still have some work to do on the copyediting of the error messages and there is also a spacing issue in one of the error messages.

millicentachieng · 2021-09-15T11:49:38Z

anything blocking this moving forward?

@ddyett Sorry, I missed this comment but please review the PR when you get a chance.

millicentachieng · 2021-09-15T11:53:31Z

anything blocking this moving forward?

@ddyett @adhiambovivian @millicentachieng - we still have some work to do on the copyediting of the error messages and there is also a spacing issue in one of the error messages.

@kristen-msft, could you please point me to these error messages? The screenshots in the description of the PR have all the expected messages.

github-actions · 2021-09-15T11:58:26Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

src/app/services/actions/query-action-creator-util.ts

src/app/services/actions/query-action-creators.ts

src/app/views/query-response/headers/ResponseHeaders.tsx

src/messages/GE.json

…ph-explorer-v4 into task/cors-workaround

…aph/microsoft-graph-explorer-v4 into task/cors-workaround

github-actions · 2021-09-17T06:49:46Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

jasonjoh · 2021-09-17T12:34:05Z

Should we present this as a limitation of the JavaScript SDK? CORS is CORS right, no SDK can bypass it by design. I think this is more accurately described as an issue with the File API (good summary here). Basically, the Files API doing a 302 redirect is fine, but the server it redirects to does NOT support CORS, so the redirect fails in JavaScript. This would fail even without the SDK.

The OneDrive team patched it up to allow simple GET requests on the downloadUrl (these don't trigger CORS), hence the workaround that's required.

I think your A workaround has been used messages should give a little more info on the problem:

That the redirected download URL is not CORS-compliant
A link to https://developer.mozilla.org/docs/Web/HTTP/CORS for more information on CORS

We may want to add this to https://docs.microsoft.com/graph/api/driveitem-get-content?view=graph-rest-1.0&tabs=http and just have GE link to that doc for more info.

I also think your file response is only available...due to limitations of the JS SDK message should instead say something like due to limitations of the workaround, the file is only available....

…load URL is not CORS compliant

github-actions · 2021-09-20T03:14:07Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

github-actions · 2021-09-20T03:14:17Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

millicentachieng · 2021-09-20T03:16:41Z

Thanks @jasonjoh, for these insights. I have updated the contents of the messages to reflect what you've highlighted. I've also talked to Jeremy Kelly about updating the API documentation to include details on the workaround.

…load URL is not CORS compliant

github-actions · 2021-09-20T03:29:14Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

…ph-explorer-v4 into task/cors-workaround

github-actions · 2021-09-27T19:05:29Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

github-actions · 2021-10-12T10:14:42Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

github-actions · 2021-10-12T10:23:13Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

github-actions · 2021-10-12T10:24:45Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-1032.centralus.azurestaticapps.net

* HB of localized GE.jsons (#1094) * Capture telemetry for Graph Proxy API calls (#1098) * Capture GE mode for all telemetry items (#1105) * Update how we are sanitizing track trace to include more info (#1122) * Capture telemetry for graph toolkit example link (#1125) * chore: handover-translations (#1107) * Feature: input hints (#1104) * Enhancement: Make pivots headers responsive (#1121) * Chore: add linter workflow (#1132) * Fix: linting errors (#1133) * Fix: Request headers textfield bug (#1137) * Fix: Update packages (#1138) * Fix: makes query color in the text area black (#1152) * Fix: CORS workaround to enable downloading of content (#1032) * Fix: Accessibility error for 'button-name' (#1164) * Fix: move documentation links to the first column (#1158) * Fix: Add focus on button (#1153) * Fix: Create user when emailAddress is unavailable (#1165) * Chore: add dependabot configuration (#1188) * Fix: try it interaction (#1185) * Fix: failing nextlink call (#1184) * Fix: request and response height (#1201) * Fix: Remove hover functions on history tab (#1204) * Feature: Add feedback button and pop-up (#1183) * Fix: Update GitHub workflow (#962) * Fix: Concept try-it button (#966) * Fix: prevent running empty requests (#965) * Task: add description to documentation link (#1203) * Chore: translate to German (#1208) * validate index of selected query (#1210) * Translate to portuguese (#1212) * Chore: Handover translations (#1213) * Chore(deps): Bump @babel/eslint-parser from 7.12.13 to 7.16.3 (#1207) * Feature: adds go to the snippet tabs (#1189) * Chore: (Dependabot) Update packages (#1220) * Chore(deps): Bump jest-watch-typeahead from 0.2.1 to 0.5.0 (#1199) * Chore(deps): Bump @axe-core/webdriverjs from 4.2.2 to 4.3.1 (#1192) * Chore(deps-dev): Bump react-test-renderer from 16.8.3 to 16.13.0 (#1195) * Chore(deps): Bump eslint-plugin-flowtype from 2.50.1 to 2.50.3 (#1198) * Chore(deps): Bump re-resizable from 6.9.0 to 6.9.1 (#1197) * Chore(deps): Bump terser-webpack-plugin from 3.1.0 to 4.2.3 (#1196) * Chore(deps): Bump file-loader from 2.0.0 to 6.2.0 (#1194) * Chore(deps-dev): Bump @types/react from 16.8.3 to 17.0.35 (#1219) * Chore(deps): Bump react from 16.8.2 to 16.14.0 (#1193) * Fix: Linting errors in snippets (#1233) * Fix: Failure to load on Safari (Mac) (#1222) * chore(release): 4.14.0

Millicent Achieng added 2 commits July 19, 2021 04:38

CORS workaround to enable downloading of content

2487624

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

3421a3c

…ph-explorer-v4 into task/cors-workaround

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

3bbddb9

…ph-explorer-v4 into task/cors-workaround

Millicent Achieng added 6 commits August 30, 2021 00:04

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

196446b

…ph-explorer-v4 into task/cors-workaround

Move response messages to own file

44d12e1

Add method for checking if query response is downloadable

2efc4a7

Have building of graph query and actual graph call in separate methods

70f5d68

Merge branch 'dev' into task/cors-workaround

ecf9f46

Show download link for failed redirect due to CORS

17fafd9

Update messages

cd34524

millicentachieng marked this pull request as ready for review September 10, 2021 06:50

millicentachieng requested review from adhiambovivian, ddyett, ElinorW and thewahome as code owners September 10, 2021 06:50

Merge branch 'dev' into task/cors-workaround

33321b2

thewahome reviewed Sep 16, 2021

View reviewed changes

Millicent Achieng added 3 commits September 17, 2021 05:10

Rename variable

4ab3469

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

1137eee

…ph-explorer-v4 into task/cors-workaround

Fix dispatch message for authenticated CORS workaround

00bfdc1

Millicent Achieng added 2 commits September 17, 2021 09:42

Update messages

5f870a3

Merge branch 'task/cors-workaround' of https://github.com/microsoftgr…

155fe48

…aph/microsoft-graph-explorer-v4 into task/cors-workaround

Update messages to mention workaround is used because redirected down…

223aea2

…load URL is not CORS compliant

Update messages to mention workaround is used because redirected down…

9240169

…load URL is not CORS compliant

millicentachieng force-pushed the task/cors-workaround branch from c42eb28 to 9240169 Compare September 20, 2021 03:23

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

f30b746

…ph-explorer-v4 into task/cors-workaround

fix linting errors

9e793ff

thewahome added 2 commits October 12, 2021 13:18

rename workflow

fdb3e30

Merge branch 'dev' into task/cors-workaround

91f47be

thewahome approved these changes Oct 12, 2021

View reviewed changes

thewahome merged commit 078242c into dev Oct 12, 2021

thewahome deleted the task/cors-workaround branch October 12, 2021 10:28

This was referenced Sep 25, 2024

chore(dev): release 10.4.1 #3341

Closed

chore(dev): release 10.4.1 #3344

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CORS workaround to enable downloading of content #1032

CORS workaround to enable downloading of content #1032

millicentachieng commented Jul 19, 2021 •

edited

Loading

github-actions bot commented Jul 23, 2021

ddyett commented Aug 11, 2021

ghost commented Sep 13, 2021

millicentachieng commented Sep 15, 2021

millicentachieng commented Sep 15, 2021

github-actions bot commented Sep 15, 2021

github-actions bot commented Sep 17, 2021

jasonjoh commented Sep 17, 2021

github-actions bot commented Sep 20, 2021

github-actions bot commented Sep 20, 2021

millicentachieng commented Sep 20, 2021

github-actions bot commented Sep 20, 2021

github-actions bot commented Sep 27, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

CORS workaround to enable downloading of content #1032

CORS workaround to enable downloading of content #1032

Conversation

millicentachieng commented Jul 19, 2021 • edited Loading

Overview

Demo

Testing Instructions

github-actions bot commented Jul 23, 2021

ddyett commented Aug 11, 2021

ghost commented Sep 13, 2021

millicentachieng commented Sep 15, 2021

millicentachieng commented Sep 15, 2021

github-actions bot commented Sep 15, 2021

github-actions bot commented Sep 17, 2021

jasonjoh commented Sep 17, 2021

github-actions bot commented Sep 20, 2021

github-actions bot commented Sep 20, 2021

millicentachieng commented Sep 20, 2021

github-actions bot commented Sep 20, 2021

github-actions bot commented Sep 27, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 12, 2021

millicentachieng commented Jul 19, 2021 •

edited

Loading