ghost
commented
2 years ago Thank you for your contribution to OneDrive API Docs. We will be triaging your incoming issue as soon as possible.
Closed joshirakesh closed 1 year ago
ghost
commented
2 years ago Thank you for your contribution to OneDrive API Docs. We will be triaging your incoming issue as soon as possible.
ThomasMichon
commented
2 years ago @joshirakesh, when you make the POST request to FilePicker.aspx, you need to include a form parameter for access_token. The access_token needs to be obtained from MSAL with the 'audience' set to the domain from your URL.
If you don't send the token, the response will enforce the Content Security Policy. This is intended to protect the user from click-jacking by an arbitrary host application.
patrick-rodgers
commented
1 year ago Please see the updated docs here.
Closing this issue as answered. If you have additional questions or we did not answer your question, please open a new issue, ref this issue, and provide any additional details available. Thank you!
adevine
commented
1 month ago I know this is a closed issue, but if you see this @ThomasMichon and/or @patrick-rodgers - in the comment above you state "The access_token needs to be obtained from MSAL with the 'audience' set to the domain from your URL." I searched around a bit and it wasn't clear to me how to ensure this 'audience' value is set. Right now I'm getting a token like the below code:
const app = await PublicClientApplication.createPublicClientApplication({
auth: {
authority: "https://login.microsoftonline.com/common", // for consumers I use https://login.microsoftonline.com/consumers
clientId: hookConfig.clientId,
redirectUri: window.location.origin,
},
});
// for authParams below I use { scopes: ["OneDrive.ReadOnly"] } for consumers and { scopes: [".default"] } for work/school accounts
try {
const resp = await app.acquireTokenSilent(authParams);
accessToken = resp.accessToken;
} catch (e) {
// per examples we fall back to popup
const resp = await app.loginPopup(authParams);
app.setActiveAccount(resp.account);
if (resp.idToken) {
const resp2 = await app.acquireTokenSilent(authParams);
accessToken = resp2.accessToken;
} else {
throw e;
}
}Currently my code works for consumer accounts, but for work/school accounts I am getting the CSP frame-ancestors error. Is it that I need to update the scopes to something besides just [".default"] to get this to work? I just couldn't find anything online about setting an 'audience' param or config value.
We're hosting the file picker within an iframe using the procedures outlined in the instructions here. Sometimes picker refuses to connect and throws the following content security policy issue.
Refused to frame 'https://{{tenant}}.sharepoint.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' teams.microsoft.com *.teams.microsoft.com *.skype.com *.teams.microsoft.us local.teams.office.com *.powerapps.com *.yammer.com *.officeapps.live.com *.office.com *.stream.azure-test.net *.microsoftstream.com *.dynamics.com *.microsoft.com securebroker.sharepointonline.com".We do not set the
srcof the iframe ourselves, but rather, as stated in the documentation, we use a POST request with a valid access token in the form parameters to load FilePicker.aspx.❌ Here's an example of a post request when it failed to load:
Request
Response Headers
We noticed that it works properly when we reopen it in the same browser session.
✅ Here's an example of a post request when it loaded correctly:
Request
Response Headers
When it loads correctly, there are no 'content-security-policy' response headers.
Could you please help us in identifying what is causing this and how to resolve it?
Document Details
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.