Forter JavaScript実装

概要

WEB注文の場合、Forterトークン（forterTokenCookie）の設定が必須です。Forter JavaScriptスニペットを取得し、Forterトークンを取得するための実装を行ってください。

重要

• スニペットはサイト全ページに配置し、</body> 直前に貼り付けてください。
• 初期化タイミングが遅延し、トークン取得に失敗する可能性があるため、タグマネージャ経由での実装は非推奨です。

Forterスニペットの取得

BasicプランとEnterpriseプランで取得方法が異なります。

Basicプラン

当サービスが取得したForterスニペットを利用します。本ページに記載のスニペットをコピー＆ペーストして導入してください。

環境	id/siteId
テスト環境	778439a8fa2c
本番環境	de13dcd896aa

Enterpriseプラン

加盟店様ご自身で、Forterが提供する管理画面からForterスニペットを取得してください。

1. Forter管理画面にログイン
2. 画面右上のドロップダウンメニューより対象サイト（環境）を選択
3. 「JavaScript Snippets画面」からコピーして導入

Forterスニペット（テスト環境）

<script type="text/javascript" id="778439a8fa2c">
    (function () {
        var merchantConfig = {
            csp: false,
        };

        var siteId = "778439a8fa2c";
function t(t,e){for(var n=t.split(""),r=0;r<n.length;++r)n[r]=String.fromCharCode(n[r].charCodeAt(0)+e);return n.join("")}function e(e){return t(e,-_).replace(/%SN%/g,siteId)}function n(t){try{if("number"==typeof t&&window.location&&window.location.pathname){for(var e=window.location.pathname.split("/"),n=[],r=0;r<=Math.min(e.length-1,Math.abs(t));r++)n.push(e[r]);return n.join("/")||"/"}}catch(t){}return"/"}function r(){var t="no"+"op"+"fn",e="g"+"a",n="n"+"ame";return window[e]&&window[e][n]===t}function o(){return!(!navigator.brave||"function"!=typeof navigator.brave.isBrave)}function i(){return document.currentScript&&document.currentScript.src}function a(t){try{z.ex=t,r()&&-1===z.ex.indexOf($.uB)&&(z.ex+=$.uB),o()&&-1===z.ex.indexOf($.uBr)&&(z.ex+=$.uBr),i()&&-1===z.ex.indexOf($.nIL)&&(z.ex+=$.nIL),window.ftr__snp_cwc||(z.ex+=$.s),H(z)}catch(t){}}function c(t,e){function n(i){try{i.blockedURI===t&&i.disposition===o&&(e(),document.removeEventListener(r,n))}catch(t){document.removeEventListener(r,n)}}var r="securitypolicyviolation",o="enforce";document.addEventListener(r,n),setTimeout(function(){document.removeEventListener(r,n)},2*60*1e3)}function f(t,e,n,r){var o=!1;t="https://"+t,c(t,function(){r(!0),o=!0});var i=document.createElement("script");i.onerror=function(){if(!o)try{r(!1),o=!0}catch(t){}},i.onload=n,i.type="text/javascript",i.id="ftr__script",i.async=!0,i.src=t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(i,a)}function u(){nt($.uDF),setTimeout(l,B,$.uDF)}function s(t,e,n,r){var o=!1,i=new XMLHttpRequest;if(c("https:"+t,function(){n(new Error("CSP Violation"),!0),o=!0}),"//"===t.slice(0,2)&&(t="https:"+t),"withCredentials"in i)i.open("GET",t,!0);else{if("undefined"==typeof XDomainRequest)return;i=new XDomainRequest,i.open("GET",t)}Object.keys(r).forEach(function(t){i.setRequestHeader(t,r[t])}),i.onload=function(){"function"==typeof e&&e(i)},i.onerror=function(t){if("function"==typeof n&&!o)try{n(t,!1),o=!0}catch(t){}},i.onprogress=function(){},i.ontimeout=function(){"function"==typeof n&&n("tim"+"eo"+"ut",!1)},setTimeout(function(){i.send()},0)}function d(t,siteId,e){function n(t){var e=t.toString(16);return e.length%2?"0"+e:e}function r(t){if(t<=0)return"";for(var e="0123456789abcdef",n="",r=0;r<t;r++)n+=e[Math.floor(Math.random()*e.length)];return n}function o(t){for(var e="",r=0;r<t.length;r++)e+=n(t.charCodeAt(r));return e}function i(t){for(var e=t.split(""),n=0;n<e.length;++n)e[n]=String.fromCharCode(255^e[n].charCodeAt(0));return e.join("")}e=e?"1":"0";var a=[];return a.push(t),a.push(siteId),a.push(e),function(t){var e=40,n="";return t.length<e/2&&(n=","+r(e/2-t.length-1)),o(i(t+n))}(a.join(","))}function h(){function t(){M&&(nt($.dUAL),setTimeout(l,B,$.dUAL))}function e(t,e){M=e?"F"+"T"+"R"+"A"+"U"+"C":"F"+"T"+"R"+"A"+"U",setTimeout(l,B,$.uAS)}window.ftr__fdad(t,e)}function w(){function t(){M&&setTimeout(l,B,$.uDAD)}function e(t,e){M=e?"F"+"T"+"R"+"A"+"U"+"C":"F"+"T"+"R"+"A"+"U",setTimeout(l,B,$.uDS)}window.ftr__radd(t,e)}function l(t){try{var e;switch(t){case $.uFP:e=N;break;case $.uDF:e=I;break;default:e=M}if(!e)return;var n=function(){try{rt(),a(t+$.uS)}catch(t){}},r=function(e){try{rt(),z.td=1*new Date-z.ts,a(e?t+$.uF+$.cP:t+$.uF),t===$.uFP&&u(),t===$.uDF&&(j?w():h()),t!==$.uAS&&t!==$.dUAL||j||w(),t!==$.uDS&&t!==$.uDAD||j&&h()}catch(t){a($.eUoe)}};if(e==="F"+"T"+"R"+"A"+"U"+"C")return void r(!0);if(e==="F"+"T"+"R"+"A"+"U")return void r(!1);f(e,void 0,n,r)}catch(e){a(t+$.eTlu)}}var g="22g6edqo7i}x{vmo1forxgiurqw1qhw2vwdwxv",v="fort",p="erTo",m="ken",_=3;window.ftr__config={m:merchantConfig,s:"27",si:siteId};var y=!1,U=!1,T,x,A=v+p+m,D=400*24*60,S,C=10;S={write:function(t,e,r,o){void 0===o&&(o=!0);var i=0;window.ftr__config&&window.ftr__config.m&&window.ftr__config.m.ckDepth&&(i=window.ftr__config.m.ckDepth);var a,c,f=n(i);if(r?(a=new Date,a.setTime(a.getTime()+60*r*1e3),c="; expires="+a.toGMTString()):c="",!o)return void(document.cookie=escape(t)+"="+escape(e)+c+"; path="+f);for(var u=1,s=document.domain.split("."),d=C,h=!0;h&&s.length>=u&&d>0;){var w=s.slice(-u).join(".");document.cookie=escape(t)+"="+escape(e)+c+"; path="+f+"; domain="+w;var l=S.read(t);null!=l&&l==e||(w="."+w,document.cookie=escape(t)+"="+escape(e)+c+"; path="+f+"; domain="+w),h=-1===document.cookie.indexOf(t+"="+e),u++,d--}},read:function(t){var e=null;try{for(var n=escape(t)+"=",r=document.cookie.split(";"),o=32,i=0;i<r.length;i++){for(var a=r[i];a.charCodeAt(0)===o;)a=a.substring(1,a.length);0===a.indexOf(n)&&(e=unescape(a.substring(n.length,a.length)))}}finally{return e}}};var L=window.ftr__config.s;L+="ck";var R=function(t){var e=!1,n=null,r=function(){try{if(!n||!e)return;n.remove&&"function"==typeof n.remove?n.remove():document.head.removeChild(n),e=!1}catch(t){}};document.head&&(!function(){n=document.createElement("link"),n.setAttribute("rel","pre"+"con"+"nect"),n.setAttribute("cros"+"sori"+"gin","anonymous"),n.onload=r,n.onerror=r,n.setAttribute("href",t),document.head.appendChild(n),e=!0}(),setTimeout(r,3e3))},E=e(g||"22g6edqo7i}x{vmo1forxgiurqw1qhw2vwdwxv"),q=t("[0Uhtxhvw0LG",-_),P=t("[0Fruuhodwlrq0LG",-_),k=t("Li0Qrqh0Pdwfk",-_),F=e("dss1vlwhshuirupdqfhwhvw1qhw"),b=e("2241414142gqv0txhu|"),M,O="fgq71iruwhu1frp",I,V;I=e("(VQ(1"+O+"2vq2(VQ(2vfulsw1mv"),V=e("(VQ(1"+O+"2vqV2(VQ(2vfulsw1mv");var N;window.ftr__config&&window.ftr__config.m&&window.ftr__config.m.fpi&&(N=e("fgq71")+window.ftr__config.m.fpi+e("2vq2(VQ(2vfulsw1mv"));var j=!1;j=!1;var B=10;window.ftr__startScriptLoad=1*new Date;var G=function(t){var e="ft"+"r:tok"+"enR"+"eady";window.ftr__tt&&clearTimeout(window.ftr__tt),window.ftr__tt=setTimeout(function(){try{delete window.ftr__tt,t+="_tt";var n=document.createEvent("Event");n.initEvent(e,!1,!1),n.detail=t,document.dispatchEvent(n)}catch(t){}},1e3)},H=function(t){var e=function(t){return t||""},n=e(t.id)+"_"+e(t.ts)+"_"+e(t.td)+"_"+e(t.ex)+"_"+e(L),r=D;!isNaN(window.ftr__config.m.ckTTL)&&window.ftr__config.m.ckTTL&&(r=window.ftr__config.m.ckTTL),S.write(A,n,r,!0),G(n),window.ftr__gt=n},X=function(){var t=S.read(A)||"",e=t.split("_"),n=function(t){return e[t]||void 0};return{id:n(0),ts:n(1),td:n(2),ex:n(3),vr:n(4)}},Q=function(){for(var t={},e="fgu",n=[],r=0;r<256;r++)n[r]=(r<16?"0":"")+r.toString(16);var o=function(t,e,r,o,i){var a=i?"-":"";return n[255&t]+n[t>>8&255]+n[t>>16&255]+n[t>>24&255]+a+n[255&e]+n[e>>8&255]+a+n[e>>16&15|64]+n[e>>24&255]+a+n[63&r|128]+n[r>>8&255]+a+n[r>>16&255]+n[r>>24&255]+n[255&o]+n[o>>8&255]+n[o>>16&255]+n[o>>24&255]},i=function(){if(window.Uint32Array&&window.crypto&&window.crypto.getRandomValues){var t=new window.Uint32Array(4);return window.crypto.getRandomValues(t),{d0:t[0],d1:t[1],d2:t[2],d3:t[3]}}return{d0:4294967296*Math.random()>>>0,d1:4294967296*Math.random()>>>0,d2:4294967296*Math.random()>>>0,d3:4294967296*Math.random()>>>0}},a=function(){var t="",e=function(t,e){for(var n="",r=t;r>0;--r)n+=e.charAt(1e3*Math.random()%e.length);return n};return t+=e(2,"0123456789"),t+=e(1,"123456789"),t+=e(8,"0123456789")};return t.safeGenerateNoDash=function(){try{var t=i();return o(t.d0,t.d1,t.d2,t.d3,!1)}catch(t){try{return e+a()}catch(t){}}},t.isValidNumericalToken=function(t){return t&&t.toString().length<=11&&t.length>=9&&parseInt(t,10).toString().length<=11&&parseInt(t,10).toString().length>=9},t.isValidUUIDToken=function(t){return t&&32===t.toString().length&&/^[a-z0-9]+$/.test(t)},t.isValidFGUToken=function(t){return 0==t.indexOf(e)&&t.length>=12},t}(),$={uDF:"UDF",dUAL:"dUAL",uAS:"UAS",uDS:"UDS",uDAD:"UDAD",uFP:"UFP",mLd:"1",eTlu:"2",eUoe:"3",uS:"4",uF:"9",tmos:["T5","T10","T15","T30","T60"],tmosSecs:[5,10,15,30,60],bIR:"43",uB:"u",uBr:"b",cP:"c",nIL:"i",s:"s"};try{var z=X();try{z.id&&(Q.isValidNumericalToken(z.id)||Q.isValidUUIDToken(z.id)||Q.isValidFGUToken(z.id))?window.ftr__ncd=!1:(z.id=Q.safeGenerateNoDash(),window.ftr__ncd=!0),z.ts=window.ftr__startScriptLoad,H(z),window.ftr__snp_cwc=!!S.read(A),window.ftr__snp_cwc||(I=V);for(var J="for"+"ter"+".co"+"m",K="ht"+"tps://c"+"dn9."+J,W="ht"+"tps://"+z.id+"-"+siteId+".cd"+"n."+J,Y="http"+"s://cd"+"n3."+J,Z=[K,W,Y],tt=0;tt<Z.length;tt++)R(Z[tt]);var et=new Array($.tmosSecs.length),nt=function(t){for(var e=0;e<$.tmosSecs.length;e++)et[e]=setTimeout(a,1e3*$.tmosSecs[e],t+$.tmos[e])},rt=function(){for(var t=0;t<$.tmosSecs.length;t++)clearTimeout(et[t])};window.ftr__fdad=function(e,n){if(y)return window.ftr__altd2=x,void e();y=!0;var r={};r[k]=d(window.ftr__config.s,siteId,window.ftr__config.m.csp),s(E,function(n){try{var r=n.getAllResponseHeaders().toLowerCase();if(r.indexOf(P.toLowerCase())>=0){var o=n.getResponseHeader(P);x=window.ftr__altd2=t(atob(o),-_-1)}if(r.indexOf(q.toLowerCase())<0)return;var i=n.getResponseHeader(q),a=t(atob(i),-_-1);if(a){var c=a.split(":");if(c&&2===c.length){for(var f=c[0],u=c[1],s="",d=0,h=0;d<20;++d)s+=d%3>0&&h<12?siteId.charAt(h++):z.id.charAt(d);var w=u.split(",");if(w.length>1){var l=w[0],g=w[1];M=f+"/"+l+"."+s+"."+g}}}e()}catch(t){}},function(t,e){n&&n(t,e)},r)},window.ftr__radd=function(t,e){function n(e){try{var n=e.response,r=function(t){function e(t,n,i){try{if(i>=r)return{name:"",nextOffsetToProcess:n,error:"Max pointer dereference depth exceeded"};for(var a=[],c=n,f=t.getUint8(c),u=0;u<o;){if(u++,192==(192&f)){var s=(63&f)<<8|t.getUint8(c+1),d=e(t,s,i+1);if(d.error)return d;var h=d.name;return a.push(h),{name:a.join("."),nextOffsetToProcess:c+2}}if(!(f>0)){if(0!==f)return{name:"",nextOffsetToProcess:c,error:"Unexpected length at the end of name: "+f.toString()};return{name:a.join("."),nextOffsetToProcess:c+1}}for(var w="",l=1;l<=f;l++)w+=String.fromCharCode(t.getUint8(c+l));a.push(w),c+=f+1,f=t.getUint8(c)}return{name:"",nextOffsetToProcess:c,error:"Max iterations exceeded"}}catch(t){return{name:"",nextOffsetToProcess:n,error:"Unexpected error while parsing response: "+t.toString()}}}var n,r=4,o=100,i=16,a=new DataView(t),c=a.getUint16(0),f=a.getUint16(2),u=a.getUint16(4),s=a.getUint16(6),d=a.getUint16(8),h=a.getUint16(10),w=12,l=[],g=0;for(g=0;g<u;g++){if(n=e(a,w,0),n.error)throw new Error(n.error);if(w=n.nextOffsetToProcess,!Number.isInteger(w))throw new Error("invalid returned offset");var v=n.name,p=a.getUint16(w);w+=2;var m=a.getUint16(w);w+=2,l.push({qname:v,qtype:p,qclass:m})}var _=[];for(g=0;g<s;g++){if(n=e(a,w,0),n.error)throw new Error(n.error);if(w=n.nextOffsetToProcess,!Number.isInteger(w))throw new Error("invalid returned offset");var y=n.name,U=a.getUint16(w);if(U!==i)throw new Error("Unexpected record type: "+U.toString());w+=2;var T=a.getUint16(w);w+=2;var x=a.getUint32(w);w+=4;var A=a.getUint16(w);w+=2;for(var D="",S=w,C=0;S<w+A&&C<o;){C++;var L=a.getUint8(S);S+=1;D+=(new TextDecoder).decode(t.slice(S,S+L)),S+=L}if(C>=o)throw new Error("Max iterations exceeded while reading TXT data");w+=A,_.push({name:y,type:U,class:T,ttl:x,data:D})}return{transactionId:c,flags:f,questionCount:u,answerCount:s,authorityCount:d,additionalCount:h,questions:l,answers:_}}(n);if(!r)throw new Error("Error parsing DNS response");if(!("answers"in r))throw new Error("Unexpected response");var o=r.answers;if(0===o.length)throw new Error("No answers found");var i=o[0].data;i=i.replace(/^"(.*)"$/,"$1");var a=function(t){var e=40,n=32,r=126;try{for(var o=atob(t),i="",a=0;a<o.length;a++)i+=function(t){var o=t.charCodeAt(0),i=o-e;return i<n&&(i=r-(n-i)+1),String.fromCharCode(i)}(o[a]);return atob(i)}catch(t){return}}(i);if(!a)throw new Error("failed to decode the value");var c=function(t){var e="_"+"D"+"L"+"M"+"_",n=t.split(e);if(!(n.length<2)){var r=n[0],o=n[1];if(!(r.split(".").length-1<1))return{jURL:r,eURL:o}}}(a);if(!c)throw new Error("failed to parse the value");var f=c.jURL,u=c.eURL;M=function(t){for(var e="",n=0,r=0;n<20;++n)e+=n%3>0&&r<12?siteId.charAt(r++):z.id.charAt(n);return t.replace("/PRM1","").replace("/PRM2","/main.").replace("/PRM3",e).replace("/PRM4",".js")}(f),T=window.ftr__altd3=u,t()}catch(t){}}function r(t,n){e&&e(t,n)}if(U)return window.ftr__altd3=T,void t();window.ftr__config.m.dr==="N"+"D"+"R"&&e(new Error("N"+"D"+"R"),!1),b&&F||e(new Error("D"+"P"+"P"),!1),U=!0;try{var o=function(t){for(var e=new Uint8Array([0,0]),n=new Uint8Array([1,0]),r=new Uint8Array([0,1]),o=new Uint8Array([0,0]),i=new Uint8Array([0,0]),a=new Uint8Array([0,0]),c=t.split("."),f=[],u=0;u<c.length;u++){var s=c[u];f.push(s.length);for(var d=0;d<s.length;d++)f.push(s.charCodeAt(d))}f.push(0);var h=16,w=new Uint8Array([0,h]),l=new Uint8Array([0,1]),g=new Uint8Array(e.length+n.length+r.length+o.length+i.length+a.length+f.length+w.length+l.length);return g.set(e,0),g.set(n,e.length),g.set(r,e.length+n.length),g.set(o,e.length+n.length+r.length),g.set(i,e.length+n.length+r.length+o.length),g.set(a,e.length+n.length+r.length+o.length+i.length),g.set(f,e.length+n.length+r.length+o.length+i.length+a.length),g.set(w,e.length+n.length+r.length+o.length+i.length+a.length+f.length),g.set(l,e.length+n.length+r.length+o.length+i.length+a.length+f.length+w.length),g}(F);!function(t,e,n,r,o){var i=!1,a=new XMLHttpRequest;if(c("https:"+t,function(){o(new Error("CSP Violation"),!0),i=!0}),"//"===t.slice(0,2)&&(t="https:"+t),"withCredentials"in a)a.open("POST",t,!0);else{if("undefined"==typeof XDomainRequest)return;a=new XDomainRequest,a.open("POST",t)}a.responseType="arraybuffer",a.setRequestHeader("Content-Type",e),a.onload=function(){"function"==typeof r&&r(a)},a.onerror=function(t){if("function"==typeof o&&!i)try{o(t,!1),i=!0}catch(t){}},a.onprogress=function(){},a.ontimeout=function(){"function"==typeof o&&o("tim"+"eo"+"ut",!1)},setTimeout(function(){a.send(n)},0)}(b,"application/dns-message",o,n,r)}catch(t){e(t,!1)}};var ot=N?$.uFP:$.uDF;nt(ot),setTimeout(l,B,ot)}catch(t){a($.mLd)}}catch(t){}})();
</script>

CSPの設定（CSPを運用している場合）

CSP（Content Security Policy）とは、ブラウザで読み込み可能なリソースを制限する仕組みです。加盟店様サイトでCSPを運用している場合は、Forter関連リソースへのアクセスを許可する必要があります。

スニペット設定

Forterスニペットにて、merchantConfig.csp を true に設定してください。

var merchantConfig = {
    csp: true,
};

CSPホワイトリスト追加

加盟店種別	対応方法
Basicプラン	本ページに記載のCSP許可先（ホワイトリスト）とハッシュ値を追加してください。
Enterpriseプラン	加盟店様ご自身でForter管理画面にログインし、「JavaScript Snippets → Content Security Policy (CSP)」に表示される許可先とハッシュ値を追加してください。

CSPホワイトリストルール（テスト環境）

connect-src https://*.forter.com wss://cdn0.forter.com https://d2o5idwacg3gyw.cloudfront.net https://dz8rit8v72mig.cloudfront.net https://d3banl4fzuxsjl.cloudfront.net https://1.1.1.1 https://d94qwxh6czci4.cloudfront.net https://d1yz9u4jf6oqub.cloudfront.net https://wtp.siteperformancetest.net https://d6wfl40rgh70w.cloudfront.net https://siteperformancetest.net https://d1rk8r7fwbocot.cloudfront.net https://d3k4bt74u9esq1.cloudfront.net https://d1ezzflfzltk6e.cloudfront.net https://d3nocrch4qti4v.cloudfront.net https://duuytoqss3gu4.cloudfront.net https://df45ay5pw60dy.cloudfront.net
script-src https://*.forter.com https://dlthst9q2beh8.cloudfront.net https://d2nww8zpyj5pk0.cloudfront.net https://d2w2nqfk3z9hdt.cloudfront.net https://d16hi2v1mh7lg7.cloudfront.net
worker-src blob:

CSPハッシュ値（テスト環境）

sha256-9wMt2g/I/jBVU8d/iuS171RrlRhLDErZ3EcEqwK7XbU=

Forterトークン取得の実装例

Forterスニペットは定期的にforterTokenを生成・更新し、ftr:tokenReady イベントを発火します。以下のコードをForterスニペットより前に配置し、トークンを取得・保持してください。

Forterトークン取得例

<script>
  window.__forterToken__ = null;

  // Forterが発火する「ftr:tokenReady」を待つ
  document.addEventListener('ftr:tokenReady', function (evt) {
    var token = evt && evt.detail ? String(evt.detail) : '';
    if (!token) return;

    window.__forterToken__ = token;

    // 送信用hiddenに反映（nameはサーバ側の受け取り名に合わせてください）
    var el = document.querySelector('input[name="forterTokenCookie"]');
    if (el) el.value = token;

  });
</script>

<!-- 決済フォーム例（hidden でサーバに送る） -->
<form action="/payments/charge" method="POST">
  <input type="hidden" name="forterTokenCookie" value="">
  <!-- 他の決済項目 -->
  <button type="submit">支払う</button>
</form>

<!-- Basic加盟店様：本マニュアル記載のForterスニペットを貼付 -->
<!-- Enterprise加盟店様：管理画面「JavaScript Snippets」から取得したスニペットを貼付 -->

実装の流れ

1. トークン取得スクリプトの配置
   ftr:tokenReady イベントをリッスンするスクリプトを配置します。

2. Forterスニペットの配置
   トークン取得スクリプトの後、</body> 直前にForterスニペットを配置します。

3. 決済フォームにhidden要素を追加
   forterTokenCookieをサーバに送信するためのhidden要素を追加します。

4. サーバ側でトークンを受け取り、APIに設定
   受け取ったforterTokenCookieをOpenAPIタイプのクレジットカード決済APIに設定します。