Webフォームをiframeで利用するときの注意点
【本件はサポート対象外です!!】
サスケのWebフォームでは
https://secure-link.jp/wf/?c=wf12345678
のような独自のURLを持っています。そしてiframeで既存ページや自社内のHP内に埋め込むことでWebフォームのURLではなく、自社のURLとして見せることが可能です。しかし、iframeでWebフォームを埋め込むと一部の環境では正常に動作しなくなってしまう現象があるので、本日はこちらの解説をいたします。
※iframeでWebフォームを埋め込むやり方についてはサポートしかねますのでご了承くださいませ。iframeで埋め込むとどうなるのか?
一部の環境(セキュリティが高いiPhoneや一部ブラウザ)では、以下のようなエラーが出てしまい、フォームの入力を完了させることができません。
なぜエラーが出てしまうのか?
※これはBOTや不正行為などを防ぐ為のセキュリティ対策として利用している仕様です本来、このCookie自体は無害で問題のない機能になっておりますが、近年はプライバシー保護の観点から『第三者によるCookie(サードパーティクッキー)』について厳しくなっております。そのため、セキュリティの設定が高いブラウザやスマートフォンではこのCookieをブロックしてしまうケースがここ最近増えてきております。
そしてサードパーティクッキーがブロックされてしまうが故にWebフォーム側でエラーが発生してしまう……といった現象になっております。
なぜサードパーティクッキーはブロックされてしまうのか?
Webフォーム本来のURLである
https://secure-link.jp/wf/?c=wf12345678
にアクセスした場合、Webフォームから発行されたCookieがWebフォームのURL内で利用される形になりますので『第一者によるCookie(ファーストパーティクッキー)』となり、こちらはどのブラウザ・スマートフォンでも制限が掛っておりません。
しかし、Webフォーム本来と異なるURLの中にiframeという形でWebフォームを埋め込んだ場合、Webフォームで発行されたCookieが別のURL内で利用される形となりますので『第三者によるCookie(サードパーティクッキー)』という扱いになり、プライバシーやセキュリティ対策が厳しい環境だと無効化、つまりWebフォームで発行されたCookieが利用できない状態になってしまいます。
サードパーティクッキーをブロックしているのは「iPhone」や「Chrome」、「Firefox」など大手のスマートフォン・ブラウザが皆行っている、もしくは行う予定があるようです。
- アップル、Safari 13.1であらゆる第三者Cookieをブロックへ。クロスサイトトラッキング防止徹底 - Engadget 日本版
https://japanese.engadget.com/jp-2020-03-24-safari-13-1-cookie.html - Safari、サードパーティクッキーを完全ブロック、Chromeより2年先行 | マイナビニュース
https://news.mynavi.jp/article/20200325-1003521/ - Firefox、トラッキング防止機能が2.0に、リダイレクトトラッキングからも保護 | マイナビニュース
https://news.mynavi.jp/article/20200805-1200460/ - Chromeもサードパーティクッキーをブロック予定!Web担当者はどうすればいいんですか? マーテクにくわしい柳井隆道さんに聞いてきた | Webのコト、教えてホシイの! | Web担当者Forum
https://webtan.impress.co.jp/e/2020/06/12/35858
なお、『第一者によるCookie(ファーストパーティクッキー)』についてはどの企業も無効化にするといった話は一切出ていないため、本来のURLにアクセスし登録することは、おそらく今後も問題なく行える想定ではおります。
どうしたらよいか?
今回の現象の対策としては
- iPhoneやChromeなどサードパーティクッキーに厳しいブラウザを使用しないでもらう
- サードパーティクッキーを無効化する機能をOFFにしてもらう(サードパーティクッキーを使える状態にしてもらう)
- ファーストパーティクッキーであれば今後も利用できるので、Webフォーム本来のURLにアクセスしてもらう
といった対応が挙げられるかと思います。
しかしながら上記のように、サードパーティクッキーについては今後もどんどん厳しくなっていくことが予想されますので、3つめの対策がお客様にも迷惑を掛けずに実行できる現実的な内容かと考えられます。
また、iframeを使いつつ「エラーになった方はこちらへ」というWebフォーム本来のURLへ誘導するリンクを設ける方法も1つだと思います(3つめの対策と同義)。
よろしくお願いいたします。