跳入NextJS（或不）進入網絡攻擊

Webmention是2017年1月12日上次更新的W3C建議，是一種簡單的機制，用於在另一個網站上提到URL通知URL。相反，它允許網站在其他地方提及時接收通知。從本質上講，它將您的網站轉換為活躍的社交媒體中心，從而促進了來自各種平台（Twitter，Instagram，Mastodon等）的溝通。

實施網絡攻擊各不相同； WordPress用戶可以輕鬆安裝插件，而其他用戶可能需要更多的手動配置。讓我們探討這個過程。

實施計劃

1. 建立網絡登錄端點。
2. 將社交媒體互動轉換為網絡企業。
3. 集成到您的網站/應用程序中。
4. 配置出站網絡攻擊。

幸運的是，一些服務簡化了此過程。第三步需要更多的努力，但我將詳細介紹我在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>
      ）
    >
  ）；
};

步驟4：處理出站提及

WebMention.App具有API令牌和Webhook，簡化了出站的提及。另外，雷米·夏普（Remy Sharp）的wm CLI軟件包可以用作後構建腳本。微型模式（H-訪問和H卡）對於更豐富的出站提及至關重要。

結論

本指南提供了對網絡實施的全面概述。如果有幫助，請記住分享這篇文章！

參考

• 在靜態站點上使用Web提及（MaxBöck）
• 客戶端網站（SWYX）
• 發送傳出網站（Remy Sharp）
• 您的第一個網站（Aaron Parecki）

進一步閱讀

• Webmention W3C規範（建議）
• Webmention.io
• WebMention.App
• 出站網絡委員會CLI
• 天哪
• microformats.org
• indieweb

以上是跳入NextJS（或不）進入網絡攻擊的詳細內容。更多資訊請關注PHP中文網其他相關文章！