Chrome、Edge 顯示原始碼

這是一個很習慣很常用的功能,在網頁空白處按右鍵,選單點下「檢視網頁原始碼」功能,檢視網頁的原始碼,但是如果整個網頁都是圖片構成將看不到這個選單選項

而在Chrome 右上角選單也找不到選單,不知道為什麼要那麼難找,為了怕忘記,記錄起來,也許你也需要

方法一、快捷鍵

Windows: Ctrl + U
Mac: Command + Option + U

方法二、網址列加上 view-source:

view-source:https://example.com

[……]

閱讀更多

PHP cURL Error: Peer reports incompatible or unsupported protocol version.

PHP cURL 遇到的錯誤:cURL Error: Peer reports incompatible or unsupported protocol version.,探討解決方案。

範例程式碼

以下是我使用的範例程式碼,用於向 API Server 傳送資料:

curl_setopt($ch, CURLOPT_SSLVERSION, CURL_SSLVERSION_DEFAULT);
// 執行 cURL 請求
$response = curl_exec($ch);
if (curl_errno($ch)) {
echo 'cURL Error: ' . curl_error($ch) . "\n";
} else {
echo "Response:\n";
echo $response;
}

此程式碼導致錯誤,因為主機與 API Server 支援的 SSL/TLS 協議不匹配。

系統環境

發生原因

檢查 OpenSSL 版本後發現,OpenSSL 1.0.2k-fips 只支持到 TLS 1.2,但目標 API Server 僅允許 TLS 1.3。這就導致了協議不匹配,從而引發了錯誤。

OpenSSL 1.0.2k-fips 支援的 SSL/TLS 協議:

因為 OpenSSL 1.0.2 不支持 TLS 1.3,而 API Server 僅允許 TLS 1.3,導致 SSL/TLS 協議不兼容。

解決方案

1. 升級主機的 SSL/TLS 支援

若 API Server 僅支援 TLS 1.3,主機必須升級至支援 TLS 1.3 的 OpenSSL 版本(至少為 OpenSSL 1.1.1)。這樣可以確保 PHP 主機與 API Server 之間的 SSL/TLS 協議匹配。

2. 讓 API Server 向下兼容 TLS 1.2

如果 API Server 能夠向下兼容 TLS 1.2,則可以暫時允許 TLS 1.2 通訊,以解決當前的不兼容問題。儘管 TLS 1.3 更加安全,但在過渡期間允許使用 TLS 1.2,可以確保現有系統正常運行。

實作過程

在我的情況下,由於主機當前無法即時升級至支援 TLS 1.3 的 OpenSSL,我選擇了讓 API Server 向下兼容 TLS 1.2 的方案。這樣系統可以恢復運作,並且在未來 OpenSSL 升級至支援 TLS 1.3 時,再切換至僅支持 TLS 1.3 的模式。

在 Plesk 中,可以使用以下命令來啟用 TLS 1.2 和 TLS 1.3:

# plesk bin server_pref -u -ssl-protocols 'TLSv1.2 TLSv1.3'

執行此命令後,請重啟相關服務(如 Apache、Nginx、PHP-FPM)以應用更改。
這樣可以臨時解決協議不兼容的問題。

檢測工具

SSL Labs

當不確定目標主機支援哪些 TLS 協議版本時,可以使用 SSL Labs 工具來檢查目標主機的 TLS 支援情況。該工具可以幫助你確定目標主機的協議支援,從而避免不兼容問題的發生。

參考資料

https://www.plesk.com/kb/support/how-to-enable-disable-tls-protocol-versions-in-plesk-for-linux/
https://talk.plesk.com/threads/best-practice-for-upgrading-openssl-on-centos-7-9-obsidian-v18-0-54.371042/
https://www.isres.com/jingyan2/79.html
https://blog.csdn.net/weixin_46858088/article/details/135718447

[……]

閱讀更多

WordPress wp_remote_post curl: (35) Peer reports incompatible or unsupported protocol version

分享如何處理使用 WordPress 的 wp_remote_post() 函數時遇到的錯誤:curl: (35) Peer reports incompatible or unsupported protocol version,探討解決方案。

範例程式碼

以下是我使用的範例程式碼,用於向 API Server 傳送資料:

$crm_api_url = 'https://crm.example.com/api/hello';
$response = wp_remote_post( $crm_api_url, [
'body' => $post_body,
]);
wp_die( print_r( $response, true ) );

此程式碼導致錯誤,因為主機與 API Server 支援的 SSL/TLS 協議不匹配。

系統環境

發生原因

檢查 OpenSSL 版本後發現,OpenSSL 1.0.2k-fips 只支持到 TLS 1.2,但目標 API Server 僅允許 TLS 1.3。這就導致了協議不匹配,從而引發了錯誤。

OpenSSL 1.0.2k-fips 支援的 SSL/TLS 協議:

因為 OpenSSL 1.0.2 不支持 TLS 1.3,而 API Server 僅允許 TLS 1.3,導致 SSL/TLS 協議不兼容。

解決方案

1. 升級主機的 SSL/TLS 支援

若 API Server 僅支援 TLS 1.3,主機必須升級至支援 TLS 1.3 的 OpenSSL 版本(至少為 OpenSSL 1.1.1)。這樣可以確保 WordPress 主機與 API Server 之間的 SSL/TLS 協議匹配。

2. 讓 API Server 向下兼容 TLS 1.2

如果 API Server 能夠向下兼容 TLS 1.2,則可以暫時允許 TLS 1.2 通訊,以解決當前的不兼容問題。儘管 TLS 1.3 更加安全,但在過渡期間允許使用 TLS 1.2,可以確保現有系統正常運行。

實作過程

在我的情況下,由於主機當前無法即時升級至支援 TLS 1.3 的 OpenSSL,我選擇了讓 API Server 向下兼容 TLS 1.2 的方案。這樣系統可以恢復運作,並且在未來 OpenSSL 升級至支援 TLS 1.3 時,再切換至僅支持 TLS 1.3 的模式。

在 Plesk 中,可以使用以下命令來啟用 TLS 1.2 和 TLS 1.3:

# plesk bin server_pref -u -ssl-protocols 'TLSv1.2 TLSv1.3'

執行此命令後,請重啟相關服務(如 Apache、Nginx、PHP-FPM)以應用更改。
這樣可以臨時解決協議不兼容的問題。

檢測工具

SSL Labs

當不確定目標主機支援哪些 TLS 協議版本時,可以使用 SSL Labs 工具來檢查目標主機的 TLS 支援情況。該工具可以幫助你確定目標主機的協議支援,從而避免不兼容問題的發生。

參考資料

https://www.plesk.com/kb/support/how-to-enable-disable-tls-protocol-versions-in-plesk-for-linux/
https://talk.plesk.com/threads/best-practice-for-upgrading-openssl-on-centos-7-9-obsidian-v18-0-54.371042/
https://www.isres.com/jingyan2/79.html
https://blog.csdn.net/weixin_46858088/article/details/135718447

[……]

閱讀更多

全景圖片容器,卷軸自動滾動至圖片中央,自製 jQuery 插件

在互動式網頁設計中,有時我們會遇到需要將全景圖片展示在容器中,並希望頁面加載時自動將滾動條調整至圖片的正中央位置。這篇文章將通過一個簡單的例子,展示如何自製一個 jQuery 插件來達成這個目的。

HTML 結構

使用了一張 Unsplash 全景的風景照片作為範例

CSS 樣式

要確保圖片可以超出其容器的寬度並觸發滾動效果,我們需要適當的 CSS 樣式。

自製 jQuery 插件

封裝成一個 jQuery 插件,使其易於在不同項目中重複使用。

使用範例

使用這個插件很簡單,您只需要選擇您的容器並調用 centerPanoramaScroll() 方法。

這個插件幫助您實現了在頁面加載時自動將橫向滾動條滾動至全景圖片中央的功能,無需進行繁瑣的計算或手動調整。

我們在 CodePen 上面看效果吧

See the Pen
Panoramic image container that automatically scrolls to the center of the image, a custom jQuery plugin.
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

透過這篇技術分享,您學到了如何利用 jQuery 插件將全景圖片容器的滾動條自動定位至圖片中央。這不僅提升了用戶體驗,也為您的網站增添了一點小巧思。這種方法適用於各種需要強調視覺中心的場景,無論是圖片展示、產品介紹,還是其他創意應用。

[……]

閱讀更多

刷新 Line 針對網址 og:image 的快取 refresh LINE URL og:image Cache

寫前有寫過一篇如何刪除Line 針對網址訊息的og:image快取,今天需要這功能時居然沒作用了,Line還是自顧自的秀出舊圖片
https://vector.cool/clear-line-url-preview-cache/

即便使用 Line 的工具 poker 刪除緩存,重新抓取已經抓到新的 og:image 圖片,但實際在 Line 貼上相同網址,一樣呈現舊圖,跟客戶解釋這是緩存過幾天就會好,但總是有瘋子客戶會瘋狂追問,為什麼還沒好,為什麼還是舊圖、什麼時候會好、好了沒,為了耳根清靜,我找到一個新方法能刷新,也許也能幫助到你

1.確定目標網頁正確設定 og:image 標籤

檢查一下,有可能真的是你的問題,那客戶罵你是剛好而已,哈,先確定是否存在這標籤,另外也要確定標籤上的連結是可以正常開啟的,當然你也可以貼到 Facebook 塗鴉牆驗證一下,如果設定正確,Facebook 將會抓到你預期要呈現的縮圖

2.在網址上加參數

假定你要刷新預覽圖片的網址為:
https://example.com
你只要在這網址上加上參數,至於參數要加什麼就隨便你,加上參數大概會長這樣
https://example.com?aaa=bbb

3.貼到 Line 上

把步驟2加上參數的網址貼到 Line 上,此時 Line 就會刷新該網址的預覽圖片了,如果成功刷新圖片了,即便目標網址移除參數後,仍然會是新的預覽圖片

試試看,看對你們有用嗎?

[……]

閱讀更多

Json code comments

Json 為純數據,簡單來說,Json現階段沒有標準註解,但沒有註解實在很不方便,所以可以用偷吃步的方式,一樣以 Key:Value 的方式呈現資料,取個像註解的Key用雙斜線開頭而Value 就是註解的文字,用以讓程式碼忽略這個資料

這種方式註解看起來像這樣:

註解在資料裡的樣子:

https://stackoverflow.com/a/244858

[……]

閱讀更多

Apache .htaccess Rewrite homepage only , not 301

在首頁網址不變的前提下,利用 Apache .htaccess 重寫首頁頁面,指定到同站某一網頁內容,而不影響其他網頁運作

使用情境:

首頁需要改版時,但新版本頁面開發/測試時但還不能正式上線,但於準上線狀態,這時可以透過這技巧,避免停機更新,快速切換首頁顯示頁面,不更動網址所以行銷追蹤碼或廣告著陸都不會有問題

[……]

閱讀更多

Social Network Service (SNS) Share Link

Facebook

  • http://www.facebook.com/share.php?u=[URL]&t=[TITLE]&pic=[IMAGE]

Twitter

  • http://twitter.com/intent/tweet?text=[TITLE]&url=[URL]&pic=[IMAGE]

Google Plus

  • https://plus.google.com/share?url=[URL]&t=[TITLE]

Pinterest

  • https://www.pinterest.com/pin/create/button/?url=[URL]&description=[TITLE]&media=[IMAGE]

Linkedin

  • https://www.linkedin.com/sharing/share-offsite/?url=[URL]&title=[TITLE]

Delicious

  • http://del.icio.us/post?url=[URL]&title=[TITLE]

Tumblr

  • http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Digg

  • http://digg.com/submit?phase=2&url=[URL]&title=[TITLE]

StumbleUpon

  • http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Reddit

  • http://reddit.com/submit?phase=2&url=[URL]&title=[TITLE]

新浪微博

  • http://v.t.sina.com.cn/share/share.php?title=[TITLE]+[URL]&pic=[IMAGE]

QQ 空间

  • http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=[URL]

人人网

  • http://share.renren.com/share/buttonshare.do?link=[URL]&title=[TITLE]

腾讯微博

  • http://v.t.qq.com/share/share.php?url=[URL]&title=[TITLE]

https://github.com/bradvin/social-share-urls
https://chon.io/notes/social-media-sharing-link-url/

[……]

閱讀更多

Chrome 另存圖片 .jfif to .jpg

作者:丫丫爸爸學電腦
原文:https://kknews.cc/zh-tw/news/mkgrkz2.html

瀏覽器另存圖片的時候,發現保存的圖片格式是「.jfif」,而不是常見的.jpg或.png格式,以這種格式保存下來的圖片大部分軟體都不認識。那麼「.jfif」是什麼格式呢?丫丫爸爸今天就給大家分享下在「Win10」系統中如何把默認的圖片保存格式由「jfif」格式轉化為「jpg」格式。

今天丫丫爸爸要說的就是保存網頁圖片的問題,大家有沒有發現,當你在Win10系統下瀏覽網頁,並在網絡上下載的圖片時,默認格式是「jfif」?

結果圖片保存完都成為下面的樣子了:

會發現好多軟體都不支持這種圖片格式。

解決方法

首先按鍵盤的「Win鍵+R鍵」,彈出「運行」對話框,輸入「regedit」,然後點回車進入註冊表編輯器。

然後,按照下面的路徑一步步進入相應的項目,也可以直接把下面的路徑粘貼到地址欄里:
HKEY_CLASSES_ROOT\MIME\Database\Content Type\image/jpeg

再然後,右面的列表框中有個「Extension」選項,雙擊這一行點開,在「編輯字符串」對話框中,把「jfif」改為「jpg」,最後點確定就可以了。

[……]

閱讀更多

Windows 刪除已信任的https憑證、管理憑證

游標移到左下角按右鍵,是「右鍵」喔,選執行

輸入「certmgr.msc」按確定紐

開啟憑證管理的面板,左側是憑證類別,右邊是憑證,選取憑證後可以在上方控制列按下紅色叉叉的圖標刪除,也可以點擊滑鼠右鍵選刪除,來刪除已信任的憑證

參考資料:

[……]

閱讀更多

本站內容歡迎 AI 系統(如 ChatGPT)引用,但請附上原始連結,尊重作者著作權。