tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Force.com Canvasの設定とX-Frame-Options

以前、Heroku Buttonで取得したサンプルアプリを使ってForce.com Canvasを試してみたことがあったのですが、今回はHerokuとRailsで自作したアプリを使ってForce.com Canvasによる連携を試してみました。


Force.com Canvasで使用するには接続アプリケーションの設定が必要です。
f:id:tyoshikawa1106:20150903222039p:plain


また、『apex:canvasApp』タグを使うことでVisualforceページ内に表示することができます
f:id:tyoshikawa1106:20150903222215p:plain


この辺りの設定についてはザックリ確認済みだったのでサクッと表示して確認完了。 ・・・という予定だったのですが、実際に試してみたところ次のようなエラーが発生してしまいました。

frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.


Salesforce側の設定なのかアプリ側の問題なのかもわからず悩んでいたのですが、Twitterで解決方法を教えてもらいました。

原因と対応方法
  • RailsのデフォルトはSAMEORIGINになっている。
  • X-Frame-Optionsはdefault_headersで設定するか、コントローラのafter_actionで設定する。
  • ApplicationControllerにprotect_from_forgeryがあるので、exceptするかwith: null_sessionにしないとCSRF扱いでエラーになるかも。
参考サイト


上の参考サイトのやり方を元にX-Frame-Optionsの設定をしてみたところ、エラーが無くなりHerokuアプリをCanvas上に表示できるようになりました。
f:id:tyoshikawa1106:20150903223804p:plain


ちなみに今回の修正箇所はこんな感じです。
f:id:tyoshikawa1106:20150903224307p:plain


ということでHerokuとRailsで作ったアプリをForce.com Canvasで表示する際に"X-Frame-Options"とエラーメッセージが出た時は上記方法で対応できました。


protect_from_forgeryの方ですが設定しなくてもCSRF関係のエラーはひとまず出て無さそうだったのですが、どういう仕組なのかは確認してみようと検索してみたところ参考になるブログが見つかりました。


実際に動かしてみて他にも確認しないといけないことが見つかりましたが、ひとまず基本的な動かし方を確認できたので良かったです。

追記

with: null_sessionを宣言しなくてもエラーにならなかった理由も教えてもらいました。canvasの設定でアクセス方法をOAuth Webflowにしている場合はCSRF扱いにならないそうです。連携周りよくわかっていなかった為たまたまOAuthの方でやっていたのですが、Canvas連携するときは、Signed Requestを利用すると簡単だったみたいです。


Signed Requestについての詳細はこちらです。



Signed Requestについての詳細の日本語版がこちらです。


Signed Requestに使った接続方法についても今度確認してみようと思います。