2

AWS S3でホストされ、Paperclipgemによって管理されている画像を含むRails3アプリがあります。

ユーザーがjsライブラリを使用してブラウザ内でこれらの画像を編集できるように設定しようとしています(現在はPixasticを使用していますが、Camanを試してみることにします)が、js画像で問題が発生しますS3イメージが別のドメインからのものであるとして拒否するブラウザーからのCSRF保護のため、操作ライブラリーは失敗します。

同じドメインからのものであるように見えるように画像をプロキシする方法、またはこの問題を回避する方法はありますか?

4

1 に答える 1

4

私はちょうどCamanJSでこれを通して働いているパートナーと1日を過ごしました。

あなたがどのようにあなたの見解を構築しているのかを知らずに(そしてPixasticを全く知らずに)私は答えるために最善を尽くします。

crossorigin='anonymous'HTML内の元の画像にリンクしていると仮定して、画像タグに次のように追加します。

<img class='image' crossorigin='anonymous' data-camanheight='450' src=<%= @photo.url%>>

これにより、画像がサイトのURLから取得されないというブラウザの期待が設定されます。

これは最初の画像で機能することがわかりましたが、CamanJSのrevert()関数が画像を再構築すると(キャンバス要素に変換する前に)、ブラウザにクロスであることが問題ないことを知らせるヘッダー情報が省略されます。 -オリジンデータ。そのため、画像を元に戻すたびに、CORSの問題が再び発生します。Pixasticのドキュメントを簡単に調べましたが、同様の問題が発生するかどうかについてアドバイスすることはできません。

注:超流動的なエクスペリエンスが私たちの優先事項であり、プロキシを設定したくなかったため、回避策は、Javascript変数に画像タグのクローンを保持し、独自のメソッドを記述してキャンバス、画像タグを再複製し、複製されたタグの1つをDOMにプッシュしてから、それを新しいキャンバス要素に変換し、古い要素を削除します。CamanJS固有の動作に遭遇したため、少し「ハッキー」になりました。

プロジェクトの私のパートナーは、ヘッダー情報を保持するプルリクエストをCamanJSに送信したため、これはすぐに解決される可能性があり、CamanJSはクロスオリジンリソースシェアリングのより優れたソリューションになります。

お役に立てれば。

于 2012-12-01T08:34:05.847 に答える