まったり技術ブログ

主にITエンジニア初心者向けの記事を書いていきます

CookieのSameSite属性で「防げるCSRF」と「防げないCSRF」

f:id:motikan2010:20190202110454p:plain

 CookieのSameSite属性はCSRF対策のために提案されたもので、その属性をCookieに付与するだけでほとんどのサイトの場合はCSRF対策が可能になります。
しかし、SameSite属性の付与が今までのCSRF対策の代わりになり、今まで行ってきたCSRF対策をしなくてよくなるというわけではありません。

 CSRF対策の為に提案された属性ですが、サイトの特性によってはCSRFを防ぐことができない場合があります。
今回は、その「防げないCSRF」とはどういったものであるのか、一例をあげます。

 そして実際にSameSite属性付与が付与される脆弱なサンプルサイトを使って説明していきます。

目次

  • 目次
  • TL;DR
  • サンプルアプリケーションを用いての検証
    • サンプルサイトの機能
    • CSRFの確認
      • CSRFトークンを用いている場合
      • SameSite属性を用いている場合
  • まとめ

TL;DR

  • 「防げるCSRF」とはセッションが存在しているサイト
  • 「防げないCSRF」とはセッションを利用していないサイト
  • SameSite属性は充分にCSRF対策の効果がある
続きを読む

LaravelのセッションCookieにSameSite属性を付与

 Cookieの属性に「Domain」「path」「Max-Age」「Expires」「Secure」「HttpOnly」があるが、 『SameSite』というのも存在していることを知っていたか!? 私は知らんかった...。
 2016年から存在しており現在では主要なブラウザではサポートされているらしい。

そんな認知度が低そうな属性をLaravelで設定できるのかを確認してみる。

TL;DR

  • Laravel 5.5.0 からサポート
  • config/session.php でSameSite属性の値(Strict / Lax)の設定可能

目次

  • TL;DR
  • 目次
  • 検証環境
  • SameSite属性とは
  • SameSite属性が付与されるように設定
    • 設定変更
      • 設定前に発行されるCookie情報
      • 対応Laravelバージョンについて
      • 設定ファイルの編集
    • 確認
      • 設定後に発行されるCookie情報
  • まとめ
  • 参考
続きを読む

【開発日誌】Konva.Transformerのスタイル変更

f:id:motikan2010:20190127165714p:plain

TL;DR

・「Konva.Transformer」コンストラクタの引数を指定することでデザインを変更可能

背景

 先日開発したWebアプリケーションでは下画像を見たら分かるようにアンカーをドラッグすることによって画像のサイズ・角度を変えられるようになっています。
↓そのWebアプリケーション
『挑戦者が現れました』メーカー

 これはCanvasのライブラリである「Konva」を利用して実現しています。 f:id:motikan2010:20190127093257g:plain

問題

 このライブラリを用いることによって簡単に画像の変形ができるようになったが、スマホで操作した場合にアンカー(ドラッグ対象の正方形)が小さく変形が難しいという問題がありました。
f:id:motikan2010:20190127162336p:plain:w300
 Konva.Transformerについて調べてみるとプロパティを追加するだけで、アンカーサイズや枠色といったスタイルを変えられることが分かりました。

デモページ

Style Konva Transformer | Konva - JavaScript 2d canvas library

対応

変更前
var tr = new Konva.Transformer();
変更後

 引数に値を設定することでアンカーサイズや枠のデザインを変更しています。
設定値には今回使用したもの以外にもたくさんあるようです。
Konva Class: Transformer

var tr = new Konva.Transformer({
        anchorStroke: '#FFBF00', // アンカー枠の色
        anchorFill: '#F2F2F2', // アンカー塗りつぶしの色
        anchorSize: 20, // アンカーのサイズ
        borderStroke: '#F7BE81', // 枠の色
        borderDash: [3, 3], // 枠のデザイン
    });

結果

 左が対応前・右が対応後の画像です。アンカーのサイズを大きくすることでスマホ上での操作も簡単に行えるようになりました。
対応前画像 対応後画像

RedshiftのスナップショットをAWS CLIで取得

やりたかったこと

Redshiftで3世代分を残すようなスナップショットの取得方法がやりたかったので、その備忘録。
Bashで実行しています。

実現方法

スナップショットを取得

 "aws redshift create-cluster-snapshot"コマンドを使用することで、Redshiftのスナップショットを取得することが可能です。

aws redshift create-cluster-snapshot --region "ap-northeast-1" \
--cluster-identifier "sample-cluster" --snapshot-identifier "sample-cluster-2018-12-20-00-00-00"

スナップショットの削除

"aws redshift describe-cluster-snapshots"コマンドを使用することで、スナップショットの一覧を取得することができます。
下記の例では、取得した一覧で最古のスナップショットを"aws redshift delete-cluster-snapshot"コマンドで削除しています。

# 指定したクラスターの最古のスナップショットIDを取得する
OLDEST_SNAPSHOT_ID=$(aws redshift describe-cluster-snapshots --region "ap-northeast-1" --cluster-identifier "sample-cluster" --snapshot-type "manual" \
--query "sort_by(Snapshots[*].{SnapshotIdentifier:SnapshotIdentifier, SnapshotCreateTime:SnapshotCreateTime}, &SnapshotCreateTime)[0].SnapshotIdentifier" --output text)

# 取得したスナップショットIDを指定して、スナップショットを削除
aws redshift delete-cluster-snapshot --region "ap-northeast-1" --snapshot-identifier "${OLDEST_SNAPSHOT_ID}"

取得と削除をまとめる

 最終的には下記のようなシェルになりました。スナップショットを取得し、その後に削除するような処理です。
クラスターに紐づくスナップショットが既に3つある場合には、3世代分を残しておくような取得方法になります。

#!/bin/bash

TIMESTAMP=`date '+%Y-%m-%d-%H-%M-%S'`
REGION="ap-northeast-1"
CLUSTER_NAME="sample-cluster"

# スナップショットを取得
aws redshift create-cluster-snapshot --region "${REGION}" --cluster-identifier "${CLUSTER_NAME}" --snapshot-identifier "${CLUSTER_NAME}-${TIMESTAMP}"

# 最古のスナップショットを削除
OLDEST_SNAPSHOT_ID=$(aws redshift describe-cluster-snapshots --region "ap-northeast-1" --cluster-identifier "${CLUSTER_NAME}" --snapshot-type "manual" \
--query "sort_by(Snapshots[*].{SnapshotIdentifier:SnapshotIdentifier, SnapshotCreateTime:SnapshotCreateTime}, &SnapshotCreateTime)[0].SnapshotIdentifier" --output text)
aws redshift delete-cluster-snapshot --region "${REGION}" --snapshot-identifier "${OLDEST_SNAPSHOT_ID}"

参考

redshift — AWS CLI 1.16.79 Command Reference

TLS1.2のみ許可しているWebDAVサーバをマウントできない

 最近、セキュリティ強化の為にTLS1.1以下の接続を不可にするようなサービスが増えてきている。
 勝手にTLS1.2で接続されるだろうとWevDAVクライアントを放置していたが、接続できないという事象が発生した。

検証用WebDAVサーバ

GitHub - motikan2010/WebDAV-Apache-Docker at 20181123

認証情報  :webdav/pass123
ディレクトリ:/wevdav

エラー発生

 TLS1.2のみを許可しているWebDAVサーバをマウントしようとしたら以下のエラーが発生した。

$ sudo mount -t davfs https://127.0.0.1/webdav /media/127.0.0.1
/sbin/mount.davfs: Mounting failed.
SSL handshake failed: SSL alert received: Error in protocol version

原因

 gnutlsパッケージが古いらしい。

GnuTLS - Wikipedia

現在のバージョン確認
$ sudo yum list installed | grep gnutls
gnutls.x86_64                        2.8.5-4.el6_2.2               installed

解決策

 gnutlsパッケージをアップデートすればTLS1.2に対応される。

$ sudo yum -y update gnutls
アップデート後のバージョン
$ sudo yum list installed | grep gnutls
gnutls.x86_64                        2.12.23-21.18.amzn1           @amzn-main
動作確認

検証として利用しているWevDAVサーバの証明書は適当なものを使っているので、警告が出ているが問題なくマウントができていることが確認できる。

$ sudo mount -t davfs https://127.0.0.1/webdav /media/127.0.0.1
/sbin/mount.davfs: the server certificate does not match the server name
/sbin/mount.davfs: the server certificate is not trusted
  issuer:      XX, XX, XX, XX
  subject:     XX, XX, XX, XX
  identity:    XX
  fingerprint: 9b:dc:c1:34:b5:3c:68:10:c7:c5:6d:8f:fa:25:7a:51:46:70:22:ff
You only should accept this certificate, if you can
verify the fingerprint! The server might be faked
or there might be a man-in-the-middle-attack.
Accept certificate for this session? [y,N] y
/sbin/mount.davfs: Warning: can't write entry into mtab, but will mount the file system anyway

# マウントができている
$ df | grep webdav
https://127.0.0.1/webdav  26666664 13333332  13333332  50% /media/127.0.0.1