CSSを使用して名前を保護する/ぼかしする

Question

私は学区で働き、学生や教師の名前を含むウェブサイトのデモを行う必要がある場合があります。どんな公共のファッションでも名前を表示するのは大したことではないので、名前をぼかすCSSクラスを開発しました。それは素晴らしいですが、私はそれができるだけ安全であることを確認したいと思います。現在のところ、その中の唯一の「穴」は、誰かが実際に名前を強調表示していた場合に表示されます。ハイライトや欠けているかもしれない何かをセキュリティに役立てるクラスに含める方法はありますか？

/*Use these classes to blur sensitive data from appearing during demos*/ 
 

 
.secBlur, 
 
a.secBlur:hover, 
 
a.secBlur:focus { 
 
    /*color: transparent;*/ 
 
    color: rgba(0, 0, 0, 0); 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Job Title</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="secBlur">Jimmy G.</td> 
 
     <td>Software Architect</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="secBlur">Dave G.</td> 
 
     <td>Foo Fighter</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

使用user-select

/*Use these classes to blur sensitive data from appearing during demos*/ 
 

 
.secBlur, 
 
a.secBlur:hover, 
 
a.secBlur:focus { 
 
    /*color: transparent;*/ 
 
    color: rgba(0, 0, 0, 0); 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    -webkit-user-select: none; /* Chrome all/Safari all */ 
 
    -moz-user-select: none;  /* Firefox all */ 
 
    -ms-user-select: none;  /* IE 10+ */ 
 
    user-select: none;   /* Likely future */ 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Job Title</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="secBlur">Jimmy G.</td> 
 
     <td>Software Architect</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="secBlur">Dave G.</td> 
 
     <td>Foo Fighter</td> 
 
    </tr> 
 
    </tbody> 
 
</table>