Ajaxで”Access-Control-Allow-Origin”エラーの場合の対策

本日は、『Ajaxで”Access-Control-Allow-Origin”エラーの場合の対策』を残しておきます。

環境

今回の実装環境をまとめておきます。

サーバ OS CentOS 6
Web サーバ Apache 2.2
AP サーバ Tomcat 7
サーバ側、言語・フレームワーク Java 7, Struts2
呼び出し元、言語・フレームワーク HTML, jQuery

呼び出し元ページ作成

今回は、サンプルなので呼び出し元ページをHTMLで作成します。
HTML内は下記のようになります。

<div id="ajax_content">
</div>

上の”id = ajax_content” にJavascriptで取得したHTMLを埋め込みます。
スクリプトは下記のようになります。
このスクリプトでは、jQueryを利用します。
jQueryはこちらからダウンロードできます。

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
$(document).ready(function(){
  $.ajax({
    url: "http://sample.com/get_list.html",
    dataType: "html",
    cache: false,
    success: function(data, textStatus){
    	startIndex = data.toString().indexOf("") + 6;
    	lastIndex = data.toString().lastIndexOf("");
    	tmp = data.substring(startIndex, lastIndex);
      $('#ajax_content').html(tmp);
    }
  });
});

サーバから取得した値が”data” 変数に入ります。
ここでsubstringをしているのは、dataの値はHTML全体が含まれてしまうためです。
※ スマートなやり方を検討中です。

これで、ページロード時にJavascriptが実行されてサーバから取得した値が”ajax_content” に埋め込まれるはずです。

クロスドメイン対策

前項の実装でAjaxの埋め込みは完了なのですが、思わぬ落とし穴があります。
それは『クロスドメイン』です。
ツールなどを利用すると”Access-Control-Allow-Origin” のエラーが出力される場合がそれに当たります。
要は、ドメインが違うサイト同士ではAjax のやり取りをNG にするというのがこの問題です。この制御ははブラウザによって制御されます。

クロスドメインについてはこちらのサイトが詳しく説明されていると思うのでご参考にしてみて下さい。
※ ちなみにサブドメインが異なる場合もこの問題が発生します。

この問題の根本的な解決方法は、『サーバ側の呼び出されるページのヘッダにアクセス許可を追加すること』です。
具体的にはヘッダに下記の文字列が含まれればどのような方法でも解決出来ます。


Access-Control-Allow-Headers: *
Access-Control-Allow-Origin: *

それで、今回は下記の4つの方法の対策を紹介することにします。
※ 4つの方法の内どれか1つでも行えばこの問題は回避出来ます。

  • Apacheでの対策
  • Actionでの対策
  • jspでの対策
  • phpでの対策

Apacheでの対策

“Access-Control-Allow-Origin”問題の1つめの解決策は、Apacheでヘッダを制御する方法です。
Apacheにmod_headers を追加し、”httpd.conf” に設定を追記すれば完了です。
mod_headers のインストール方法は下記のように行いました。

# cd /usr/local/src/httpd-2.2.*/modules/mappers/
# /usr/local/apache2.2/bin/apxs -c mod_headers.c
# /usr/local/apache2.2/bin/apxs -i -a -n headers mod_headers.la
# /usr/local/apache2.2/bin/apachectl -l
# /usr/local/apache2.2/bin/apachectl -t

続きて”httpd.conf” の追記です。


    DocumentRoot "/usr/local/apache2.2/htdocs"
    ServerName sample.com
    Header set Access-Control-Allow-Headers "Content-Type"
    Header set Access-Control-Allow-Origin "*"

     ProxyPass ajp://localhost/

っとこんな風に”Header” の設定を記載します。

この対策は先程のサイトこちらを参考にしました。

Actionでの対策

Action内では次の2つの方法の内どちらかを利用することで対応出来ます。
他にも色々と有りそうですね。

HttpHeaderResultを利用する

Header に先ほど説明した内容を追加すれば良いので、Struts2 のActionを利用しても対策の実現ができます。
スクリプトは次のようになると思います。
※ もしかすると間違えているかもしれません。

HttpHeaderResult header = new HttpHeaderResult();
header.add("Access-Control-Allow-Headers", "*");
header.add("Access-Control-Allow-Origin", "*");

こちらのサイトが参考になります。

HttpServletResponseを利用する

public void doGet(HttpServletRequest request, HttpServletResponse response){
...
  response.setHeader("Access-Control-Allow-Headers", "*");
  response.setHeader("Access-Control-Allow-Origin", "*");

この方法はこちらのサイトを参考にしました。

jspでの対策

jsp を利用して対策を施すこともできます。
jsp では下記のように追記することで対応出来ます。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Methods" content="GET">
<meta http-equiv="Access-Control-Allow-Headers" content="*">
</head>

phpでの対策

外部サイトに手を加えることが出来ない場合、php のページを挟むことで解決することができます。
この方法では、php サイトのリクエストパラメタにアクセス先URL を設定することで実現出来ます。
この方法についてはこちらのサイトをご確認下さい。

まとめ

今回は、『Ajaxで”Access-Control-Allow-Origin”エラーの場合の対策』について説明をしました。
Ajaxで実現する場合は、サーバ側のレスポンスにも十分な注意を払いましょう。

By Saito

HTML5・CSS3フレームワークのまとめ情報

bootstrap vs foundation

Twitter Boostrap  VS Foundation
    (copyright  abetteruserexperience.com )

本日はお勧めのHTML5・CSS3 レスポンシブWEBデザインのフレームワークを紹介したいと思います。

上記フレームワークの特徴

  1. 無償提供
  2. 実装が楽
  3. githubで一般公開
  4. レスポンシブ
  5. ほとんどのブラウザー・OSに対応
  6. 便利なjavascriptライブラリーが入っている
  7. カスタマイズ可能

Foundation入門(日本語)
http://www.yuguri.com/2013/03/04responsive_foundatio/

Boostrap入門(日本語)
http://matome.naver.jp/odai/2133117623223774701

両フレームワークの比較記事(英語): 
http://abetteruserexperience.com/2013/05/twitter-bootstrap-vs-foundation-4-which-one-is-right-for-you/

by johann

capistrano+apache+unicorn

unicorn

Railsプロジェクトをデプロイする時に山ほどのエラーが発生することが先週初めて知りました・・・デプロイタスクを自動化しようと思い、capistranoを使ってみました。このツールを使いこなせると、あっという間にstaggingやproductionサーバーのデプロイが可能になりますので、設定手順を作ってみました。

まずはローカル環境でcapistranoをインストールします

gem install capistrano capistrano_colors capistrano-ext rvm-capistrano

capistranoの他に幾つかのgemをインストールしました。

  1. capistrano_colors 実行結果に色を付けれてくれる便利なgemです
  2. capistrano-ext 環境に応じて、設定を変えられるツールです
  3. rvm-capistrano rvm経由でのインストール

Gemfileを更新します

#デプロイする際にcapistranoをインストール
group :deployment do
  gem 'capistrano'		
  gem 'capistrano_colors'	
  gem 'capistrano-ext'	
  gem 'rvm-capistrano'
end
...

#プロダクションモードの場合(本番機)、unicornをインストール
group :production do
  gem 'unicorn'
end
...

Gemfileの設定が完了になりました!次はcapistranoの設定を行います。【cap】コマンドでcapistranoの必要なファイルを生成します:

$cd {project_path}
$capify .

capify コマンドによって、デフォルトで次のファイルが生成されたはずです。

  • Capfile
  • config/deploy.rb

【deploy.rb】を書き直します:

#multi-stages用
require "capistrano/ext/multistage"

# 結果に色を作れくれるツール
require "capistrano_colors"

require "bundler/capistrano"

# RVMでrubyを管理していれば ↓
require "rvm/capistrano"   

# 値をセット
set :rvm_ruby_string, "ruby-2.0.0-p0"       
set :application, "myapp"   
set :copy_exclude, %w(.git .gitignore doc features log spec test tmp Capfile)
#set :shared_children, shared_children + %w(public/uploads)
set :use_sudo, false
set :user, "app"
set :stages, %w(staging production) 

# unicornサーバーを管理するためにdeploy namespaceを用意
# start/stop/restartメッソード
namespace :deploy do
  task :start, roles: :app, except: { no_release: true } do
    run "cd #{current_path} && bundle exec unicorn_rails -c config/unicorn.rb -E #{rails_env} -D"
  end

  task :stop, roles: :app, except: { no_release: true } do
    run "kill -KILL -s QUIT `cat #{shared_path}/pids/unicorn.pid`"
  end

  task :restart, roles: :app, except: { no_release: true } do
    stop
    start
  end
end

#デプロイ前に確認画面を出す
def confirm
  puts "\n\e[0;36m#{stage}\e[0m\e[0;31m Do you really deploy? (yes/no) \e[0m\n"
  proceed = STDIN.gets rescue nil
  exit unless proceed.chomp! == "yes"
end

本来はcapistranoの呼び方はこんな感じになります:

cap namespace1:task1  namespace1:task2 tasks3

今回はcapistranoのmultistageを使うことにしますので、コマンドが変わってきます。

cap stage namespace1:task1  namespace1:task2 tasks3

設定ファイルで定義した通りに2つのstageを用意しておきます:

  1. stagging (テスト用)
  2. production(本番)

capistranoは指定されたstagesの設定ファイルを自動的に読み取ってくれる。この設定ファイルの保存場所は → config/deploy/{stage名}.rb

ということで、stagging.rbとproduction.rbを追加しましょう!

#production.rb

server "myRealServer", :app, :web, :db, primary: true
set :rails_env, "production"
set :rvm_type, :user
set :scm, :subversion
set :scm_username, "myUser"
set :scm_password, "xxxxx"
set :repository, "https://myrepository/svn/myproject/trunk"

#確認メッソードを呼び出す
confirm

#stagging.rb
server "myproject.com", :app, :web, :db, primary: true
set :rails_env, "staging"
set :rvm_type, :system
set :rvm_path, "/usr/local/rvm"
set :scm, :git
set :repository,  "ssh://git@gitlab.test.com:10022/myProject.git"
set :deploy_via, :remote_cache

ご覧のとおり、stageによってscm(バージョン管理ツール)やサーバーが違います。

最後はサーバー側の修正を行います。必要なライブラリーをインストールし、unicorn用のユーザーアカウントを追加します

### 必要なライブラリのインストール (rootにてコマンド実行)
$ yum install libxslt-devel

### app ユーザ作成 (rootにてコマンド実行)
# adduser app
# mkdir -p /u/apps
# chown app:app /u/apps

rvm経由でRubyのインストールを行う:

### ruby2.0.0-p0 インストール (appユーザにてコマンド実行)

$ rvm install 2.0.0-p0
$ rvm reload
$ rvm use 2.0.0-p0 --default
$ echo 'gem: --no-ri --no-rdoc' >> ~/.gemrc
$ echo ':ssl_verify_mode: 0' >> ~/.gemrc
$ gem install bundler

最後はapacheのVirtualHostを設定します:

### apache 設定

    ServerName special.myserver.jp

    ProxyPass /assets/ !
    ProxyPass / http://localhost:18080/
    ProxyPassReverse / http://localhost:18080/

    Alias /assets/ /u/apps/myProject/current/public/assets/

        Options FollowSymLinks
        Order Allow,Deny
        Allow from All

実際にプロジェクトをデプロイしてみましょう!

#capistranoの動作確認(初回のみ)
cap production deploy:check

# 最初の環境構築 (初回のみ)
cap production deploy:setup

#デプロイ
cap production deploy

#自分で作ったunicornのインストール・起動タスク
cap production deploy:start

http://special.server.comをアクセスすると、問題なくアプリが起動する・・はずです。

by johann

FTPサーバー設定

今日はLinux環境でFTPサーバーを立てて、専用のユーザーを追加してみましょう。
(OS:centos 5.6)

UNIX系システム向けの一番有名なオープンソースのFTPサーバ【vsfptd】を使います。

注意:FTPサーバーを設定する前にftpポートを解放しておいてください(20,21)

インストールされていない場合はインストールします:

#インストール状態を確認
yum list installed | grep vsftpd

#インストールされていない場合...
 yum -y install vsftpd

次は設定ファイルをカスタマイズします:

vi /etc/vsftpd/vsftpd.conf

#匿名ログイン=禁止
anonymous_enable=NO

# アスキーモードのアップダウンロードを許可
ascii_upload_enable=YES
ascii_download_enable=YES

# バージョン情報が表示されないように
ftpd_banner=Welcome to xxx FTP service.

# ホームディレクトリより上のディレクトリアクセスを禁止
chroot_local_user=YES
chroot_list_enable=YES
chroot_list_file= /etc/vsftpd/chroot_list

# ディレクトリごと削除を許可
ls_recurse_enable=YES

# /etc/vsftpd/user_listのユーザのみアクセス許可
userlist_enable=YES
userlist_deny=NO

# ユーザごとの設定ファイルを有効にする
user_config_dir=/etc/vsftpd/vsftpd_user_conf

ユーザーを追加します。bashログインできないように -s (shell) 引数を指定し /sbin/nologin値を与えます。 ユーザーのhomeとしてはapacheのdocumentRoot下のディレクトリーを指定します(-d)。最後にパスワードを変えます。

adduser -d /var/www/html/your_directory -s /sbin/nologin  ftp_user1
passwd ftp_user1
...

etc/vsftpd/user_listに【ftp_user_1を】ユーザーを追加します。

#念の為、バックアップ
cp /etc/vsftpd/user_list /etc/vsftpd/user_list.BACKUP
echo ftp_guest_1 >  /etc/vsftpd/user_list

サーバーを起動させて、serviceとして登録します

 /etc/init.d/vsftpd start
 chkconfig vsftpd on

以上です~

by johann

グーグル、Android OS断片化の拡大防止のため、SDKに新たな利用条件を設定

Android OSの使用許諾条件が変更されたようです。

この変更により多くの携帯メーカーは工夫が必要になるでしょう。

また、開発者に取ってはAndroid OS搭載の Chrome互換問題から開放されるでしょう。

 米国Googleは11月13日、Android 4.2(開発コード名Jelly Bean)および開発者向けのAndroid 4.2 SDK(ソフトウェア開発キット)をリリースしたが、それに伴いSDKの使用許諾の内容を拡大し、Android OSの断片化につながるような行為を禁止する事項を盛り込んだ。

 Android端末用のアプリを開発するためには、Google Android SDKの使用許諾条件に同意しなければならない。

 2009年4月にリリースされていた旧バージョンのサービス利用規約には含まれていなかった、今回追加された部分は以下の通りだ。

 「Android の断片化を生じるような行為はしないことに同意する。これには、公式なSDKから派生するソフトウェア開発キットの作成や作成への参加および配布を含むが、これに限定するものではない」

http://m.computerworld.jp/topics/576/205538

centos環境でlighttpdを設定 !

lighttpd

lighttpdについて

lighttpdは軽量かつ高速性を重視して設計された比較的新しいWebサーバーソフトウエアです。BSDライセンスで公開されているオープンソースソフトウエアで、無料で利用することができます。画像や映像などといった静的コンテンツの配信に使われることが多いようです。

導入手順

Centos 5.* 6.* バージョンのリポジトリを確認してみると、どうやらlighttpdのパケージが存在していないようですね。

#パケージが存在しているかチェック
yum list available 'lighttpd'

対策としてrepoforgeというサードパーティ製のRPMパッケージ群のリポジトリをインストールします。アーキテクチャによってrpmファイルが変わってくるので、x86_64とx86の手順を作っておきました。

#アーキテクチャチェック
uname -a

#rmpダウンロード(アーキテクチャx86_64の場合)
wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm

#rmpダウンロード(アーキテクチャx86の場合)
wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.i386.rpm  

//GPG key をインポート
rpm --import http://apt.sw.be/RPM-GPG-KEY.dag.txt

//パッケージをインストール
rpm -i rpmforge-release-0.5.2-2.el5.rf.*.rpm

次はlighttpをインストールしましょう!

yum install lighttpd

設定ファイルで初期設定を行います。

vi /etc/lighttpd/lighttpd.conf
         .....
	server.port = 54331	#ポート番号
	server.document-root = server_root + "/lighttpd/mydoc"	#documentRoot

設定ファイルが有効になっているかチェック:

lighttpd -t -f /etc/lighttpd/lighttpd.conf

問題がなければ、テストモードで起動させます:

lighttpd -D -f lighttpd.conf

http://localhost:54331 (指定ポート)をアクセスすると【/lighttpd/mydoc】のファイルが正常に表示されます!

以上

by johann

擬似個人情報(テストデータ) を作成するサービスの紹介

こんにちは、システム開発で工数のかかる作業の1つにテストデータの作成があります。

テストの種類にもよりますが、それらしいデータでなければテストが意味を成さないことが多々あります。

(この場合の意味を成さないとは、限界値等のバリデーションのことをさします)

そんな時に便利なツールを紹介します。

  1. なんちゃって個人情報 http://kazina.com/dummy/
  2. 疑似個人情報データ生成サービス http://hogehoge.tk/personal/

参照元はhttp://blog.satt.jp/article/314767109.htmlです。

※注意 サイトにもありましたが、完全ランダムみたいですので、たまたま名前が実在の人物と同姓同名になったり、電話番号が偶然実際に使われている物と同じになる場合があります。

by Saito