Carbon IFrame 出現 carbon.now.sh 拒絕連線原因分析與 Carbon 架設教學

Posted on by Clarence

這幾天在看以前舊的文章的時候突然出現下面這張圖：

真是嚇死我了，想說以前不是正常的嗎？為什麼突然會被 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 開啟服務 */
view raw carbon.sh hosted with ❤ by GitHub

如果需要改變開啟的 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"
}
}
view raw package.json hosted with ❤ by GitHub

原始 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";
}
view raw nginx.conf hosted with ❤ by GitHub

這邊要注意的是 server_name 記得改成自己的 Domain，X-Frame-Options 與Content-Security-Policy 改成需要 iframe 的網站，基本上就是這樣拉 ~
至於 X-Frame-Options 與 Content-Security-Policy 代表什麼意思，有機會再發文跟大家說 ~

參考資料：

No comments yet
Carbon debug IFrame