Facebook passport authentication: “Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'DENY'.”

Question

Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=XXXXX&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv2.2%2Fdialog%2Foauth%3Fredirect_uri%3Dhttp%253A%252F%252FX%252Fauth%252Ffacebook%252Fcallback%26response_type%3Dcode%26client_id%XXXX%26ret%3Dlogin&cancel_uri=http%3A%2F%2FXXXX%2Fauth%2Ffacebook%2Fcallback%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%23_%3D_&display=page' in a frame because it set 'X-Frame-Options' to 'DENY'.

I'm adding Facebook authentication to my Express app, and I'm getting this error only when I upload and try it on Heroku (I don't receive this error on localhost). Here's my server code:

var passport = require('passport');
var FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
 clientID: 'x',
 clientSecret: 'x',
 callbackURL: 'http://x/auth/facebook/callback'
 },
 function(accessToken, refreshToken, profile, done) {
  (DB query)        
 }
));

app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback', 
  passport.authenticate('facebook', { successRedirect: '/',
                                      failureRedirect: '/auth/facebook' }));

Then I'm just doing a simple link to log in:

<a href="/auth/facebook/">
    <img src="facebooklogin.png" alt="Log in with Facebook">
</a>

I've tried to find a solution from other people's questions but to no avail, I'm just using the Passport's Facebook strategy in the same way as the example on their site. And again, I it works fine if I change the site URL from developers.facebook.com to localhost and try to log in that way, and after I've allowed it on an account I can log in with that account when it's on Heroku as well. What am I doing wrong?

Answer 1

将应用程序上传到heroku时，尝试在开发人员页面上的Facebook应用程序上更改回调URL，并将其更改为完全限定的URL，例如“ example.herokuapp.com/auth/facebook/callback”

Answer 2

did you try to add target="_top" ? I did this and it fixed my issue.

as seen in:

Loading Iframe Facebook (Load denied by X-Frame-Options)