SafeFrameでリッチ広告をセキュアに実現
- UI/UX, アドテクノロジー html, Javascript, safeframe
アドサーバ(広告配信サーバ)は、通常iframe
で広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある)
通常のセキュリティだとiframe
の中身(srcで実際に表示されている側)がiframe
を操作する事はできない。つまりexpand
などのリッチ広告、特に表示領域を変更(特に拡大)する場合に問題となる。
このような問題を、セキュアに解決するために、IABが提唱したのがSafeFrame
という規格だ。GoogleのDFPにも採用されている。
基本準備
下記のページに必要なソース群があるので、まずはそれをダウンロードする。
src
以下のファイルを下記のようにsafeframe/1.1.0
というフォルダに格納する。
r.html
はrender用のHTMLだが、特に修正する必要は無いので、そのまま使う事をお勧めする。このフォルダへのアクセスを仮にhttp://path.to.cdn/safeframe
とする。
呼び出し側(Host)のコード
呼び出し側(iframe
を書くページ側)を Host と呼ぶ。
Host側HTMLのiframe
を期待する場所に次のようなコードが入る。
[html]
<div id="leaderboard"></div>
<script type=’text/x-safeframe’>
{
"id" : "leaderboard_src",
"src" : "../../src/sample.js",
"conf" :
{
"size" : "728×90",
"dest": "leaderboard",
"supports" : {
"exp-push" : "1"
}
}
}
</script>
[/html]
コード中の../../src/sample.js
が 広告のクリエイティブとなる。詳細は後述。相対パスで書く場合は、先ほどの r.html
からの相対 になるので注意。conf
の中のexp-push
は、iframe
がexpand
した際に、コンテンツをpush
する事を明示的に許可している。(デフォルトではexp-push
はfalse
)
ドキュメントの最後の方に、必要なJSを読み込んだり、HOST側の設定をするコードを書く。
[html]
<script src="http://path.to.cdn/safeframe/1.1.0/js/lib/base.js"></script>
<script src="http://path.to.cdn/safeframe/1.1.0/js/host/host.js"></script>
<script src="http://path.to.cdn/safeframe/1.1.0/js/lib/boot.js"></script>
<script type="text/javascript">
(function() {
var conf = new $sf.host.Config({
renderFile: "http://path.to.cdn/safeframe/1.1.0/html/r.html"
});
})();
</script>
[/html]
広告クリエイティブ(External Party側)の実装
広告クリエイティブを表示するsample.js
と、そこで使うcsssample.css
を次の位置に格納する。今回は便宜上、レンダーファイルなどと同じホストに置いたが r.htmlやhost.jsなどとは別のホスト(ドメイン)でも構わない。
このクリエイティブ中では、次の3つを行っている。
- inviewのパーセンテージを表示
- expand(overlay)する
- expand (pushdown) する
ソース全体は最後に書いてる。大事な所だけ抜粋。基本的に$sf.ext
オブジェクトにアクセルする事で制御等を行う。
Inviewのパーセンテージを表示には$sf.ext.inViewPercentage()
を利用。
[javascript]
(function(){
window.setInterval(function(){
var totalViewable = $sf.ext.inViewPercentage();
var elem = document.getElementById("inview");
elem.innerHTML = "Viewable: " + totalViewable + "%";
}, 50);
})();
[/javascript]
Expandには$sf.ext.expand()
を利用。
[javascript]
overlay.addEventListener("click", function(){
$sf.ext.expand({b:100,push:false}); // Pushしない
}, false);
pushdown.addEventListener("click", function(){
$sf.ext.expand({b:100,push:true}); // Pushする
}, false);
[/javascript]
詳しいAPIドキュメントは、先ほどダウンロードしたファイルの中にある。今回は External
ソースコード
ちなみに、動作はChromeでしか確認してない。
sample.js
[javascript]
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", "../../src/sample.css");
document.body.appendChild(css);
var bg = document.createElement("div");
bg.setAttribute("id", "bg");
document.body.appendChild(bg);
var inview = document.createElement("div");
inview.setAttribute("id", "inview");
inview.setAttribute("class", "btn");
bg.appendChild(inview);
var overlay = document.createElement("div");
overlay.setAttribute("id", "overlay");
overlay.setAttribute("class", "btn");
overlay.innerHTML = "OVERLAY";
overlay.addEventListener("click", function(){
$sf.ext.expand({b:100,push:false});
}, false);
bg.appendChild(overlay);
var pushdown = document.createElement("div");
pushdown.setAttribute("id", "pushdown");
pushdown.setAttribute("class", "btn");
pushdown.innerHTML = "PUSHDOWN";
pushdown.addEventListener("click", function(){
$sf.ext.expand({b:100,push:true});
}, false);
bg.appendChild(pushdown);
var collapse = document.createElement("div");
collapse.setAttribute("id", "collapse");
collapse.setAttribute("class", "btn");
collapse.addEventListener("click", function(){
$sf.ext.collapse();
}, false);
collapse.innerHTML = "COLLAPSE";
bg.appendChild(collapse);
$sf.ext.register(300, 250, function(status,data){});
(function(){
window.setInterval(function(){
var totalViewable = $sf.ext.inViewPercentage();
var elem = document.getElementById("inview");
elem.innerHTML = "Viewable: " + totalViewable + "%";
}, 50);
})();
[/javascript]
sample.css
[css]
* {
margin: 0;
padding: 0;
}
div#bg {
background-color: #999;
height: 190px;
}
div.btn {
background-color: #eee;
width: 100px;
height: 20px;
position: absolute;
font-size: 8pt;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
div#inview {
top: 10px;
left: 10px;
}
div#overlay {
top: 60px;
left: 10px;
}
div#pushdown {
top: 60px;
left: 120px;
}
div#collapse {
top: 160px;
left: 10px;
}
[/css]

関連記事
-
-
オトナの常識、消費者プライバシー保護(前編)
どうも、広告技術研究室のダーハラです。 何やってる人? 広告技術研究室の業務は多岐に渡るのですが、僕の仕事は海外のアドテクノロジーの動向や関連する技術環境の変化を調べて、経営陣や開発部隊にフィードバックするといったことを主な業務としています。 とてもやり甲斐のある仕事なのですが、仕事 …
-
-
ネイティブ広告と記事広告の違いってなに?!
こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …
-
-
アドテク問題(広告表示編)
アドテクエンジニア向けの問題を考えました。 お題は「広告表示」です。 以下お題に沿った「アドタグ」を作成し、広告を表示してみてください。 全部で9問あるので、興味のある人はやってみてください。 難易度は、ちょうどいいくらいです。 全部できた人は、採用担当までご連絡ください。 Q1.バナー広告を表示し …
-
-
ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編
はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …
-
-
「Ad Tech Power Game」
こんにちは、テクノロジー戦略部の田畑です。 はじめに。 この「アドテクゑびす界」ですが、DAC公式のエンジニアブログです。他の方も色々と技術的なことを書いていますが僕エンジニアでもなんでもありません。コード書けませんし、読めません。 ではなぜそんなやつがここでブログを書いているのか?会社の公式ブログ …
-
-
【DMP】クッキー連携ってなに
アドテクに関わる方であれば、必ず耳にするであろう「クッキー連携」をシンプルに説明してみようと思います。 クッキー連携は cookie sync(クッキーシンク、cookie synchronization の略)と呼ばれることも多いです。 Googleは cookie matching …
-
-
「初めての動画広告~①VAST編~」
2015年新卒入社の池田です。 「TVで動画コンテンツをみる時代」から「ネットで動画コンテンツをみる」時代になった今日このごろです。 「私もいっちょまえに動画広告を扱ってみたい・・・!!」と生意気にも思うようになりまして。 しかし、つい2か月前までド文系大学生だった池田は果たして動画広告を扱えるよう …
-
-
Safari10(iOS10)のインライン動画再生についてまとめてみた
はじめに Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。 Safari 10.0 検証環境 項目 詳細 開発環境 Xcode8.0 検証端末 iPhone7 Simulator ブラウザ iOS Safari / UIWebView / …
-
-
【DMP】IDのハッシュってなに
アドテクに関わる方であれば、よく耳にするであろう「ハッシュ」をシンプルに説明してみようと思います。 とはいえ「ハッシュ」は広いので、ここでは「IDのハッシュ」に焦点を当てます。 「ハッシュ/hash(動詞)」はそもそも「細切れにする」というような意味を持ちます。(名詞だと「細切れのもの」) ハッシュ …
-
-
意外と知らないかも? Chrome DevTools の機能10選
みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。 ここでは、その中か …