收集回覆
iframe 嵌入 Allowlist
允許指定網站用 iframe 嵌入公開表單
NaraForm 預設不允許公開表單被外部網站用 iframe 嵌入。若要把表單放進文章頁、部落格、文件站或產品頁,需要先在 Workspace 設定允許的來源 origin。
適用情境
- 在文章頁嵌入回饋表單
- 在產品頁嵌入需求收集表單
- 在會員後台嵌入滿意度調查
若只是分享公開連結,不需要設定 iframe allowlist。直接使用 分享表單 的公開連結即可。
設定 Allowlist
只有 Workspace 擁有者可以修改 iframe allowlist。
- 進入 Dashboard 的「設定」頁。
- 找到「iframe allowlist」區塊。
- 輸入允許嵌入表單的網站 origin,例如:
https://articles.example.com- 按「加入」。
- 按「儲存」。
儲存後,該 Workspace 內已發布的公開表單會依照這份 allowlist 回傳 Content-Security-Policy: frame-ancestors ...。
Origin 格式
Allowlist 只接受明確的 http 或 https origin。
| 輸入 | 結果 |
|---|---|
https://articles.example.com | 允許 |
https://articles.example.com/ | 允許,會正規化為 https://articles.example.com |
http://localhost:3000 | 允許,適合本機測試 |
https://articles.example.com/path | 拒絕 |
https://articles.example.com?x=1 | 拒絕 |
*.example.com | 拒絕 |
https://user:pass@example.com | 拒絕 |
Allowlist 不支援 wildcard、路徑、query、fragment 或帳密。每筆設定都必須是完整 origin。
嵌入範例
假設表單公開連結是:
https://naraform.example.com/s/article-feedback文章頁所在網站的 origin 是:
https://articles.example.comWorkspace owner 需先把 https://articles.example.com 加入 iframe allowlist。之後文章頁可以嵌入:
<iframe
src="https://naraform.example.com/s/article-feedback"
title="文章回饋表單"
width="100%"
height="720"
style="border: 0"
></iframe>安全預設
沒有設定 allowlist 時,公開表單會使用 deny-by-default 的 frame ancestry policy,外部網站無法 iframe 嵌入。
設定 allowlist 後,只有同站與明確列出的 origins 可以嵌入該 Workspace 的公開表單。Workspace A 的 allowlist 不會影響 Workspace B。