1
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?

user3473543
  • 131
  • 1
  • 10
  • I've discovered that this is only a problem with my domain. I have this domain forwarding to x.herokuapp.com with domain masking on goDaddy. So when I go to x.herokuapp.com and try to log in, it works fine. – user3473543 Feb 02 '15 at 00:47
  • try to add `target="_top"` as seen in: http://stackoverflow.com/questions/14915152/loading-iframe-facebook-load-denied-by-x-frame-options – ghuroo Feb 01 '17 at 16:44

2 Answers2

0

try changing your callback url on the facebook app at the developer page when you upload the app to heroku, to the fully qualified URL e.g "example.herokuapp.com/auth/facebook/callback"

Smile
  • 207
  • 4
  • 13
  • Assuming you mean the "Valid OAuth redirect URIs" field, that didn't work for me. I couldn't find any other callback fields. – user3473543 Feb 02 '15 at 00:07
  • also domain masking hides the url so facebook cant actually verify your URL. what is the url of the hosted app and what is in the facebook callback field – Smile Feb 03 '15 at 11:54
0

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)

Community
  • 1
  • 1
ghuroo
  • 318
  • 2
  • 10