運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター未利用コマースクリエイター移行中(有効)コマースクリエイター利用中説明を表示 ▼

Webスキミング防止対策 ‐JavaScriptを利用している場合

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター未利用
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター移行中(有効)
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター利用中
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を新規構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

こちらでは、Webスキミング防止対策に関する、具体的な対策手順を説明しています。
Webスキミング防止対策の詳細については、以下よりご確認ください。

<既存(運用/構築中)店舗様: 「【2021年4月26日 仕様変更】注文手続きを行う画面などで、外部JavaScriptファイルが無効になります>

<2021.03.02以降に新規申込みの店舗様:「Webスキミング防止設定について」>
※特にご対応いただく内容はございません。ただし、セキュリティに関する重要な対策になりますので、ご一読ください。

個人情報・クレジットカード情報・パスワードなどの重要情報が入力または表示される画面では、JavaScriptを利用しないでください。

対象画面に「外部ファイル読み込みscriptタグ」を記述すると、自動的に削除されます。

「外部ファイル読み込みscriptタグ」とは、scriptタグにて、サーバに配置したJavaScriptファイルを読み込み、ファイルに記載されたスクリプトを実行するものです。
読み込まれる「外部JavaScriptファイル」が改ざんされ、攻撃に利用されるリスクがありますので、個人情報・クレジットカード情報・パスワードなどの重要情報が入力または表示される画面では、futureshopシステムおよび一部の許可されたドメイン以外からの外部読み込みのscriptタグは、削除いたします

削除される「外部ファイル読み込みscriptタグ」の例

一部の許可されたドメイン以外からの外部読み込みのscriptタグ
<script src="/js/jquery-2.2.4.min.js"></script>
<script src="https://example.com/js/owl-carousel2.0/owl.carousel.min.js"></script>
futureshop管理画面内のインラインスクリプトにおける一部の許可されたドメイン以外からの外部読み込みのscriptタグも対象に追加
<script>(function(w, a, i, o) {
	if (w[i] === o) return;
	w[i] = o;
	var b = a.createElement("script");
	b.type = "text/javascript";
	b.async = !0;
	b.src = "https://example.com/js/samplescript.js";
	// 外部スクリプト読み込み用のscriptタグを生成する内容ですが、外部スクリプトは読み込みできません
	a = a.getElementsByTagName("script")[0];
	a.parentNode.insertBefore(b, a)
	})(window, document, 'sampleId', 'sampleAccount');
</script>

対象画面について

「以前からのユーザー画面」「コマースクリエイター」では対象画面が異なります。
店舗様のご利用状況にあわせて、それぞれ以下でご確認ください。

※商品ページ、商品カテゴリページ、トップページなどでは、そのまま利用できます。
※ご注文完了・お申込完了・会員登録完了・メルマガ申込完了などは対象外となります。
※「連携システムでのJavaScriptの利用」やGoogle Analyticsなどの「測定タグへの影響」についてはリンク先にてご確認ください。

プレビューでの確認方法
「コマースクリエイター運用中/新規構築中」店舗様 「デザイン確認モード」でご確認ください。
「コマースクリエイターへ移行中(有効化)」店舗様 コマースクリエイター:「デザイン確認モード」でご確認ください。
以前からのユーザー画面:
構築>デザイン設定にて、ご利用いただいているデザインの「プレビュー」ボタンを押下してご確認ください。
「コマースクリエイター未利用(無効)」店舗様 構築>デザイン設定にて、ご利用いただいているデザインの「プレビュー」ボタンを押下してご確認ください。

JavaScriptタグ使用の確認と対応方法

プレビュー機能にてECサイトを確認する

まず、プレビュー機能にてECサイトを一通りご確認ください。
店舗様のご利用状況にあわせて、下表を参考にプレビューしてください。

※コマースクリエイターへ移行中(有効化)の店舗様
運用中の「以前からのECサイト」と構築中の「コマースクリエイター側のECサイト」双方をご確認ください。

futureshopシステムおよび一部の許可されたドメイン以外からの外部読み込みscript・iframeタグが常に削除された状態で表示されます。
2021.4.13以降では、futureshop管理画面内にインラインスクリプトで記述した外部読み込みscript・iframeタグ(一部の許可されたドメインは除く)も、削除されています。

JavaScriptを利用している場合に、表示が崩れたり、メニューなどは動作しなくなる場合があります。
表示や挙動などに影響がない場合、次の手順[2]にお進みください。
必要な修正がある場合は修正が必要な場合を先にご対応ください。

プレビューでの確認方法
「コマースクリエイター運用中/新規構築中」店舗様 「デザイン確認モード」でご確認ください。
「コマースクリエイターへ移行中(有効化)」店舗様 コマースクリエイター:「デザイン確認モード」でご確認ください。
以前からのユーザー画面:
構築>デザイン設定にて、ご利用いただいているデザインの「プレビュー」ボタンを押下してご確認ください。
「コマースクリエイター未利用(無効)」店舗様 構築>デザイン設定にて、ご利用いただいているデザインの「プレビュー」ボタンを押下してご確認ください。

ECサイトを確認する

外部ファイル読み込み用のscriptタグは削除されますので、ECサイトを確認してください。
※特に、注文手続き画面以降を十分ご確認ください。
※該当のscript・iframeタグは、問題がなければそのままにしていただいてかまいませんが、ECサイトの安全のために最終的には削除いただくのがより安全と思われます。

修正が必要な場合

注文手続きなどの画面で、それらの動作が不要であれば、該当部分を削除してください。
※JavaScriptがどこに記述されているかわからない場合、よくJavaScript・iframeが記述されている管理画面の画面・入力項目よくJavaScript・iframeが記述されている管理画面の画面・入力項目を参考にしてください。

利用しているJavaScriptについて内容(利用目的など)がわからない場合は、構築を依頼された制作会社などのパートナー企業へ確認を依頼してください。構築された企業へ依頼できない場合、新たな会社へ依頼してください。

<削除できない場合>

  1. サーバに配置したJavaScriptファイルを読み込んでいる場合には、サーバに配置したJavaScriptファイルを読み込んでいる場合を参照の上、ご対応ください。
  2. JavaScriptライブラリやプラグインの代わりに、外部CDNを利用してご修正いただけます。
    外部CDNとインラインスクリプトを利用する方法への変更をご検討ください。

サーバに配置したJavaScriptファイルを読み込んでいる場合

CMS(VPS)サーバ、webコンテンツサーバ、itemサーバ(アイテムボックス)などにJavaScriptを外部ファイルの形で保存し、読み込んで利用している場合を指します。
JavaScriptをインラインスクリプトの形式に変更します。

外部JavaScriptファイルの内容をfutureshop管理画面の任意の位置に転記してください。

インラインスクリプト内であっても、外部JavaScriptファイル・iframe外部読み込みはしない(一部の許可されたドメインは除く)よう、ご注意ください。2021.4.26以降、削除対象となります。

<対応が必要なJavaScript例>

サーバのjsディレクトリに保存されているcommon.jsを読み込んで利用している。

<script src="/js/common.js"></script>

<対応後のJavaScript例>

futureshop管理画面に転記します。

<script>
 // common.jsの内容をこちらに転記
</script>
転記方法の例
コマースクリエイターの場合 フリーパーツに転記し、該当ページのレイアウト配置するなどで対応してください。
以前からの管理画面の場合 以下の画面などに転記してください。
構築>ページ設定>コメントパターン設定
構築>デザイン設定>レイアウト編集-ページレイアウトのHTML

[参考]:虎の巻‐JavaScriptをHTML本文内へインラインで記述するには、どこに書けばいいですか?

外部CDNのご紹介

外部CDNとインラインスクリプトを利用する方法

JQueryなどのJavaScriptライブラリやプラグイン(Smooth Scroll・Swiper・matchHeightなど)については、CMS(VPS)サーバ、webコンテンツサーバ、itemサーバ(アイテムボックス)から読み込まず、外部CDNからの読み込みに変更します。

下記4サイトからの読み込みについては、scriptタグ削除の対象外といたします。

修正が必要なJavaScriptを、いずれかのサイトから検索し、変更してください。
検索方法は、外部CDNでのJavaScriptの探し方を参照してください。

以下から始まるURLは許可されます。

https://ajax.googleapis.com/
http://ajax.googleapis.com/
https://cdnjs.cloudflare.com/
https://cdn.jsdelivr.net/
//code.jquery.com/

<対応が必要なJavaScript例>

スライダー用の「swiper.min.js」ファイルを、webコンテンツサーバに配置して読み込みしている。
※続けて記載されているswiper.jsを利用してスライダーを動作させるためのインラインスクリプトは削除されません(そのままご利用いただけます)。

<script src="/js/swiper.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

<対応後のJavaScript例>

スライダー用の「swiper.min.js」ファイルを、オンラインCDNのcdnjsから読み込みに変更します。
このように、CMS(VPS)サーバやwebコンテンツサーバに保存したJavaScriptファイルを読み込む必要がないようにしてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js" integrity="sha512-NahckN+grB6fSxu3vQdKiyC69swjW6+xYUjaPVWTGtRuia8zUIlw2gkgjhZmAd8lAECEHV3HdCudarnAZaWkZw==" crossorigin="anonymous"></script>
<script>
const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

[参考]外部CDNでのJavaScriptの探し方

修正が必要なJavaScriptのライブラリ・プラグインがあれば、外部CDNで検索してください。
検索方法の例をご紹介します。

  • 利用しているJSファイルがわからない場合、開発者ツールなどで、直接JSファイルの内容を確認ください。
    多くの場合、名称や開発元が記載されています。
    表記例のサンプルは、「名称や開発元」の表記(例2)の場合を参照してください。
  • 上記でわからない場合は、構築を依頼された制作会社などのパートナー企業へ確認を依頼してください。
    構築された企業へ依頼できない場合、新たな会社へ依頼してください。

<例1>

<script type='text/javascript' src='/src/js/jquery-3.3.1.min.js'></script>
  1. こちらは、JQueryとなりますので、CDNで「JQuery」と検索します。
  2. cdnjsの場合
  3. 各CDNの配布ページにて、リンク記述をコピーします。
    ※必要に応じてバージョンを検索します。
  4. cdnjsの場合
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous"></script>
    				

<例2>

<script src="/commons/js/drawer.js"></script>
  1. こちらは、drawer.jsとなりますので、CDNで「drawer」と検索します。
  2. cdnjsの場合
  3. 各CDNの配布ページにて、リンク記述をコピーします。
    ※必要に応じてバージョンを検索します。今回の例では、ディベロッパーツールでバージョンを確認してみます。「名称や開発元」の表記(例2)の場合を参照してください。
  4. cdnjsの場合
    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js" integrity="sha512-Uu1v0Ru5cXEB+xm4STZb/xX8D2YO+zry2OfoXHpPq/EvecUtcUitERi8/4yIVOyP8B2P/PAtPaN9PrRZl3mm2Q==" crossorigin="anonymous"></script>

<ディベロッパーツールで確認した「名称や開発元」の表記:(例2)の場合>

/*!
 * jquery-drawer v3.2.1
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * https://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (https://blivesta.com/)
 */

連携システムでのJavaScript利用について

測定タグの確認について

よくある質問

項目表示について

各項目は「以前からのECサイト用」「コマースクリエイター用」「共通」の3種類があります。「コマースクリエイター移行中(有効)」選択時は全ての項目と説明が表示されます。

・以前からのECサイト用項目(コマースクリエイターでは使用しない):右側にこちらの色の点線が表示されます。

・コマースクリエイター専用ECサイト用の項目(以前からのECサイトには影響しない):右側にこちらの色の点線が表示されます。

・上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター未利用 コマースクリエイター移行中(有効) コマースクリエイター利用中
コマースクリエイター未利用
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター移行中(有効)
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター利用中
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を新規構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。