マスキングについて

前提

KARTE Liveでは個人情報保護の観点からページ情報をマスキングすることが可能です。
また、マスキングの箇所を部分的に解除する(unhiddenSelectoreの活用)ことも可能です。
仕様として、お客様任意で設定いただく箇所(hiddenSelectorの活用)とデフォルトでマスキングがかかる箇所があります。

ページ情報のマスキング（お客様任意で設定の箇所）

全テキストの自動マスキング

設定方法は KARTE Live｜初期設定：セットアップ（動画取得の設定） をご確認ください。

自動で全テキストデータがマスキングされた状態でデータが保存される様になります。
マスキング除外要素 を指定することで表示が必要な箇所のマスキングを解除することができます。なお、画像内のテキスト、アイコンフォントや絵文字は変換されません。

変換ルール

マスキングイメージ

CSSセレクタによる任意要素のマスキング

設定方法は KARTE Live｜初期設定：セットアップ（動画取得の設定） をご確認ください。

組み込みの設定

ユーザーのセキュリティ保護の観点からフォームへの入力情報(input[type="xx"])の大部分が内部的にデフォルトのマスキングの対象となります。

具体的には下記のセレクタに該当するものが対象です。

'.krt-hidden',
"input:not([type='submit']):not([type='button'])",
'textarea',
'select',

`.krt-hidden`に関しては**上記のインプット系のセレクタに該当するもの以外でデフォルトでマスキングをかけておきたいケース**でWebサイト側の該当要素に`.krt-hidden`を追加して活用するものです。別途Webサイト側に修正が必要となるため、その点ご注意ください。    

"input:not([type='submit']):not([type='button'])" は input要素でもsubmitやbutton typeのものは除いていることを示しています。

ユーザーがフォームに入力する情報(パスワード/クレジットカード情報等)であっても、input要素にマッチしない場合はマスキング対象とはなりませんのでご注意ください。
従って、事前のテスト配信による挙動確認を行ってください。またマスキングされない場合の対処としては、対象のセレクタ自体をマスキングの対象として任意で指定いただく、全テキストの自動マスキングを設定する、設定が難しい場合は対象の情報が含まれるページ自体を配信対象外とする、などの方法があります。

マスキングの内部動作

KARTE Live用スクリプト内部で、セレクタにマッチする要素の中身（子要素含む）と、その要素のvalue, placeholder, checked, src, data, alt属性の値をサーバに送信しない、というロジックとなっています。
また、ページ描画後ユーザー操作に応じてインタラクティブに生成されたエレメントも動的検査し設定が適用されます。

推奨する方法

マスキング対象を明示的にするため、マスキング用のclassを1つ決め、隠したい要素に対してそのclassを指定し、KARTE Live用スクリプトにそのclassだけ設定することを推奨しています。
（:nth-child(n)（n番目の要素）など、サイトの構造を変更したときにずれてしまう可能性があるようなセレクタは非推奨としています。）

マスキング対象・除外設定の種類とパターン

KARTE LiveではWebサイト上の特定要素について、マスキングの設定・解除を行うことができます。

具体的なマスキングの仕様関連は大きく3つの項目で説明ができます。

マスキング除外設定の有無と録画の条件

マスキング除外(unhiddenSelector)設定の有無によって録画の可否は分岐されます。

マスキング除外(unhiddenSelector)が設定されていた場合、その子要素をマスキング対象(hiddenSelector)に指定しても録画される(マスキング除外が優勢となる)ことに注意してください。

マスキング設定不備によるエラー

マスキング設定が誤ったCSSセレクタ形式であった場合 Error: Failed to execute 'matches' on 'Element': ... のエラーがLiveスクリプトから発生します。
サイト動作やレコード処理そのものに悪影響はありませんが、マスキング設定が正しいCSSセレクタ形式になっているかご確認ください。