Facebook Like Button在Angular App中的宽度为0

Question

TL;DR

我将Meta Developers Page for a Facebook Like Button 生成的确切代码插入this CodePen 但按钮未显示（宽度和高度均为0px）

目标

在我们的 Angular 12 应用程序中，我们希望在视频中包含三件事：

• Facebook 赞按钮
• Facebook 分享按钮
• Pinterest Pin 按钮

我为每个组件创建了组件，它们触发将脚本标签写入 DOM 以获取 JS 库（我们使用 NGXS 进行异步操作）。

facebook-share-button.component.ts

const SCRIPT_ID = 'facebook-share-button';

@Component(...)
export class FacebookShareButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { async: true }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-share-button.component.html

<div class="facebook-share-button">
  <div id="fb-root"></div>
  <div
    class="fb-share-button"
    [attr.data-href]="fullUrl$ | async"
    data-layout="button"
    data-size="large"
  ></div>
</div>

问题

Facebook Share Button 和 Pinterest Pin Button 工作正常，只有 Facebook Like 按钮不显示。它有 0px 的宽度和高度

完整代码

facebook-like-button.component.ts

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CoreActions } from 'src/app/core/core.actions';

const SCRIPT_ID = 'facebook-like-button';

@Component({
  selector: 'app-facebook-like-button',
  templateUrl: './facebook-like-button.component.html',
  styleUrls: ['./facebook-like-button.component.styl'],
})
export class FacebookLikeButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { anonymous: true, nonce: '4j5id3DJ' }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-like-button.component.html

<div class="facebook-like-button">
  <div id="fb-root"></div>
  <div
    class="fb-like"
    [attr.data-href]="fullUrl$ | async"
    data-width="77"
    data-layout="standard"
    data-action="like"
    data-size="large"
    data-share="false"
  ></div>
</div>

我尝试过的事情

1. 删除 facebook-share-button 组件（可能两个脚本相互干扰）
2. 将代码放入ngOnInit()（而不是ngAfterViewInit()）
3. 设置静态data-href 属性（即移除异步管道）
4. 删除 facebook-share-button.component.html 或 facebook-like-button.component.html 或两者中的 <div id="fb-root"></div>
5. 将<div id="fb-root"></div> 移动到app.component.html
6. 玩转.fb-like 的选项，然后一一删除
7. 在脚本标签中将async、defer和crossorigin设置为不同的值
8. 其他浏览器和停用 AdBlockers
9. 手动包含脚本标签
10. 在 Stackoverflow 上搜索有类似问题的人
11. 以上所有内容的组合

但没有任何效果。

最后，我将developers.facebook.net 提供的确切代码包含在app.component.html 中，但仍然无法正常工作。我尝试在 Codepen 中输入它（见上文），但仍然没有 Button！

我觉得有点傻。我在这里做一些根本错误的事情吗......？ ？？？ 你能帮忙吗？

Answer 1

您共享的 Codepen 在 Google Chrome 上为我工作但仅在 Chrome 上。

在 Safari 和 Firefox 上，我遇到内容安全政策问题。

内容安全策略

问题是由于Content Security Policy（又名CSP）：

CSP 不是盲目信任服务器提供的所有内容，而是定义了 Content-Security-Policy HTTP 标头，它允许您创建受信任内容源的允许列表，并指示浏览器仅从这些来源执行或呈现资源。即使攻击者可以找到注入脚本的漏洞，该脚本也不会匹配白名单，因此不会被执行。

因此，您需要在您的网站上允许 facebook 路径（用于提供脚本）。

Facebook 所需的列表很长，并且多年来不断增长，从 this page 开始，您应该添加如下内容：

script-src
  https://connect.facebook.net
  https://graph.facebook.com
  https://js.facebook.com;
style-src
  'unsafe-inline';
frame-src
  *.facebook.com
  connect.facebook.net;
child-src
  *.facebook.com
  connect.facebook.net;
img-src
  data:
  *.facebook.com
  *.facebook.net
  *.fbcdn.net;
font-src
  data:;
connect-src
  *.facebook.com
  connect.facebook.net;
form-action
  *.facebook.com
  connect.facebook.net;

以上这些值需要添加到您的站点默认值中，应如下所示：

Content-Security-Policy: default-src 'self'; img-src *; child-src: *

More documentation on the CSP from Mozilla Docs.

有用的链接：

• https://developers.facebook.com/community/threads/214596203217042/#:~:text=Here%27s%20the%20solution%20for%20adding%20to%20your%20.htaccess%20(this%20can%20also%20be%20done%20via%20meta%20tags)
• https://stackoverflow.com/a/26572451/10797718
• Whats the most restricted Content-Security-Policy to enable facebook connect

通过 HTML 标签 <meta> 设置 CSP

您可以通过 HTML <meta> 设置 CSP，例如：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

请注意，如果您在您的网站<head> 中设置多个<meta http-equiv=...，则只会使用最后一个<head>，其他将被忽略。

广告拦截器，另一个潜在问题

如果您有像 EFF Privacy Badger 或 uBlock (uBlock Origin) 这样的广告拦截器，您将需要禁用这些扩展程序或取消阻止该网站，然后重新加载 codepen。

拥有广告拦截器的用户不会看到您的按钮，因为他们发出的 JS 调用将被阻止，在 Google Chrome 上您会看到 net::ERR_BLOCKED_BY_CLIENT。