跳入NextJS（或不）进入网络攻击-css教程-PHP中文网

首页

web前端

css教程

跳入NextJS（或不）进入网络攻击

尊渡假赌尊渡假赌尊渡假赌

Apr 05, 2025 am 10:25 AM

跳入NextJS（或不）进入网络攻击

Webmention是2017年1月12日上次更新的W3C建议，是一种简单的机制，用于在另一个网站上提到URL通知URL。相反，它允许网站在其他地方提及时接收通知。从本质上讲，它将您的网站转换为活跃的社交媒体中心，从而促进了来自各种平台（Twitter，Instagram，Mastodon等）的沟通。

实施网络攻击各不相同； WordPress用户可以轻松安装插件，而其他用户可能需要更多的手动配置。让我们探讨这个过程。

实施计划

建立网络登录端点。
将社交媒体互动转换为网络企业。
集成到您的网站/应用程序中。
配置出站网络攻击。

幸运的是，一些服务简化了此过程。第三步需要更多的努力，但我将详细介绍我在atila.io上的方法。

我的NextJS基于服务器端渲染博客使用客户端网络媒体请求，易于适应其他React Apps和JavaScript应用程序。

步骤1：定义Webmention端点

要接收Webmentions，您可以创建自定义脚本或使用Webmention.io（我选择的方法）之类的服务。

Webmention.io是免费的；您只需要验证域名。我使用了一个将我的网站链接到社交媒体资料的rel="me"属性。一个链接就足够了，但我包括了所有帐户。

 <a href="https://www.php.cn/link/069802d489a7b73dd31fd13b0f2cd690" rel="me noopener noreferrer" target="_blank">
  @atilafassina
</a>

这需要从我的Twitter个人资料回到我的网站的相互链接。在WebMention.io上进行验证后，添加您的网站URL。这提供了您的网络登录端点。包括这些<link>网页中的标签收集提及：

<link href="https://webmention.io/%7Buser%7D/webmention" rel="webmention">
<link href="https://webmention.io/%7Buser%7D/xmlrpc" rel="pingback">

用您的webmention.io用户名替换{user} 。

步骤2：处理社交媒体互动

尽管已准备好网络攻击，但它们的用法是有限的。转换社交媒体互动至关重要。 Bridgy，一项免费服务，将联合内容连接并将其转换为网站。使用SSO，连接您的各种配置文件。

步骤3：在您的网站上显示网络攻击

此步骤涉及检索和显示Webmention数据。我们将其分为几个阶段：计数提及，获取提及并与NextJS（可选）集成。

计算网络攻击

Webmention.io API提供了一系列提及。响应的结构如下：

 type tmentionscountresponse = {
  计数：数字；
  类型： {
    喜欢：数字；
    提及：数字；
    回复：号码；
    重新发布：数字；
  };
};

这被处理为：

 type tmentionscount = {
  提及：数字；
  喜欢：数字；
  总数：数字；
};

终点是： https://webmention.io/api/count.json?target=${post_url} 。 MaxBöck和Swyx结合了喜欢和回复的重新提及。

 const getmentionscount = async（posturl：string）：承诺<tmentionscount> => {
  const resp =等待fetch（`https://webmention.io/api/count.json?target=jundejumport=junteqution {posturl}/`）;
  const {type，count} =等待desp.json（）;

  返回 {
    喜欢：类型。
    提及：type.mention类型。
    总计：计数，
  };
};</tmentionscount>

获取网站

https://webmention.io/api/mentions endpoint被分页，接受page ， per-page和target参数。成功的响应包括一系列links ：

 type tmention = {
  来源：字符串;
  经过验证：布尔值；
  verified_date：string;
  id：数字;
  私人：布尔人；
  数据： {
    作者： {
      名称：字符串;
      URL：string;
      照片：字符串；
    };
    URL：string;
    名称：字符串;
    内容：字符串;
    出版：字符串；
    发布_TS：编号；
  };
  活动： {
    类型：'link'| '回复'| 'repost'| '喜欢';
    句子：字符串;
    stone_html：字符串;
  };
  目标：字符串；
};

提取请求：

 const getmentions = async（
  页面：字符串，
  后续页：编号，
  Posturl：字符串
）：Promise  => {
  const resp =等待提取（
    `https://webmention.io/api/mentions？
  ）；
  const list =等待resp.json（）;
  返回list.links;
};

NextJS集成（可选）

NextJS提供getStaticProps ， getStaticPaths和getServerSideProps的数据获取。我选择了使用SWR进行缓存和州管理的客户端方法。

显示网络计数

一个MentionsCounter组件显示了计数：

 // ...（导入语句和类型）...

const incenionscounter =（{posturl}）=> {
  const {t} = usetranslation（）;
  const {data = {}，error} = usewr（posturl，getmentionscount）;

  如果（错误）{
    返回<errormessage>{t（'common：errorwebmentions'）}}</errormessage> ;
  }

  const {likes =' - '，提及=' - '} = data;

  返回 （
    <mentioncounter>
      <li>
        <heart title="喜欢"></heart>
        <counterdata>{number.isnan（喜欢）？ 0：喜欢}</counterdata>
      </li>
      <li>
        <comment title="提及"></comment>
        <counterdata>{number.isnan（提及）？ 0：提及}</counterdata>
      </li>
    </mentioncounter>
  ）；
};

显示提及

Webmentions组件显示了实际提及，使用状态进行分页和useEffect来获取：

 // ...（导入语句和类型）...

const webmentions =（{posturl}）=> {
  const {t} = usetranslation（）;
  const [page，setPage] = usestate（0）;
  const [提及，添加剂] = usestate（[]）;

  useeffect（（）=> {
    const fetchmentions = async（）=> {
      const旧=等待getmentions（Page，50，Posturl）;
      添加（（提及）=> [...提及，...较旧的]）;
    };
    提取（）;
  }， [页]）;

  返回 （
    
      {tedi firits.map（（（提及，index）=>（（
        <mention key="{mention.data.author.name}">
          <authoravatar lazy src="%7Bmention.data.author.photo%7D"></authoravatar>
          <mentioncontent>
            <mentiontext activity="{mention.activity.type}" data="{mention.data}"></mentiontext>
          </mentioncontent>
        </mention>
      ）}}
      {提及。长度> 0 &&（（
        <morebutton onclick="{()"> setPage（第1页）} type =“ button”>
          {t（'common：more'）}}
        </morebutton>
      ）
    >
  ）；
};