一種防御頁面文本抽取的文本內容渲染組件及方法與流程
本發(fā)明涉及計算機處理，特別是一種防御頁面文本抽取的文本內容渲染組件及方法。
背景技術：
1、在b/s架構的設計中，html是一種用于創(chuàng)建網頁的標準標記語言，它用標簽的形式定義了網頁的結構和呈現形式，而文本信息被標簽包裹從而被瀏覽器讀取解釋并且渲染為像素信息。比如：<div>這是一段文本信息</div>，一般情況下這些文本信息都可以被用戶自由的復制,也可以被爬蟲程序讀取。
2、如果這些文本信息頁面只希望用戶查看但是并不想被用戶復制，目前主流的解決方案有如下幾種:
3、1、通過javascript腳本來禁用網頁的復制，剪切事件，右鍵菜單等。例如：
4、//禁止右鍵菜單
5、document.oncontextmenu＝function(){return?false；}；
6、//禁止文字選擇
7、document.onselectstart＝function(){return?false；}；
8、//禁止復制
9、document.oncopy＝function(){return?false；}；
10、//禁止剪切
11、document.oncut＝function(){return?false；}。
12、2、第二種方式html標簽屬性實現。例如：
13、<body
14、oncopy＝"return?false"
15、oncut＝"return?false；"
16、onselectstart＝"return?false"
17、oncontextmenu＝"return?false"><！--……--></body>。
18、3、第三種方式通過層疊樣式表(css樣式)實現禁用。例如：
19、body{
20、-moz-user-select:none；/*firefox私有屬性*/
21、-webkit-user-select:none；/*webkit內核私有屬性*/
22、-ms-user-select:none；/*ie私有屬性(ie10及以后)*/
23、-khtml-user-select:none；/*khtml內核私有屬性*/
24、-o-user-select:none；/*opera私有屬性*/
25、user-select:none；/*css3屬性*/}。
26、以上三種方式都是在w3c標準中提供的方式，所以也很容易被各種破解程序所針對。
27、針對第一種方式：一般的解除禁用插件會通過重寫這4個全局方法，甚至于直接禁用javascript的方式使其失效。
28、針對第二種方式：仍然可以通過重寫body上的4個方法，甚至直接禁用javascript的方式使其失效。
29、針對第三種方式：需要通過重新設置這幾個css樣式，因為此為官方的解決方案，所以幾乎所有的破解插件都支持此破解方式。
30、以上這三種方式都不能防御爬蟲程序，爬蟲程序會繞過瀏覽器，直接通過讀取html源文件，并且讀取標簽內容的方式獲得文本數據。
31、對開發(fā)者而言，css是編寫在樣式迭代文件中的，是靜態(tài)申明的，一般存放在*.css文件中。而文本信息是以html標簽形式編寫，如:<text>這是一段文字</text>。兩者的編寫方式有很大不同，而且一個css樣式可以被作用到多個不同的標簽上，文本信息也不相同，所以文本信息不能直接在css中寫死，而要有一種方法動態(tài)獲取。而且不能因為做了防御文本抽取，導致開發(fā)模式發(fā)生太大的變化，加大開發(fā)成本。
技術實現思路
1、本發(fā)明提出了一種防御頁面文本抽取的文本內容渲染組件及方法，以解決頁面文本內容不能防御爬蟲程序，爬蟲程序繞過瀏覽器，直接讀取html源文件的技術問題。
2、本發(fā)明的一個方面在于提供一種防御頁面文本抽取的文本內容渲染組件，所述文本內容渲染組件包括：
3、html標簽和原生標簽；所述原生標簽設置css偽元素和自定義的data-*屬性；
4、原生標簽，劫持傳入html標簽的文本內容，并將劫持的文本內容以data-*形式暫存在所述原生標簽的自定義的所述data-*屬性中；
5、所述原生標簽的所述css偽元素，用于讀取所述data-*屬性中的data-*形式的文本內容；
6、并且，將讀取的data-*形式的文本內容賦值給所述css偽元素的content屬性，對data-*形式的文本內容以css樣式渲染。
7、在一些優(yōu)選的實施例中，所述文本內容渲染組件以vue框架封裝，包括：
8、在所述html標簽內配置插槽，所述插槽用于承載傳入所述html標簽的文本內容；
9、通過useslots()函數獲取傳入所述html標簽的文本內容，并使用ref()函數創(chuàng)建響應式變量canrender，屏蔽所述html標簽對傳入文本內容的渲染；
10、對原生標簽添加css類，從而對原生標簽賦予css偽元素。
11、在一些優(yōu)選的實施例中，所述文本內容渲染組件以react框架封裝，包括：
12、使用react庫定義名為text的函數組件，創(chuàng)建所述html標簽和所述原生標簽；
13、其中，名為text的函數組件，包括用于承載傳入所述html標簽的文本內容的children參數，以及返回包含所述原生標簽的jsx表達式；
14、對原生標簽添加css類，從而對原生標簽賦予css偽元素；
15、其中，名為text的函數組件，通過所述原生標簽的jsx表達式，以屬性綁定的方式劫持傳入html標簽的文本內容，并將劫持的文本內容以data-*形式暫存在所述原生標簽的data-*屬性中。
16、在一些優(yōu)選的實施例中，所述文本內容渲染方組件還包括：
17、換行顯示模塊，用于對data-*形式的文本內容以css樣式渲染后，進行換行顯示。
18、本發(fā)明的另一個方面在于提供一種防御頁面文本抽取的文本內容渲染方法，所述文本內容渲染方法包括如下方法步驟：
19、創(chuàng)建html標簽和原生標簽；對所述原生標簽設置css偽元素和自定義的data-*屬性；
20、劫持傳入html標簽的文本內容，并將劫持的文本內容以data-*形式暫存在所述原生標簽的data-*屬性中；
21、所述原生標簽的所述css偽元素，讀取所述data-*屬性中的data-*形式的文本內容；
22、并且，將讀取的data-*形式的文本內容賦值給所述css偽元素的content屬性，對data-*形式的文本內容以css樣式渲染。
23、在一些優(yōu)選的實施例中，所述文本內容渲染方法以vue框架實現，包括：
24、在所述html標簽內配置插槽，所述插槽用于承載傳入所述html標簽的文本內容；
25、通過useslots()函數獲取傳入所述html標簽的文本內容，并使用ref()函數創(chuàng)建響應式變量canrender，屏蔽所述html標簽對傳入文本內容的渲染；
26、對原生標簽添加css類，從而對原生標簽賦予css偽元素。
27、在一些優(yōu)選的實施例中，所述文本內容渲染方法以react框架實現，包括：
28、使用react庫定義名為text的函數組件，創(chuàng)建所述html標簽和所述原生標簽；
29、其中，名為text的函數組件，包括用于承載傳入所述html標簽的文本內容的children參數，以及返回包含所述原生標簽的jsx表達式；
30、對原生標簽添加css類，從而對原生標簽賦予css偽元素；
31、其中，名為text的函數組件，通過所述原生標簽的jsx表達式，以屬性綁定的方式劫持傳入html標簽的文本內容，并將劫持的文本內容以data-*形式暫存在所述原生標簽的data-*屬性中。
32、在一些優(yōu)選的實施例中，所述文本內容渲染方法還包括：
33、對data-*形式的文本內容以css樣式渲染后，進行換行顯示。
34、與現有技術相比，本發(fā)明具有以下有益效果：
35、本發(fā)明提出的一種防御頁面文本抽取的文本內容渲染組件及方法，文本內容在傳入html標簽時，被原生標簽自定義的data-*屬性劫持，阻止文本內容插入html標簽，暫存在自定義的data-*屬性中，文本內容不在html標簽中以文本信息渲染的方式進行渲染，而是在原生標簽的css偽元素中以css樣式的圖形技術方式進行渲染。暫存文本內容的自定義data-*屬性可以是任意隨機字符，使得爬蟲程序無法預測文本內容，從而使文本內容無法被選中、復制。同時文本內容也不受javascript禁用的影響。
36、本發(fā)明提出的一種防御頁面文本抽取的文本內容渲染組件及方法，可以有效防御目前頁面文本內容不能防御爬蟲程序，爬蟲程序繞過瀏覽器，直接讀取html源文件，抽取頁面文本內容的技術問題。
37、本發(fā)明提出的一種防御頁面文本抽取的文本內容渲染組件及方法，文本內容不可在瀏覽器復制、拖動。所有通過禁用javascript來達到破解限制的手段都將會失效，通過爬蟲程序將無法從html內容中讀取到文本信息，防御通用的爬蟲處理邏輯。本發(fā)明通過動態(tài)的切換屬性名稱使得爬蟲程序無法準確定位的文本信息位置。
38、本發(fā)明提出的一種防御頁面文本抽取的文本內容渲染組件及方法，支持大部分css樣式,使用起來和普通的html標簽類似，對開發(fā)者比較友好，不需要耗費更多的學習成本。
- 還沒有人留言評論。精彩留言會獲得點贊！