忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/06/27 05:38 |
JavaScript2-8:JavaScriptで訪問履歴を取得

JavaScriptではテキストの状態を取得・操作する各種プロパティやメソッドがありますが、その中のひとつにテキストの色を操作するものがあります。
このcss(name)を<a>タグに使ってみるとどうなるかというと、リンク先を訪問済の場合と未訪問の場合で違う色が返ってくるわけです。

さて、Livedoor ad4Uというサービスがありますが、このサービスは上記を利用して訪問履歴を調べています。
http://ad4u.drecom.co.jp/
http://www.drecom.co.jp/pr/release/20080711/
http://takagi-hiromitsu.jp/diary/20081211.html

一方、最初にこの手法を発見した人はエントリを削除してしまいました。
http://www.kenjiroumatsushita.com/archives/188.html

倫理的にどうかはともかく実装は簡単なのでやってみます。
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html><head>
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="Content-Style-Type" content="text/css">
 
    <style type="text/css">
        a{color:#f0f0f0}
        a:visited{color:#0f0f0f}
    </style>
    
    <script src="./jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        function check(){
 
            var str="あなたはgoogleを訪れたことがありま";
            var htmlStr1 = $("#google").css("color");
            if(htmlStr1=="#f0f0f0"){
                str += "せん";
            }else{
                str += "す";
            }
            str += "<br />あなたはyahooを訪れたことがありま";
            var htmlStr2 = $("#yahoo").css("color");
            if(htmlStr2=="#f0f0f0"){
                str += "せん";
            }else{
                str += "す";
            }
            $("#disp").html(str);
            
        }
    </script>
    
</head>
 
<body onLoad='check()'>
    <div id="check" style="display:none;">
        <a href="http://www.google.co.jp/" id='google'>google</a><br />
        <a href="http://www.yahoo.co.jp/" id='yahoo'>yahoo</a><br />
    </div>
    <div id="disp">
</div>
</body>
</html>


簡単かと思っていたら、何故かdocument.getElementById("google").style.colorで値が取得できませんでした。
color="#ffffff"と書くときちんと上書きできるのに何故なんでしょう?
仕方ないのでjQueryを使ってさくっと実装してみました。
まあ、外部スクリプトの助けを借りてはいますが、このように割と簡単に訪問履歴を取得できます。
あとはURLやIDをべた書きではなくforなどでぐるぐる回して取得し、その値をAJAXでサーバに送れば、Livedoor ad4Uのようなものもできるでしょう。

というわけでせっかくなので実演してみました。
下のリンクにマウスカーソルを合わせるとそのサイトに行ったことがあるかどうかが表示されます。
履歴の保存などは行っていないのでご安心を。
そもそもGoogleとYahooだけだから保存してもしょうがないというのもありますが。
<body>中にスクリプトやCSSを書いているので一部厳格なブラウザでは動かないかもしれません。

google
yahoo  
 

さて、このように訪問履歴を取得することはバグという扱いだそうなので、そのうち使えなくなるかもしれません。

それにしてもこういう広告手段、jQueryでも普通に実装されているようにまったくもって新しい技術ではないのですが、それらを使用して新しい手法を考え出すというアイデアは素晴らしいですね。
XSSを利用してフィッシングにも使えそうな悪寒。
 
PR


2009/03/09 15:31 | Comments(2) | TrackBack(1) | JavaScript

トラックバック

トラックバックURL:
GoogleとYahooを訪れたことがある場合、下記リンクの下線が画像で表示されます。  これだけなら単なる装飾ですが、実はこれ、Webビーコンそのものです。 前JavaScriptで訪問履歴が取得できるという話をしましたが、JavaScriptをオフにしていても訪問履歴を取得する手段があったりします。 その手段とはCSSを用いるもので、:hover疑似クラスとbackground-imageプロパティを使用します。 両者ともに元々のCSSの機能であり脆弱性でも何でもありま...
弱小PHPerの憂鬱 | 2009/07/21 19:54

コメント

古い記事にコメント失礼します.


すでに解決されているやもしれませんが,

>簡単かと思っていたら、何故かdocument.getElementById("google").style.colorで値が取得できませんでした。
color="#ffffff"と書くときちんと上書きできるのに何故なんでしょう?

これはDOMにスタイルシートが含まれないからです.
HTMLElement.prototype.styleはHTMLのstyle属性を取得・設定します.

こちらの記事のソースでしたら
 <a href="http://www.google.co.jp/" id="google" style="color:#f0f0f0">google</a>
となっておりましたら
 document.getElementById('google').style.color

 '#f0f0f0'
を返します.


スタイルシートのスタイルをJSで取得するにはと言いますと.
(当該要素がelementに入っているとして)

1)IEでは,element.currentStyleがこれを持っています.
2)Safariでは,document.defaultView.getComputedStyle(element)がこれを持っています.
3)FirefoxとOperaとでは,window.getComputedStyle(element, '')がこれを持っています.また,これらでは,window==document.defaultViewです.

→var style = element.currentStyle || document.defaultView.getComputedStyle(element)でelementのスタイル情報が取得できます.(この方法ではstyle属性のスタイル諸共すべてのスタイル情報を取得します.)

ただし,style.colorの値1つ取ってもブラウザごとに差異があります.
http://d.hatena.ne.jp/uupaa/20080928/1222543331
ここが参考になると思います.


以上,コメ欄汚し失礼いたしました.
posted by diaqt at 2012/07/04 20:11 [ コメントを修正する ]
おー、
styleとCSSに入ってるのって場所がちがってたんですね。
いつもjQueryなので全然知りませんでした。
参考になりました、ありがとうございます。

ってややこしすぎるわ。
やっぱCSSには滅んでほしい。
posted by NurseAngel at 2012/07/07 18:48 [ コメントを修正する ]

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<レベルUPしまくりの「ドラクエ」サウンド! | HOME | PHP1-59:PHPで暗号化>>
忍者ブログ[PR]