Facebook: Unsafe JavaScript issue (document.domain values should be same)

Question

Mine is a FB App based on canvas. Facing an issue both on Chrome and Firefox, (although usually Chrome):

1.When I hit my approved fb app secure URL on a new incognit

Answer 1

In my case I had a "facebook-like-box" at "_Layout" view and I had to customize some CSS for it, at the global.css file.

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

Then, when I tried to load internal pages, such as Articles and News, which has a share button for facebook, it starts to give me this error:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:51826" from accessing a frame with origin "http://static.ak.facebook.com". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

Somehow I think that line of CSS code was causing this issue (by being at the global scope), trying to access and modify behavior of the iframe for my share button.

1. Removing that line of CSS code solved the problem.
2. Moving that line of CSS code to the specific page which has the "facebook-like-box" inside < style > tags.