我有一個有角度的應(yīng)用程序。有幾頁只有可見數(shù)據(jù) 對于訂閱者而不是免費用戶。

有幾個解決方案，我不確定哪一個合適:

只有一個html頁面(一個組件)可以有兩個不同的div，一個帶有可見文本(正常)和第二個 包含模糊文本的png文件。

只有一個html頁面(一個組件)，當用戶是自由用戶，使用css模糊只有基于用戶角色的字段的值。

有兩個html文件，這意味著兩個不同的角度組成部分，一個與png文件(模糊文本)和正常的可見文本的第二個組成部分。

我最關(guān)心的是什么

一個免費的用戶將進入頁面，檢查元素并刪除負責 使得文本變得模糊。

我需要指導前端開發(fā)團隊的發(fā)展方向，你能幫忙嗎？

正如你在問題中正確解釋的，用戶總是可以訪問開發(fā)工具，因此可以檢查所有元素并操作它們。您可以使用戶更難檢查元素或試圖丑化它們，但聰明的用戶也可以攔截它們。

網(wǎng)站通過GET請求工作。用戶輸入一個URL，瀏覽器將請求獲取一個文檔。然后，web服務(wù)器將通過向瀏覽器發(fā)送一個文檔來解析該請求，瀏覽器將在緩存中保存該文檔的副本。此時，您無法進一步控制該文檔，用戶可以隨心所欲地處理它。他可以檢查內(nèi)容或源代碼本身。

如果你記住這個過程，你就會明白，保護內(nèi)容的唯一方法是阻止請求。這必須在服務(wù)器端完成。特別是，您必須首先阻止未經(jīng)授權(quán)的用戶接收機密內(nèi)容。

選擇 1.使用圖像 雖然使用圖像聽起來很聰明，但是你必須注意到圖像有兩個主要的缺點。 他們?nèi)鄙倏稍L問性和響應(yīng)能力！

屏幕閱讀器無法讀取圖像上的文本。為此，您需要一個alt屬性，該屬性再次返回到每個人都可以訪問的點。

對于響應(yīng)性，需要注意的是，低分辨率圖像在低分辨率屏幕上效果很好，但在高分辨率屏幕上效果很差，文本由于拉伸而像素化，可讀性更差。反過來說，在大多數(shù)情況下會允許可讀性，但圖像大小將不是用戶友好的。以移動互聯(lián)網(wǎng)的速度，你可能要花很長時間來下載圖片，同時還會耗費寶貴的有限高速流量。

2.使用預(yù)覽 文章和報紙通常使用預(yù)覽。在那里，你將向免費用戶發(fā)送有限數(shù)量的文章作為預(yù)告，同時在后端切割其余部分，并使用漸變模糊(線性漸變，顏色帶有alpha值，如rgba或hsla)來隱藏不存在的內(nèi)容(不是由服務(wù)器發(fā)送的內(nèi)容)。

section {
  width: 10em;
  height: 20em;
  border: 2px dashed red;
  padding: 0.5em;
  position: relative;
}

section::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 20%);
}

<section>
  <!-- Actual text from the restricted content -->
  <p>This is just a preview text which will be blurred after some text.</p>
  
  <!-- Text will not actually be delivered and as such also not be within the DOM -->
  <p>This Text will not be existing while it does not matter because the reader wouldn't be able to see it anyways.</p>
</section>