Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
58
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Basic認証時でのFacebook,Twitterなどシェアに使うOGPの確認方法(ソースIPを利用)

前提

FacebookシェアやTwitterCardを利用するOGP関連のタグを公開前サイトで確認したいという状況は往々にしてあると思います。
そんな中で、公開前のサイトは Basic認証をかけていることが多いと思います。その場合、OGPのクローラが巡回できず解析ができません。

Facebookの場合は以下のデバッガサイトがあるのでそこにOGPタグを設置したURLを入れて「デバッグ」してみるとBasic認証に通らず401エラーになります。
Facebookのデバッガサイト

回避方法

今のところ2つの回避方法があるかなーと考えています。

  • HTTPヘッダのUserエージェントで判定する方法
  • OGPクローラのソースIPから判定する方法

HTTPヘッダのUserAgentで判定する方法 」は色んな所で解説されているのでご確認下さい。
Basic認証下でFacebook等のOGP確認方法
Basic 認証中のページで OGP のテストをする
UserAgentは頑張れば書き換えも可能なので、偽装された場合、意図せず公開前のサイトが見られてしまう恐れが・・・あるかも

ということでOGPクローラのソースIPから判定する方法について書きます。

OGPクローラのソースIPから判定する方法

手順は以下の2点です。
基本的には [Nginx]Basic認証中のページでOGPのテストをする を参考にさせていただきました。

  1. FacebookやTwitterのソースIPを調べる
  2. Nginx または Apache の設定を変更して特定のIPはBasic認証なしで許可させる

1.FacebookやTwitterのソースIPを調べる

  1. まずは、ドメインのAS番号を調べます。
    http://bgp.he.net/ にアクセスして、検索ボックスに 「twitter.com」など入れて、「Search」検索します。

  2. 検索結果から 「IP Info」タブよりAS番号(AS***)を調べます。
    **Facebook : AS32934

    Twitter : AS13414

    2f21cec2eaac30a57f34954f6b0b14ef.png

  3. AS番号からソースIPを調べる
    以下のコマンドを実行するとCIDR区切りのIPが出力されます。それをNginxやApacheのAllowに加える事でOGPクローラのIPを許可させます。

Facebookの場合
$ whois -h whois.radb.net -- '-i origin AS32934' | awk '/^route:/{print $2 }'

Twitterの場合
$ whois -h whois.radb.net -- '-i origin AS13414' | awk '/^route:/{print $2 }'

2.Nginx または Apache の設定を変更して特定のIPはBasic認証なしで許可させる

Nginx の場合

/etc/nginx/conf.d/ogp_allow_ips.confというファイルを作成する

# cd /etc/nginx/conf.d/
# echo '# Facebook IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS32934' | awk '/^route:/{print "allow " $2 ";" }' >> ogp_allow_ips.conf
# echo '# Twitter IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS13414' | awk '/^route:/{print "allow " $2 ";" }' >> ogp_allow_ips.conf

/etc/nginx/conf.d/vhosts.conf にVirtualHostのserversのディレクティブの設定があり、その中でogp_allow_ips.confを読み込む

virtualhostにBasic認証の設定を追加する
# vi /etc/nginx/conf.d/vhosts.conf
…省略
server {
…省略
    # Basic認証
    satisfy any;
    include /etc/nginx/conf.d/ogp_allow_ips.conf;
    deny all;
    auth_basic           "Secret Area";
    auth_basic_user_file "/etc/nginx/.htpasswd";
…省略
}

Apacheの場合

/etc/httpd/conf.d/ogp_allow_ips.confというファイルを作成する
Apache2.2系とApache2.4系で許可するディレクティブが違っているようなので注意してください

Apache2.2系の場合のogpの許可設定ファイルを作成
# cd /etc/httpd/conf.d/
# echo '# Facebook IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS32934' | awk '/^route:/{print "Allow from " $2 ";" }' >> ogp_allow_ips.conf
# echo '# Twitter IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS13414' | awk '/^route:/{print "Allow from " $2 ";" }' >> ogp_allow_ips.conf
Apache2.4系の場合のogpの許可設定ファイルを作成
# cd /etc/httpd/conf.d/
# echo '# Facebook IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS32934' | awk '/^route:/{print "Require ip " $2 ";" }' >> ogp_allow_ips.conf
# echo '# Twitter IPs' >> ogp_allow_ips.conf
# whois -h whois.radb.net -- '-i origin AS13414' | awk '/^route:/{print "Require ip " $2 ";" }' >> ogp_allow_ips.conf

/etc/httpd/conf.d/vhosts.conf にVirtualHostのディレクティブの設定があり、その中でogp_allow_ips.confを読み込む

virtualhostにBasic認証の設定を追加する
# vi /etc/httpd/conf.d/vhosts.conf
…省略
<VirtualHost *:80>
    …省略
    <Directory "/var/www/html/public">
        …省略
        AuthType      Basic
        AuthName      "Secret Area"
        AuthGroupFile /dev/null
        AuthUserFile  /etc/httpd/.htpasswd
        Satisfy any
        Order deny,allow
        Deny from all
        Include /etc/httpd/conf.d/ogp_allow_ips.conf
        Require       valid-user
        …省略
    </Directory>
    …省略
</VirtualHost>

設定完了後

NginxやApacheを再起動させ、設定を反映する。
その後に Facebookのデバッガサイト などで
再度、デバッグしてみると401エラーがなくなっていると思います。

以上、Basic認証下のソースIPを判定してOGPクローラを許可する設定です!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
58
Help us understand the problem. What are the problem?