創作內容

0 GP

使用 AddToAny 分享箱,踩雷過程

作者:微笑A│2024-04-23 16:47:58│巴幣:0│人氣:131

網站之前有配置分享箱的系統,使用 sharejs 依賴  
該依賴只要套上預設即可,十分方便

不過最新的 release 已經是 2016 年的事了...

實際也有些按鈕已經過時,無法使用



icarus 本身是支援多種分享功能的  
由於 sharejs 停止維護,官方建議採用別的分享功能



AddToAny


看了一圈,決定改用 AddToAny

其一是因為該插件支援的社群足夠多,也有持續在維護

與 blog 代碼沒甚麼交集,自定義客製方便



踩雷過程


簡單選一下想要的按鈕,產出代碼後,扔進 jsx 內

到此應該就搞定了,簡單 build 看下輸出


hmmm...為什麼會是一片空白呢?



沒有 CSS ?


看了下原始碼,似乎是 css 沒有載入

不過 css 這些內容應該會隨著 js 懶加載一併輸出才對

花了些時間尋找問題,之後發現


原來是被瀏覽器擋住了,會被瀏覽器攔截主要有幾個可能性

  • 混和內容(Mixed Content):  
如果網站是透過 HTTPS 協定提供服務的,而嘗試載入的資源(如 page.js)使用的是 HTTP 鏈接,那麼這種「混合內容」可能會被現代瀏覽器封鎖。 確保所有外部載入的資源都使用 HTTPS 來避免這種問題。
  • 安全策略(CSP):  
瀏覽器可能會因為安全策略(Content Security Policy)而阻止某些腳本的載入。
  • 跨域問題(CORS):  
服務商有可能因為沒有提供適當的跨域策略(Cross-Origin Resource Sharing),導致資源無法載入
  • 廣告攔截器:  
一些廣告攔截器或安全相關的瀏覽器擴充功能可能會阻止諸如 AddToAny 這樣的第三方服務。

由於我們網站跟 AddToAny 都是 https,第一點可以排除  
本站並沒有設置 CSP (目前沒有)  
AddToAny 這類插件沒處理好 CORS 的機率是很低的

簡單排除一下,比較有可能的是被廣告攔截器擋住了


喔喔喔!總算出來了!



廣告攔截器


試了一下分享功能正常,就是按鈕有點多  
可能減少一些..style 之後客製一下...

恩..不過這樣其實還沒有解決阿?

根據統計,全世界有至少四成的人口,常駐開啟廣告攔截器在上網

只是我看的到而已,如果其他人看不到的話就沒意義了 qq

不過攔截的問題其實也好解決,只要讓他不會被攔截就好了嗎!(廢話)

方法有很多,最簡單的是將原本被攔截的檔案納入網域下  
載入原本就是同域名下的資源,通常就能繞過限制了。

<script async src="https://static.addtoany.com/menu/page.js" defer={true}></script>

根據產出的代碼來看,主要是這個檔案需要拉進 blog


整理一下格式,創建一個 addtoany.js 放進去  
以 hexo 來說就是將 js 檔案放在 themes/{theme_name}/source/js 底下

之後回到 addtoany.jsx 修改來源

<script async src="/js/addtoany.js" defer={true}></script>

RUN!


失敗了!


載入失敗的檔案反而變多了!



更多的廣告


看了下失敗的內容,來源都是出自 addtoany.js,也就是剛剛新增的檔案

回頭翻代碼...



看來是原本的 page.js 又引入了其他檔案  
然後其他檔案又被攔截了...

雖然有點亂,但還是好解決的

首先在 source 目錄新增 addtoany 資料夾  
將 addtoany.js 改名回 page.js ,放進 addtoany 資料夾  
原本 addtoany.jsx 的 script 也要修改

<script async src="/addtoany/page.js" defer={true}></script>

之後將三個攔截的檔案拷貝整理後,在 source/addtoany 創建同名檔案

然後..然後...  
然後在 core.js 引用了更多會被攔截的 url...

估計是進行一些第三方 icon 的載入等等...



結語



重新看 core.js 的代碼,進行修改,最終是成功了

但是  
修改已經壓縮過的代碼,過程是麻煩且沒營養的  
處理方法相當於暴力破解,也不排除往後產生其他 ERROR 的可能,故這邊不多贅述———



如果有幸你也在想辦法處理 AddToAny 的問題,又懶得架 cdn

這邊提供整理後的檔案,歡迎參考。


MD5: e4c6ac982c223e6449d1d962be077bfb
SHA1: a9cc39cc5e9a7d0854d63b15a4801829c1718efb

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5921427
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:blog|Hexo|插件|日記|AddToAny

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

喜歡★a33073307 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:最近想把blog的評論系... 後一篇:Github Actio...

追蹤私訊切換新版閱覽

作品資料夾

cckre所有巴友
夕闇-角色介紹網站 近期更新:藤崎 詩織(純愛手札外傳─啟程之詩)  http://www.yuuyami.url.tw/看更多我要大聲說11分前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】