NaraForm Docs
收集回覆

iframe 嵌入 Allowlist

允許指定網站用 iframe 嵌入公開表單

NaraForm 預設不允許公開表單被外部網站用 iframe 嵌入。若要把表單放進文章頁、部落格、文件站或產品頁,需要先在 Workspace 設定允許的來源 origin。

適用情境

  • 在文章頁嵌入回饋表單
  • 在產品頁嵌入需求收集表單
  • 在會員後台嵌入滿意度調查

若只是分享公開連結,不需要設定 iframe allowlist。直接使用 分享表單 的公開連結即可。

設定 Allowlist

只有 Workspace 擁有者可以修改 iframe allowlist。

  1. 進入 Dashboard 的「設定」頁。
  2. 找到「iframe allowlist」區塊。
  3. 輸入允許嵌入表單的網站 origin,例如:
https://articles.example.com
  1. 按「加入」。
  2. 按「儲存」。

儲存後,該 Workspace 內已發布的公開表單會依照這份 allowlist 回傳 Content-Security-Policy: frame-ancestors ...

Origin 格式

Allowlist 只接受明確的 httphttps 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.com

Workspace 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。