Power-up authorization CORS block

Trello
1

Hello,

I’m looking to authorize my power-up and retrieve the user’s token using the following method in an iframe:

https://trello.com/1/authorize?expiration=never&scope=read&key=${APIKey}&callback_method=fragment&return_url=${server}/views/getToken.js

However, when the browser returns to the return URL (which is going to return to an iframe) , it’s being blocked with the message: “Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://trello.com’) does not match the recipient window’s origin.”

I’ve already added my domain to Trello’s allowed origin, but that doesn’t seem to be the solution.
How can I provide Trello with the allowed origin it needs?

2

I am just guessing here a bit, but your return URL is a JavaScript file and that does not seem accurate off the top of my head.

You should try instead to specify an HTML page and then in that HTML reference the JavaScript file via a script source. But directly referencing a JS file just does not seem accurate.

3

Hi, I also cannot authorise my app in an iframe.

t.getRestApi().authorize({
                        scope: 'read,write,account',
                        expiration: "never",
                        return_url: window.location.href
                    }).then(async function (token) {
                        // success
                    })
                    .catch(TrelloPowerUp.restApiError.AuthDeniedError, function () {
                        // failure
                        alert('Denied');
                    })

It works on Safari, Firefox and Trello app, but not on Chrome since a few weeks.

4

You are correct.
I fixed it to reference an HTML file,
but I keep getting the ‘CORS origin error’ message.

5

Just in case, for your Power-Up, did you add your domain and your LOCAL web server (for dev/test) to the Power-Up allowed origins?

image
image796×560 23.9 KB

Also, it appears you are making an API call to get the token, with the wrong endpoint. It is

https://api.trello.com/1...

Additionally, in a Power-Up you generally do not need to call that to get a token. You can follow this guidance here to get the token using the Power-Up api (t.getRestApi()):

https://developer.atlassian.com/cloud/trello/power-ups/rest-api-client/

You have to specify your API key, AppName and author name in the Initialize callback.

window.TrelloPowerUp.initialize({
  // ...
  // This is where you declare your capabilities
  // ...
}, {
  appKey: 'my-trello-key',
  appName: 'My Power-Up',
  appAuthor: 'My Company'
});

Then you call t.getRestApi().authorize()… Once you have a token, you can then make other API calls.

6

If it works in other browser but not Chrome, turn off all your extensions and make sure you have not blocked pop-ups from Trello. Try an InPrivate window as well, but my bet is an extension or blocked pop-up causing the issue.