這幾天在看以前舊的文章的時候突然出現下面這張圖:
真是嚇死我了,想說以前不是正常的嗎?為什麼突然會被 carbon 拒絕連線呢?因此還特別看了一下 carbon 網站是不是正常,結果看一下很正常,那只能開始來 debug 了,下面就來教大家如果遇到這種情況應該怎麼 debug 拉 ~
第一步先打開開發者工具看看
打開馬上看到兩個錯誤,這邊寫說 “in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.”,意思是說僅允許同源請求。什麼是同源請求呢?就是必須與來源頁面的「協定」、「網域」、「連接埠」都相同,才能進行。
而我們的網址是 https://blog.clarence.tw,iframe 的網址是 https://carbon.now.sh,協定相同、網域不同、連接埠相同,所以會出現錯誤。
架設 carbon
那這樣怎麼辦呢?站長就想說那就自己架吧 XD ~
官方文件沒有寫怎麼架,所以弄超久 QQ …
不過沒關係站長就來教大家怎麼架吧 ~
首先先把整個專案 clone 下來吧 https://github.com/dawnlabs/carbon,之後就使用下面的指令就可以把服務啟動了,預設 port 是 3000,可以直接用 http://localhost:3000 開啟服務
git clone https://github.com/dawnlabs/carbon | |
cd carbon | |
npm install /* install 安裝 */ | |
npm run build /* build 編譯 */ | |
npm start /* start 開啟服務 */ |
如果需要改變開啟的 port 就修改 package.json 的 “start”: “next start -p 8080″,如下:
{ | |
"name": "carbon", | |
"version": "3.9.35", | |
"main": "index.js", | |
"license": "MIT", | |
"scripts": { | |
"dev": "next", | |
"build": "next build", | |
"start": "next start -p 8080", | |
"export": "next export", | |
"test": "jest", | |
"test:e2e": "npm run cy:run --", | |
"deploy": "now", | |
"prettier": "prettier --config .prettierrc --write {.,components,lib,pages}/*.js {components,lib,pages,packages}/**/*.js", | |
"lint": "eslint .", | |
"contrib:add": "all-contributors add", | |
"contrib:build": "all-contributors generate", | |
"cy:run": "cypress run", | |
"cy:open": "cypress open" | |
} | |
} |
原始 Carbon 是用 now 架設的所以需要來看看它的設定檔 https://github.com/dawnlabs/carbon/blob/master/now.json,而文件在 https://zeit.co/docs/v2/deployments/routes/,系統一定要放在 NGINX 之類的 Proxy 後面,因為需要用到 https://localhost/embed/,沒設定就會出現下圖:
那這邊就來跟大家說 Nginx 要怎麼設定,其實也只要複製貼上就好 XD ~ 站長都幫大家寫好了,應該是沒有寫錯拉 ~ 如果有錯可以在下方留言跟站長說。
upstream carbon-backend { | |
server 127.0.0.1:8080; | |
keepalive 64; | |
} | |
server { | |
server_name carbon.clarence.tw; | |
location / { | |
proxy_set_header X-Forwarded-Host $host; | |
proxy_set_header X-Forwarded-Server $host; | |
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; | |
proxy_pass http://carbon-backend; | |
proxy_http_version 1.1; | |
proxy_pass_request_headers on; | |
proxy_set_header Connection "keep-alive"; | |
proxy_store off; | |
} | |
rewrite ^/embed(.*) /embed; | |
rewrite ^/service-worker.js$ /_next/static/service-worker.js; | |
location /_next/static/service-worker.js { | |
add_header 'Service-Worker-Allowed' '/'; | |
} | |
location ^/static/(.*) { | |
root /static/; | |
} | |
add_header X-Frame-Options "ALLOW-FROM blog.clarence.tw"; | |
add_header Content-Security-Policy "frame-ancestors blog.clarence.tw"; | |
} |
這邊要注意的是 server_name 記得改成自己的 Domain,X-Frame-Options 與Content-Security-Policy 改成需要 iframe 的網站,基本上就是這樣拉 ~
至於 X-Frame-Options 與 Content-Security-Policy 代表什麼意思,有機會再發文跟大家說 ~
參考資料:
- https://github.com/dawnlabs/carbon
- https://zeit.co/docs/v2/deployments/routes/
- https://devco.re/blog/2014/04/08/security-issues-of-http-headers-2-content-security-policy/
《AWS CDK 完全學習手冊:打造雲端基礎架構程式碼 IaC》
第 12 屆 iT 邦幫忙鐵人賽 DevOps 組冠的《用 CDK 定 義 AWS 架構》
第 11 屆 iT 邦幫忙鐵人賽《LINE bot 好好玩 30 天玩轉 LINE API》
一個熱愛分享的雲端工程師!