Skip to content

✨ amp-facebook-comments: Initial Bento component#33852

Merged
caroqliu merged 15 commits intoampproject:mainfrom
caroqliu:bento-facebook-comments
Apr 22, 2021
Merged

✨ amp-facebook-comments: Initial Bento component#33852
caroqliu merged 15 commits intoampproject:mainfrom
caroqliu:bento-facebook-comments

Conversation

@caroqliu
Copy link
Copy Markdown
Contributor

Note: The amp-facebook-* components rely on component tag name to identify which embedded post type to use:

amphtml/3p/facebook.js

Lines 213 to 225 in 64159c5

export function facebook(global, data) {
const extension = global.context.tagName;
let container;
if (extension === 'AMP-FACEBOOK-PAGE') {
container = getPageContainer(global, data);
} else if (extension === 'AMP-FACEBOOK-LIKE') {
container = getLikeContainer(global, data);
} else if (extension === 'AMP-FACEBOOK-COMMENTS') {
container = getCommentsContainer(global, data);
} /*AMP-FACEBOOK */ else {
container = getEmbedContainer(global, data);
}

This PR adds the Bento component 1.0 version for amp-facebook-comments without modifying the above. A follow up PR should clean up the above conditions to be tagName independent, perhaps introducing an enum instead which the Preact component can use. (Currently it is not ideal for the Preact layer to have to pass in contextOptions={{tagName: 'AMP-FACEBOOK-COMMENTS'}})

ref={ref}
ready={!!name}
sandbox={sandbox}
sandbox={excludeSandbox ? undefined : sandbox}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sigh, I was going to suggest using sandbox={null}, but it seems Preact will incorrectly coerce that to an empty string.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we file an issue with Preact?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, if the behaviour is different than other JSX syntax environments.

Copy link
Copy Markdown
Contributor

@kristoferbaxter kristoferbaxter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a few small items to consider.

/* non-overridable props */
// We sandbox all 3P iframes however facebook embeds completely break in
// sandbox mode since they need access to document.domain, so we
// exclude facebook.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the only thing they need access to is document.domain? Could we create a Proxy?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jridgewell Do you have more historical context here? This behavior mimics:

amphtml/src/3p-frame.js

Lines 158 to 161 in 2bddbc2

const excludeFromSandbox = ['facebook'];
if (!excludeFromSandbox.includes(opt_type)) {
applySandbox(iframe);
}

And comment is copied from test page of 0.1:

// We sandbox all 3P iframes however facebook embeds completely break in
// sandbox mode since they need access to document.domain, so we
// exclude facebook.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might try adding sandbox again, and see if it breaks. Maybe Facebook has updated their scripts.

ref={ref}
ready={!!name}
sandbox={sandbox}
sandbox={excludeSandbox ? undefined : sandbox}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, if the behaviour is different than other JSX syntax environments.

/* non-overridable props */
// We sandbox all 3P iframes however facebook embeds completely break in
// sandbox mode since they need access to document.domain, so we
// exclude facebook.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might try adding sandbox again, and see if it breaks. Maybe Facebook has updated their scripts.

@caroqliu caroqliu merged commit 3dce070 into ampproject:main Apr 22, 2021
rochapablo pushed a commit to rochapablo/amphtml that referenced this pull request Aug 30, 2021
* Prototype

* Add note about excludeSandbox

* Add unit tests

* Add types

* Separate option props with default locale

* Prettify bundles config

* Use Object.assign

* Remove constructor

* Update imports

* Assert on given `allow`

* Simplify onReady condition

* Allow facebook loader dependency

* Update test url
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants