iT邦幫忙

2025 iThome 鐵人賽

DAY 16
0
自我挑戰組

與AI搶奪意識ing系列 第 17

ngrok嵌入被降等http,X-Frame-Options 的deny問題

  • 分享至 

  • xImage
  •  

先說結論,改用cloudflare(Cloudflare Tunnel)+ CSP

移除 X-Frame-Options 設定:
你在 Django settings.py 或 middleware 裡,將 X-Frame-Options 設定移除或設為 None,並註解或移除了 django.middleware.clickjacking.XFrameOptionsMiddleware,讓 Django 不再自動加上 DENY header。

改用 Content-Security-Policy (CSP) 控制嵌入來源:
你新增了自訂 middleware,於 response header 加上

這樣就能精確允許 Blogger、cloudflared 臨時網址等特定來源嵌入你的頁面,而不會被全面拒絕。

同步更新所有 base_url、.env、settings.py:
你將所有產生嵌入碼、API base url 的地方都改成 cloudflared 臨時網址,確保外部嵌入時指向正確且允許的來源。

這樣就能安全又彈性地允許外部網站嵌入你的內容,解決了 X-Frame-Options: DENY 的問題。

講完了deny問題,接著可以說說為什麼要用Cloudflare tunnel,主要是因為ngrok雖然能做到產出暫時對外網址的功能,但他所產出的網址在Google Blogger使用iframe的時候都會自動從https降為http,在這個情況之下也會造成無法正常顯示。

跟GPT互動的過程中一開始其實不是很確定到底是不是Google Blogger的限制,光這點就確認了很久,GPT有時候給的答案還是太多不確定性了。在確定Google Blogger可以使用iframe沒有限制以後,才進一步接著去處理deny跟https降級的問題。

在聚焦https降級的問題以後才得到除了NGROK以外更多的解決方式,進而得到這次的解答啦!

這次的經驗後更了解怎麼問問題了!如果一個大問題裡面有太多個小問題,就要分開一個一個專注的問,終端機的錯誤訊息還有瀏覽器的錯誤訊息也都應該條列式的逐一確認跟處理。要拆解問題才能一一校正修復。


上一篇
嵌入式功能QA SEO 解套方式 JS SDK
下一篇
把功能做成API
系列文
與AI搶奪意識ing21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言