ホーム > ブログ > concrete5 > コンクリのフォーム送信後URLに残るもやっとした#以下を消す方法

コンクリのフォーム送信後URLに残るもやっとした#以下を消す方法

2015.11.14

おはです。銀ねこです。

こちらも忘れないうちにメモ。
コンクリでデフォのフォーム使ってフォーム情報を送信後、URLに#+数字が残ってモヤモヤしたのでしろたん師匠に助けてもらって、Javascriptで削除しました。

フォーム送信後に残る謎の#+数字の正体

コンクリのデフォのフォームはスパム防止のためフォーム送信時にトークンが発行されます。
私にはとても説明する能力がないのでコンクリートファイブジャパンの菱川社長のブログ、こちらを参考に。。。。
困った時はここに行けば大抵の情報があります。

CSRFとは、正規の手順を踏まないリクエストを受け付けてしまう脆弱性です。この場合の正規の手順とは、外部フォームが設置されているページにアクセスして、ブラウザでフォームに内容を入力し、送信ボタンを押すという手順です。不正なリクエストとは、入力画面をスキップして送信内容を直接concrete5に送りつける方法です。これを許してしまうと、機械的にいくらでもフォームを送信し放題になってしまいます。CSRF対策は重要な処理の乗っ取りを防ぐために必要と言われることがあるとおもいますが、ただメールを送信するだけのフォームであっても対策しておかないと、セキュリティ診断を受けた際に迷惑メールの踏み台になる可能性があると指摘されてしまいます。

concrete5の外部フォームの使い方

とてもありがたい処理がされている!

スクリーンショット-2015-11-14-04.05.46.jpg

確かにソースコードをみてみるとフォーム部分には上のようになっていている。

…ですが、私のケースの場合、フォーム送信後にサンクスページなどの別ページに飛ばすというのをやったのですがこのまま使うとURLの末尾にsubmit_form#以下も一緒に送信されるので、SEO上のコンバージョンの測定の際に都合が悪いらしく、送信後のこれを消すために試行錯誤することに…。

結論からいうとjsでフォームのaction部分に細工して解決

phpや.htaccessなどいろいろ試行錯誤し、最後はしろたん師匠に泣きつきました。

手間を考えるとjsでformのaction部分を書き換えるのが一番早いんじゃね?ってことになり…。

一旦、自分でコードを書きうまくいき、ドヤ顔をかましましたが案の定書いたコードのダメ出しをくらい(撃沈)。。。。

結果、以下のように修正。

  • actionの中身データをjsで(jQueryを使ってます)取得
  • split()を使って文字列「&」で区切って配列に置換(この際、配列に置換した時点で&は無くなります)
  • 置換した配列をfor文で回しindexOf()で「method=submit_form」を探し、replace()(正規表現が使えます)で先頭に#がつく文字列があった場合は削除
  • いったん配列にしてバラバラになったデータを「&」付きでくっつける
  • 末尾についてしまった余分な&を削除
  • 整形したデータをactionに渡す
  1. <script>
  2. $(window).load(function () {
  3. var postUrl = $('form').attr('action');
  4. var data = postUrl.split("&");//&で区切って配列に
  5. var newdata = "";
  6.  
  7. for(var i = 0;data.length > i; i++){
  8. if( ! data[i].indexOf('method=submit_form')){//method=submit_formを探す
  9. data[i] = data[i].replace(/\#.*/g, '');//#が先頭にある文字列を探し空にする
  10. }
  11.  
  12. newdata += data[i] + '&';//配列に分割したデータをくっつける
  13. }
  14.  
  15. newdata = newdata.replace(/&$/, '');//余分な&を削除
  16. $('form').attr('action', newdata);//整形したデータをactionに渡す
  17. });
  18. </script>

なんちゃって知識でもできないことはないけど、どういう原理でこのトークンが作られているかとか想定できないとこういうコードには行きつかないのよね。

とても勉強になりました。

悔しいのでおうちに帰って正規表現の勉強をしました。

この記事のタグ