SafeFrameでリッチ広告をセキュアに実現


アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある)

通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更(特に拡大)する場合に問題となる。

このような問題を、セキュアに解決するために、IABが提唱したのがSafeFrameという規格だ。GoogleのDFPにも採用されている。

基本準備

下記のページに必要なソース群があるので、まずはそれをダウンロードする。

SafeFrame Download Files

src以下のファイルを下記のようにsafeframe/1.1.0というフォルダに格納する。

untitled_—_safeframe.png

r.htmlはrender用のHTMLだが、特に修正する必要は無いので、そのまま使う事をお勧めする。このフォルダへのアクセスを仮にhttp://path.to.cdn/safeframeとする。

呼び出し側(Host)のコード

呼び出し側(iframeを書くページ側)を Host と呼ぶ。
Host側HTMLのiframeを期待する場所に次のようなコードが入る。

<div id="leaderboard"></div>
<script type='text/x-safeframe'>
{
	"id" : "leaderboard_src",
	"src" : "../../src/sample.js",
	"conf" :
		{
		"size" : "728x90",
		"dest":	"leaderboard",
		"supports" : {
			"exp-push" : "1"
		}
	}
}
</script>

コード中の../../src/sample.js広告のクリエイティブとなる。詳細は後述。相対パスで書く場合は、先ほどの r.htmlからの相対 になるので注意。confの中のexp-pushは、iframeexpandした際に、コンテンツをpushする事を明示的に許可している。(デフォルトではexp-pushfalse

ドキュメントの最後の方に、必要なJSを読み込んだり、HOST側の設定をするコードを書く。

<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>

広告クリエイティブ(External Party側)の実装

広告クリエイティブを表示するsample.jsと、そこで使うcsssample.cssを次の位置に格納する。今回は便宜上、レンダーファイルなどと同じホストに置いたが r.htmlやhost.jsなどとは別のホスト(ドメイン)でも構わない。

sample_js_—_safeframe.png

このクリエイティブ中では、次の3つを行っている。

  • inviewのパーセンテージを表示
  • expand(overlay)する
  • expand (pushdown) する

ソース全体は最後に書いてる。大事な所だけ抜粋。基本的に$sf.extオブジェクトにアクセルする事で制御等を行う。

Inviewのパーセンテージを表示には$sf.ext.inViewPercentage()を利用。

(function(){
  window.setInterval(function(){
    var totalViewable = $sf.ext.inViewPercentage();
    var elem = document.getElementById("inview");
    elem.innerHTML = "Viewable: " + totalViewable + "%";
    }, 50);
})();

Expandには$sf.ext.expand()を利用。

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);

詳しいAPIドキュメントは、先ほどダウンロードしたファイルの中にある。今回は External

ソースコード

ちなみに、動作はChromeでしか確認してない。

sample.js

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);
})();

sample.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;
}

DACエンジニア採用情報

  関連記事

Apple-Releases-Safari-10-Developer-Beta-3-for-OS-X-Yosemite-and-El-Capitan
Safari10(iOS10)のインライン動画再生についてまとめてみた

はじめに Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。 Safari 10.0 検証環境 項目 詳細 開発環境 Xcode8.0 検証端末 iPhone7 Simulator ブラウザ iOS Safari / UIWebView / …

Chrome
アドブロッカーに対抗してアドチェッカーを作ってみた

iOS9のSafariでコンテンツブロック機能が登場し、サイト上の広告を非表示にするアドブロックの存在が世に広まりました。 これを機にCrystalを始めとする数々のアドブロッカーアプリが登場しています。 PCブラウザでもAdblock Plusを始め、ブラウザの拡張機能で広告を非表示にして表示速度 …

IMG_4673
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた②~

はい、テクノロジー戦略部の田畑です。 アドテク系イベントに行ってきた②ということで、前回書ききれなかったところを書きます。   ~前回のおさらい~ 1.11月にNYのアドテク系イベント3つに行ってみた。 2.Fraud、Viewability、Programatic Directがキーワー …

プログラミング
ES5とES6でアドタグを作ってみた

はじめに アドテク問題(広告表示編)のQ7を元にネイティブ広告を表示するアドタグをES5とES6で作ってみました。 処理の流れ 大きな処理の流れは以下の通り 広告要素取得処理 サーバからタイトル/説明文/画像URLの取得を行う フォーマット処理 取得した要素を表示するページに最適化した形にフォーマッ …

6914441342_605f947885
Treasure Dataの新機能(Data Tank)をAudienceOneのレポート機能で利用した話

Data Tankとは? Treasure Dataの新機能でTreasure Dataのプラットフォーム上に構築されたデータマートです。 Tableau等のBIツールとの接続を想定されており、AWSでいうところのRedshift的なものだと考えるとわかりやすいかと。 Data TankはPostg …

SCA_and_Discovery_after_return_to_flight,_2005
【DMP】ピギーバックってなに

アドテクに関わる方であれば、よく耳にするであろう「ピギーバック」をシンプルに説明してみようと思います。 「piggyback/ピギーバック」は 「おんぶ」「背負う」に当たる言葉です。 アドテクでピギーバックというと、タグのピギーバックのことを指すことが多いように思います。 タグは、サイトに導入する小 …

gtm
【タグマネジメント】GoogleTagManagerでイベントリスナーを使う

タグマネジメントとは タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。 タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録す …

new-york-city-828776_1280
ネイティブ広告と記事広告の違いってなに?!

こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …

iab-vast-logo
「初めての動画広告~①VAST編~」

2015年新卒入社の池田です。 「TVで動画コンテンツをみる時代」から「ネットで動画コンテンツをみる」時代になった今日このごろです。 「私もいっちょまえに動画広告を扱ってみたい・・・!!」と生意気にも思うようになりまして。 しかし、つい2か月前までド文系大学生だった池田は果たして動画広告を扱えるよう …

20140930220910
AudieneOneでアドブロック利用者を抽出する訪問者セグメントを作ろう

はじめに iOS 9のコンテンツブロッカーによって盛り上がったアドブロック論争。アドブロック自体はPCブラウザ用プラグインで昔からできていたことなのですが、さらに普及していくのかもしれません。 アドブロックの仕組みが普及するのはインターネット業界全体の損失につながりかねない話ではあるのですが、その一 …